简介

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

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

依赖插件

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或classNamevideo: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文件调整为左右结构（相当简单）。

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

手机访问电脑文件ftp服务器,怎么用手机直接访问电脑上的视频文件图片等？
如上三个标题,就是这篇文章的精要了第一次在写文章的时候这么注意seo,诶,要发展还是要舔一舔引擎大佬的啊~ 再说最后一句废话,这个是最近逛其他博主安利了一个nplayer播放器,下下来捣鼓了一下才知 ...
视频文件损坏无法播放怎么修复?
有很多原因可能导致视频文件损坏无法播放,如: 病毒和漏洞:漏洞和病毒是计算机的噩梦,它们可以攻击存储在硬盘上的文件和视频.如果没有杀毒程序,视频文件很容易受到损坏. 盗版视频转换器:一些视频转换器不是 ...
mp4视频文件损坏无法播放怎么修复?
对于喜好分享想小伙伴,都会拍摄各种各样的视频,然后在对拍摄好的视频文件进行编辑处理,这样才能展现出更多的精彩瞬间,但有时在处理视频素材时,会发现视频已经损坏,无法正常播放.这种情况下,我们很难再进行二 ...
佳能R5相机断电0KB字节DAT视频文件无法打开播放怎么数据恢复MP4
佳能相机录制视频过程如遇到异常状况,比如说录着录着突然电池没电,人为误操作没关机前电池或者卡被意外拨出,死机,相机摔落等等意外中断录制的情况,有可能导致录制中的MP4视频变为扩展名为DAT的文件,有时 ...
【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
tornado+nginx上传视频文件
[http://arloz.me/tornado/2014/06/27/uploadvideotornado.html] [NGINX REFRER: Nginx upload module] 由于t ...
本地服务器的音乐如何才能播放视频文件夹,mx播放器如何添加本地文件添加本地文件设置方法...
更换播放器皮肤/主题颜色在这个版本中主题颜色的设置十分丰富不再拘泥于原来的黑白二色点击"设置"选择"列表"项修改主题,选择一种自己喜欢的颜色现在有十 ...
OpenCV重复播放摄像头视频，循环播放摄像头(视频)文件，循环播放视频中某一段视频
OpenCV中使用摄像头录像并保存并不难实现,本文针对摄像头实时帧画面进行记录,并重复播放视频文件的读取和处理方法类似,首先,本文对摄像头进行采集和实时帧画面显示. #include <ope ...
浏览器-点击预览视频文件（自动播放、循环播放）
点击预览按钮,弹出窗口自动播放视频文件,并伴有遮罩层从网上自行下载jquery-1.11.2.min.js(版本自己选择)和flvplayer.swf文件.需要注意的是网上一般有两个版本的flvpl ...

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

文章目录

简介

依赖插件

nginx 配置

前端配置

css文件配置

html页面脚本

js脚本

实现效果

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

最新文章

热门文章