asp文件浏览器,定制flv播放

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
' 网站主目录,用于查看多媒体及文本文件或下载
dim www:www = "http://127.0.0.1"
' 授权访问目录
dim root:root = "E:\Desktop\test"

' 初始化目录
dim dir:dir = Request.QueryString("dir")
if dir = "undefined" then dir = root & "\" else dir = dir & "\"

' 是否在授权目录下
if instr(dir, root) = 1 then
	set fso = Server.CreateObject("Scripting.FileSystemObject")

	' 目录是否存在
	if fso.FolderExists(dir) then
		set gf = fso.GetFolder(dir)

		' 拼接目录
		dim paths:paths = """paths"":["
		For Each path in gf.subfolders 
			paths = paths & ",""" & path & """" 
		Next
		paths = paths & "]"
		paths = replace(paths, "[,", "[")

		' 拼接文件
		dim files:files = """files"":["
		For Each file in gf.files
			files = files & ",""" & file & """"
		Next
		files = files & "]"
		files = replace(files, "[,", "[")

		set fg = nothing
		set fso = nothing

		' json格式输出目录文件信息
		response.write(replace("{" & paths & "," & files & "}", "\", "\\"))
		response.end()
	end if

	set fso = nothing
end if
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>文件浏览器</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css">
	<style>
	* { margin: 0; padding: 0; color: #666; font-family: "microsoft yahei"; }
	.header { background-color: #333; line-height: 60px; color: #FFF; font-size: 30px; text-indent: 2%; }
	.bar { padding: 0 2%; width: 96%; background-color: #EEE; border-bottom: 1px solid #DDD; overflow: hidden; zoom: 1; }
	.bar .up { float: left; line-height: 40px; font-size: 16px; cursor: pointer; }
	.bar .dir { float: left; margin-left: 20px; line-height: 40px; font-size: 16px; }
	.bar .view { float: right; line-height: 40px; }
	.bar .view a { padding-left: 10px; font-size: 16px; text-decoration: none; }
	#content  { padding: 10px 2%; width: 96%; overflow: hidden; zoom: 1; }
	#content dl:hover { background-color: #F6F6F6; }
	.v dl { height: 40px; border-bottom: 1px dotted #CCC; cursor: pointer; }
	.v dl dt { float: left; margin-left: 10px; width: 40px; line-height: 40px; text-align: center; font-size: 30px; }
	.v dl dd { float: left; margin-left: 5px; line-height: 40px; text-align: center; font-size: 16px; }
	.h dl { float: left; margin: 0 5px 10px 5px; width: 120px; height: 100px; cursor: pointer; }
	.h dl dt { width: 120px; line-height: 60px; text-align: center; font-size: 60px; }
	.h dl dd { height: 40px; line-height: 20px; font-size: 14px; text-align: center; overflow: hidden; }
	#dplayer { display: none; width: 720px; height: 576px; }
	</style>
</head>
<body>
	<div class="header">文件浏览器</div>
	<div class="bar">
		<div class="up"><i class="fa fa-reply" aria-hidden="true"></i>&nbsp;&nbsp;上级目录</div>
		<div class="dir"></div>
		<div class="view">
			<a href="javascript:$('#content').attr('class', 'v');" class="fa fa-th-list" aria-hidden="true"></a>
			<a href="javascript:$('#content').attr('class', 'h');" class="fa fa-th-large" aria-hidden="true"></a>
		</div>
	</div>
	<div class="h" id="content"></div>
	<div id="dplayer"></div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<script>
const www = '<% response.write(www) %>';
const root = '<% response.write(replace(root, "\", "\\")) %>';

function getDir(_dir) {
	// 路径显示,不显示根目录
	var path = _dir == undefined ? '\\' : _dir.replace(root, '') + '\\';
	$('.dir').empty().append(path);
	// 获取目录和文件
	$.getJSON('?dir=' + _dir, function(json) {
		var list = '', i;
		for (i in json.paths) {
			list += '<dl data-path="' + json.paths[i] + '"><dt class="fa fa-folder" aria-hidden="true"></dt><dd>' + json.paths[i].replace(root + path, '') + '</dd></dl>'; 
		}
		for (i in json.files) {
			list += '<dl data-file="' + json.files[i] + '"><dt class="fa fa-file" aria-hidden="true"></dt><dd>' + json.files[i].replace(root + path, '') + '</dd></dl>'; 
		}
		$('#content').empty().append(list);
	});
}

$(function() {
	getDir();

	// 上一级目录
	$('.up').on('click', function(){
		var dir = $('.dir').text();
		var dirCell = dir.split('\\');
		if (dir != '\\' && dirCell.length > 2) {
			getDir(root + dir.replace('\\' + dirCell[dirCell.length - 2] + '\\', ''));
		}
	});

	$('#content').on('click', 'dl', function(){
		var path = $(this).data('path'), file = $(this).data('file');

		// 进入下一级目录
		if (path) { 
			getDir(path); 
		}

		// 播放flv文件
		if (file && file.split('.').pop().toLowerCase() == 'flv') {
			var videourl = file.replace(root, www).replace(/\\/g, '/');
			const dp = new DPlayer({
			    container: document.getElementById('dplayer'),
				contextmenu: [{ text: '下载视频', link: videourl }],
			    video: { url: videourl, type: 'flv' },
			});

			layer.open({
				type: 1,
				title: false,
				area: ['720px', '576px'],
				content: $('#dplayer'),
				cancel: function(index, layero) { dp.destroy(); }
			});

			dp.play();
		}
	});
});
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值