video.js是一款很流行的html5视频播放插件。很适合在移动端播放视频(比如微信网页)，功能强大，且支持降级到flash,兼容ie8。官网：http://videojs.com/ git&demo ：http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip
看下默认例子：
controls表示控制条，prload：预加载，poster表示最初的显示的图片。data-set支持用json来设置一些参数。source不用说了，track指的是字幕。
这样子就出来了，但是在实际中我们还有其他需求。
不要字幕：
需要应用novtt的js，在demo的alt文件中。这样视频控制条中就不会出现字母的选择。当然你不再需要页面中的track元素了。
| <link href="~/js/video-js-5.11.4/alt/video-js-cdn.min.css" rel="stylesheet" /> <script src="~/js/video-js-5.11.4/alt/video.novtt.min.js"></script> |
宽高自适应：
开始用css自己设置，发现怎么都没有效果。视频元素不同于一般的元素，需要通过设置内在元素的比率来做到响应式的宽高。video.js提供了两种方式。
js：设置一个fluid为true。
| var player = videojs('video', { fluid: true }, function () { console.log('Good to go!'); this.play(); // if you don't trust autoplay for some reason }) |
但这个还需要给video元素设置一个起始的宽高，不然开始的图片看不见。
css：可以直接添加样式。有三种 .vjs-fluid,.vjs-4-3,.vjs-16-9 第一种它会自动计算，后面两种指定比率。 样式也需要设置起始宽高才能显示图片
| <video id="video" class="video-js vjs-default-skin vjs-fluid" poster="http://vjs.zencdn.net/v/oceans.png" width="375" height="200" controls preload="none" data-setup='{ "html5" : { "nativeTextTracks" : false } }'> <source src="@Model.Url" type="video/mp4"> <p class="vjs-no-js"> 播放视频需要启用 JavaScript，推荐使用<a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5</a>的浏览器访问。</p> </video> |
事件关注：
我们一般关注开始，暂停，结束这三个事件
| var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // if you don't trust autoplay for some reason }); player.on('play', function () { console.log('开始/恢复播放'); }); player.on('pause', function () { console.log('暂停播放'); }); player.on('ended', function () { console.log('结束播放'); }); |
还有更新事件：
