本文共 3747 字，大约阅读时间需要 12 分钟。

亲测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

3、Js代码

这段代码是设置窗口预览的格式，包括渲染一系列的暂停播放、进度条等组件的。

//设置中文videojs.addLanguage('zh-CN', {    "Play": "播放",    "Pause": "暂停",    "Current Time": "当前时间",    "Duration": "时长",    "Remaining Time": "剩余时间",    "Stream Type": "媒体流类型",    "LIVE": "直播",    "Loaded": "加载完毕",    "Progress": "进度",    "Fullscreen": "全屏",    "Non-Fullscreen": "退出全屏",    "Mute": "静音",    "Unmute": "取消静音",    "Playback Rate": "播放速度",    "Subtitles": "字幕",    "subtitles off": "关闭字幕",    "Captions": "内嵌字幕",    "captions off": "关闭内嵌字幕",    "Chapters": "节目段落",    "Close Modal Dialog": "关闭弹窗",    "Descriptions": "描述",    "descriptions off": "关闭描述",    "Audio Track": "音轨",    "You aborted the media playback": "视频播放被终止",    "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",    "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",    "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",    "No compatible source was found for this media.": "无法找到此视频兼容的源。",    "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",    "Play Video": "播放视频",    "Close": "关闭",    "Modal Window": "弹窗",    "This is a modal window": "这是一个弹窗",    "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",    ", opens captions settings dialog": ", 开启标题设置弹窗",    ", opens subtitles settings dialog": ", 开启字幕设置弹窗",    ", opens descriptions settings dialog": ", 开启描述设置弹窗",    ", selected": ", 选择",    "captions settings": "字幕设定",    "Audio Player": "音频播放器",    "Video Player": "视频播放器",    "Replay": "重播",    "Progress Bar": "进度小节",    "Volume Level": "音量",    "subtitles settings": "字幕设定",    "descriptions settings": "描述设定",    "Text": "文字",    "White": "白",    "Black": "黑",    "Red": "红",    "Green": "绿",    "Blue": "蓝",    "Yellow": "黄",    "Magenta": "紫红",    "Cyan": "青",    "Background": "背景",    "Window": "视窗",    "Transparent": "透明",    "Semi-Transparent": "半透明",    "Opaque": "不透明",    "Font Size": "字体尺寸",    "Text Edge Style": "字体边缘样式",    "None": "无",    "Raised": "浮雕",    "Depressed": "压低",    "Uniform": "均匀",    "Dropshadow": "下阴影",    "Font Family": "字体库",    "Proportional Sans-Serif": "比例无细体",    "Monospace Sans-Serif": "单间隔无细体",    "Proportional Serif": "比例细体",    "Monospace Serif": "单间隔细体",    "Casual": "舒适",    "Script": "手写体",    "Small Caps": "小型大写字体",    "Reset": "重启",    "restore all settings to the default values": "恢复全部设定至预设值",    "Done": "完成",    "Caption Settings Dialog": "字幕设定视窗",    "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",    "End of dialog window.": "结束对话视窗"});

4、引入相应的js库和css布局即可进行预览了。

相关js库和css。这里封装了个demo，免费进行下载。

写在后面： 博主非专业前端，第一次用视频相关，只接触了video.js。操作简单上手容易一下子就吸引了我这个后端野鸡切图仔。如果后来人有什么好用的工具，记得推荐一下哈哈哈哈哈。如有错误还望指正，

by一只不务正业的后端程序猿！

转载地址：http://hilrn.baihongyu.com/