html 视频样式的修改,videojs--跨浏览器的HTML视频播放器（可自定义样式）

写在前面，为什么选择这个播放器，因为有文档，支持添加插件，很方便自定义样式，

比较活跃，github有各种bug解决方案等

不过没想到有那么多坑

最简单的静态页面使用方法

poster="MY_VIDEO_POSTER.jpg" data-setup="{}">

To view this video please enable JavaScript, and consider upgrading to a web browser that

supports HTML5 video

动态插入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,默认不全屏播放

前台：

IOS 参考：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-SW30