前端实现视频在线预览插件之video.js上手

亲测G级视频秒播, 不考虑传输和缓存。当然视频得在服务器上

最近做了个新功能。说白了其实就是一个系统内的留言。当然留言内容包括视频留言、图片留言、信息留言、文档留言。对新提交的内容需要先进行预览和审核。然后针对附件内容进行下载。当然上传下载都是自己在做。后面有时间再来讲Java实现视频上传、转码、文件压缩、前端自定义导出word文档。

1、预览效果图

先上效果图吧，这是博主嵌套在界面里面的一个播放窗口，可根据自己需求自定义大小：

注：由于videojs是基于html5的，所以仅支持mp4，webm，ogv三种格式。博主是专门进行了视频转码，全部统一转成mp4，最后为了方便，直接限制只能上传mp4格式，当技术有限的时候，只有让用户来适应软件了。

---

2、预览窗口dom

• m.jpg是视频封面。可根据自己需求抠个图，我的是自己扣的。email.video是后台返回用于绑定播放的视频存放相对路径，博主用的是vue直接进行了数据绑定。也可js进行绑定。
• js绑定,更直观的看的话数据先来个js绑定吧，如果vue绑定的话，省略即可！

	var myPlayer = videojs('my-video');
	videojs("my-video").ready(function(){
	       var myPlayer = this;
	       myPlayer.src("/emailFile/lifanjiashu/test1.mp4");
	       myPlayer.play();
	});

路径：/emailFile/lifanjiashu/test1.mp4