简介
主要是为了解决观看本地的视频文件,有时也需要在服务器上发布预览视频文件,所以就做了这么一个非常简单的视频预览功能,总共花费个把小时吧。
如果想直接用:点击下载源码文件
依赖插件
1.nginx 需要到官网下载,目前采用的版本【
nginx-1.14.0
】
2.ckplayer 需要到官网下载,目前采用的版本【2020.09.20 version:X2
】
nginx 配置
nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http
{
include mime.types; #文件扩展名与文件类型映射表
default_type application/octet-stream;#默认文件类型
sendfile on;#开启高效文件传输模式,实现内核零拷贝
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 650; #连接超时时间,单位是秒
types_hash_max_size 2048;
client_max_body_size 100m; #客户端最大请求体大小/文件上传表示最大上传50M,需要多大设置多大。
client_body_buffer_size 128k; #Nginx分配给请求数据的Buffer大小,如果请求的数据小于client_body_buffer_size直接将数据先在内存中存储。如果请求的值大于client_body_buffer_size小于client_max_body_size,就会将数据先存储到临时文件[client_body_temp 指定的路径中,默认该路径值是/tmp/.]中,所以配置的client_body_temp地址,一定让执行的Nginx的用户组有读写权限。否则,当传输的数据大于client_body_buffer_size,写进临时文件失败会报错。
proxy_connect_timeout 600; #代理连接如果超过10分钟,则视为连接失败
proxy_send_timeout 600; #后端服务器数据回传时间_单位‘秒’,就是在规定时间之内后端服务器必须传完所有的数据,超过这个时间,连接失败
proxy_read_timeout 600; #连接成功后_等候后端服务器响应时间单位‘秒’_其实已经进入后端的排队之中等候处理(也可以说是后端服务器处理请求的时间)
proxy_buffer_size 4k; #默认值:proxy_buffer_size 4k/8k Nginx使用该大小申请read_buf,即大小指定了 upstream header 最大长度,如果响应头超过了这个长度,Nginx会报upstream sent too big header错误,然后client收到的是502。
proxy_buffers 4 32k; #默认值:proxy_buffers 256 8k 设置存储被代理服务器响应的body所占用的buffer个数和每个buffer大小。具体的意思是说,开辟256个长度为8k大小的read_buf用来存储body,当然不是连接建立初始化时就开辟256个,而是当当前buf不够存响应body时才会新申请一个,最多申请256个buf。
proxy_busy_buffers_size 64k; #proxy_busy_buffers_size不是独立的空间,他是proxy_buffers和proxy_buffer_size的一部分。nginx会在没有完全读完后端响应就开始向客户端传送数据,所以它会划出一部分busy状态的buffer来专门向客户端传送数据(建议为proxy_buffers中单个缓冲区的2倍),然后它继续从后端取数据。
#proxy_busy_buffer_size参数用来设置处于busy状态的buffer有多大。
server
{
listen 80;
server_name 127.0.0.1 localhost;
location /
{
root F:/workstations/staticProject/study/;
index page/main.html page/main.html;
}
location /files/
{
alias "F:/studyFiles/";
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
charset UTF-8;
}
}
}
前端配置
css文件配置
main.css
/*主容器*/
#main
{
width:96%;
margin-left:2%;
padding:8px;
height:100%;
}
/*视频播放容器*/
#video-div
{
width:100%;
height:600px;
margin-bottom:20px;
}
/*视频菜单浏览容器*/
#menu-div
{
width:100%;
height:400px;
}
/*优化隐藏页面提示的路径*/
#menu-div h1
{
display:none;
}
html页面脚本
main.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script charset="utf-8" src="../js/jquery.3.6.0.min.js"></script>
<script charset="utf-8" src="../js/ckplayer-x2-master/ckplayer/ckplayer.js"></script>
<script charset="utf-8" src="../js/main.js"></script>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<div id="main">
<!--视频播放容器-->
<div id="video-div">
</div>
<!--菜单栏-->
<div id="menu-div">
</div>
</div>
</body>
</html>
js脚本
main.js
//# SourceURL=main.js
$(function(){
//文件服务名称
var serverAddr = "http://localhost/";
//发布的目录名称
var dirname="files/";
var main=
{
/**
* 功能初始化
*/
initialFun : function ()
{
this.initialPage();//页面初始化
this.menuClick();//菜单条点击事件
},
/**
* 页面初始化
*/
initialPage : function()
{
//加载服务
main.loadServerInfo(serverAddr+dirname);
},
/**
* 加载服务信息
*/
loadServerInfo : function (url)
{
//加载服务
$.get(url,function(data){
$("#menu-div").html(data);
});
},
/**
* 加载视频
*/
/**
* 菜单条点击事件
*/
menuClick : function ()
{
$("#menu-div").off("click","a").on("click","a",function(){
var $A=$(this);
//获取地址
var href=$A.attr("href");
if(!href)
{
return false;
}
//获取总目录名称
var uri=$("#menu-div title").html().replace("Index of ","");
var url=serverAddr+uri+href;
if(url.indexOf(".mp4")>0)
{
//加载视频
main.loadVideoInfo(url);
return false;
}
else
{
//加载服务
main.loadServerInfo(url);
}
return false;
});
},
/**
* 加载视频
*/
loadVideoInfo : function (url)
{
var html='<div class="video" style="width:100%;height:600px;"></div>';
$("#video-div").html(html);
var videoObject = {
container: '.video', //容器的ID或className
video:url,
autoplay:true //自动播放
};
var player=new ckplayer(videoObject);
//初始化视频栏高度
main.initVideoHeight();
},
/**
* 初始化视频栏高度
*/
initVideoHeight : function ()
{
//获取视频播放器高度
var height=$("#video-div .video").outerHeight();
$("#video-div").css("height",height);
}
};
//初始化
main.initialFun();
});
实现效果
目前实现的效果分布是上下结构,如果有点开发功底,也可以在css文件调整为左右结构(相当简单)。