基于video.js 的在线播放功能

因为在此次项目中需要实现在线播放视频的效果. 所以上网百度了一下相关的插件, 最后决定选用基于html5的video.js插件来实现.

video.js也是开源免费的，下载十分方便.

首先下载 video.js插件，下载地址http://download.csdn.net/detail/tanksyg/8104769
下载之后解压, 主要用到的资源文件是 video.js , video-js.min.css.在html 或 jsp页面首先导入这两个资源文件

 <link href="${rc.contextPath}/statics/css/video-js.min.css" rel="stylesheet"><script src="${rc.contextPath}/statics/libs/video.min.js"></script>

以下是官网上给出的简单使用方法, 因为我们只是要求能在线播放就行, 对其他样式什么的要求不大,所以

这个简单例子就足够用了.

 <!DOCTYPE HTML>
    <html>
    <head>    <title>Video.js Test Suite</title>
        <link href="//vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">
        <script src="//vjs.zencdn.net/4.10/video.js"></script>   </head>
    <body>        <video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264">      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
        </video>
    </body>
    </html>

因为是web项目播放的视频肯定是在服务器中的,上述例子中主要是根据source的src找到资源的播放

地址,从而进行播放.

所以首先要找到的就是服务器上，视频的相对地址.这点非常容易实现,下面这样应该就能获取到的

视频的path

  String path = request.getSession().getServletContext().getRealPath("/");       path = path + "resources\\" + "";

然后就是将其转化为相应的视频流,写入到reponse中,返回请求.下面是此方法的完整代码

       @RequestMapping("/getVideo")public void getVideo(HttpServletRequest request, HttpServletResponse response) {String transcode = request.getParameter("transcode");String path = request.getSession().getServletContext().getRealPath("/");path = path + "resources\\" + transcode + "\\videos\\1\\";File file0 = new File(path);File[] fielList = file0.listFiles();String fileName = null;for(int i = 0; i < fielList.length; i++){fileName = fielList[i].getName();}path = path + fileName;File file = new File(path);InputStream in = null;ServletOutputStream out = null;try {in = new FileInputStream(file);out = response.getOutputStream();byte[] buffer = new byte[4 * 1024];int length;while ((length = in.read(buffer)) > 0) {out.write(buffer, 0, length);}} catch (FileNotFoundException e) {System.out.println("文件读取失败,文件不存在");e.printStackTrace();} catch (IOException e) {System.out.println("文件流输出异常");e.printStackTrace();} finally {try {in.close();out.close();} catch (IOException e) {System.out.println("文件流关闭异常");e.printStackTrace();}}}

最后一步就是设置src的值通过请求调用controller中的此方法，从而实现在线播放视频的效果.因为项目

用的是html页面，不是jsp页面所以只能在js中实现请求controller的方法.

一开始的想法本来是直接将src设置为相对应的请求方法, 但是并没有达到预期效果, 后来将src地址写死测，试了一下,是可以播放的. 所以方法应该是正确的,

但可能是页面初始化或其他的原因, 导致并没有调用相应的方法。

 $("#my-player").find("source").attr("src", "/zhzf/videomanage/getVideo?transcode=" + transcode);

接着又试了几种其他的方法, 也没能成功实现. 最后直接用jQuery将页面上对应的那段html代码直接在js中赋值,成功实现了效果。

 var modalContent = '<video id="my-player" style="width: 996px; height:600px;" class="video-js" controls preload="auto" poster="" data-setup="{}">'+ '<source src="/zhzf/videomanage/getVideo?transcode=' + transcode + '" type="video/mp4">'+ '</source><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that'+ '<a href="#" target="_blank">supports HTML5 video</a></p></video>';$('#videoModal').html(modalContent);

基于video.js 的在线播放功能相关推荐

vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
基于 Next.js实现在线Excel
如果要从头开始使用 React 构建一个完整的 Web 应用程序,需要哪些步骤? 这当然不像把大象装进冰箱那么简单,只需要分成三步:打开冰箱,拿起大象,塞进冰箱就好. 我们需要考虑细节有很多,比如: ...
Vue3封装Video.js组件(基于video.js)
Vue3封装Video.js组件话不多说直接上代码在项目中安装Video.js 通过npm安装video.js npm install video.js --save Video.js组件的封装 ...
小白玩机器学习（6）--- 基于Tensorflow.js的在线手写数字识别
一.题目要求 1.三个js文件,分别完成:网络训练以及模型保存.模型加载及准确率测试.在线手写数字识别: 2.模型测试准确率要高于99.3%(尽量): 3.在线手写数字识别需要能够通过鼠标在画布中写入 ...
基于ntkoocx.js的在线word编辑
其中最关键ntkoocx.js的方法: //Save Document function TANGER_OCX_SaveDoc(op_flag) {TANGER_OCX_SaveEditToSe ...
基于Vue.js 的天天影视云视听平台的设计
随着互联网的飞速发展,大量的用户会通过视听平台来观看视频.经过调查发现,截至2020年12月,我国网络视听用户规模达9.44亿,网民使用率为95.4%.以哔哩哔哩(Bilibili)弹幕视频网站为例, ...
video.js 自定义使用
video.js 直接使用自定义控制条和样式弹幕相关 plugin写法 video.js 是开源插件,据说甚至可以集合到gitbook上 note: 一个需要注意的点是下载下来的demo.html ...
在线编辑、在线预览、在线转换，基于wps.js + java + react / vue，无需任何插件，零安装
基于wps.js在线编辑.在线预览.文档转换前台vue / react,后台java终于开源啦,无需任何插件,零安装,可以直接配置完打包部署,也可直接集成项目中,或者二次开发,后续会不定期更新,有好的 ...
html 在线播放器,HTML5 Web播放器-Video.js
原标题:HTML5 Web播放器-Video.js Video.js是一款优秀的HTML5 Web视频播放器.它同时支持 HTM5 和 Flash 视频,支持在桌面和移动设备上的视频播放,截至目前,大 ...

基于video.js 的在线播放功能

基于video.js 的在线播放功能相关推荐

最新文章

热门文章