videojs--跨浏览器的HTML视频播放器(可自定义样式)

官网

写在前面,为什么选择这个播放器,因为有文档,支持添加插件,很方便自定义样式,
比较活跃,github有各种bug解决方案等
不过没想到有那么多坑

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

      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}'//版本4data-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]  [异常2][3]

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

关键字:video.js, JavaScript

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部