前端访问nginx发布的视频文件，实现在线播放

最新推荐文章于 2024-03-31 10:46:34 发布

TorZhu

最新推荐文章于 2024-03-31 10:46:34 发布

阅读量2.2w

点赞数

分类专栏： JQuery 文章标签： nginx 前端服务器

本文链接：https://blog.csdn.net/u010636072/article/details/126332524

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

简介
依赖插件
nginx 配置
前端配置
实现效果

简介

主要是为了解决观看本地的视频文件，有时也需要在服务器上发布预览视频文件，所以就做了这么一个非常简单的视频预览功能，总共花费个把小时吧。

如果想直接用：点击下载源码文件

依赖插件

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();
});