写在前面，为什么选择这个播放器，因为有文档，支持添加插件，很方便自定义样式，
比较活跃，github有各种bug解决方案等
不过没想到有那么多坑
最简单的静态页面使用方法
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet"> <!-- If you'd like to support IE8 --> <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> </head> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}"> <source src="MY_VIDEO.mp4" type='video/mp4'> <source src="MY_VIDEO.webm" type='video/webm'> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </video> <script src="http://vjs.zencdn.net/5.8.8/video.js"></script> </body>动态插入HTML时初始化方法
videojs("example_video_id", {}, function(){
// Player (this) is initialized and ready.
videojs(document.getElementById('example_video_id'), {}, function() {
// This is functionally the same as the previous example.
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
// You can grab an element by class if you'd like, just make sure
// if it's an array that you pick one (here we chose the first).
更多详细使用方法请查看官方文档
常见问题汇总
1，pc端正常，IOS上面不起作用
data-setup='{"customControlsOnMobile": true}'//版本4
data-setup='{"nativeControlsForTouch": false}' //版本5
videojs(document.getElementById('example_video_id'), {"nativeControlsForTouch": false}, function() {
// This is functionally the same as the previous example.
2，其它错误
先调用官方的视频做测试，http://vjs.zencdn.net/v/oceans.mp4，
如果这个正常，其它的格式异常，请参考：
[异常1][2] http://stackoverflow.com/questions/16697473/videojs-4-native-controls-now-default-on-mobile
[异常2][3] http://stackoverflow.com/questions/26182101/videojs-hls-not-working
3,只是在Iphone上不起作用（官网示例 5.8）参考：github issue
if (browser.TOUCH_ENABLED && options.nativeControlsForTouch === true || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) {
this.setControls(true);
//替换为
if ((browser.TOUCH_ENABLED || browser.IS_IPHONE || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) && options.nativeControlsForTouch === true){
this.setControls(true);
4,默认不全屏播放
前台：<video webkit-playsinline ></video>