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

官网

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

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

<head><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><body><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></p></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}'//版本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]  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>IOS 参考：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-SW30

videojs--跨浏览器的HTML视频播放器（可自定义样式）相关推荐

基于Html5的兼容所有主流浏览器的在线视频播放器videoJs
在一个新的项目上需要实现在线视频播放,原本打算借助优酷的视频存储和播放,但是发现这个需要用户注册优酷账户,严重影响用户体验,于是这个方案被毙掉了.于是开始了自己开发一个在线播放器的想法,当然尽量使用已 ...
Android 节操视频播放器jiecaovideoplayer自定义播放音频使用：屏蔽全屏按钮，增加倒计时，当前时间/总时间
一.屏蔽全屏按钮找到JCVideoPlayerStandard.java文件中的代码: private void fixAudio() {if (SrcType.equalsIgnoreCase(& ...
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频
1.背景项目中有涉及视频播放的需求,并且UI设计了样式,与原生的视频video组件有差异,所以使用了vue-video-player插件,并对vue-video-player进行样式改造,自定义播放 ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
audiojs--跨浏览器的HTML音频播放器（可自定义样式）
一款跨浏览器的音频播放器,可惜例子和文档都比较少英文文档官网使用方法: 第一步引用文件: <script src="/audiojs/audio.min.js"> ...
jQuery和CSS3定制HTML5视频播放器
摘要: 随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是很值得开发者和用户关注的. ... ... ... ... ...
实现HTML5的video标签视频播放器
HTML5的video标签 video标签提供了直接在网页上播放视频的方式,摆脱了flash插件.让实现变得更简单,只是video标签兼容性还有些问题:不兼容ie8及以下版本的浏览器. video ...
五、VR视频播放器开发 ---- Android VR视频/Google VR for Android /VR Pano/VR Video
simplevideowidget 如果没有看上一篇文章的请先看完再来看这一篇吧,有写重复的就不介绍了 AndroidManifest 上一篇文章有提到,其实这里也没有什么特别的 build.grad ...
三、VR视频播放器开发 ---- Android VR视频/Google VR for Android /VR Pano/VR Video
原文地址: http://blog.csdn.net/qq_24889075/article/details/52133170 http://www.jianshu.com/p/82163453ed3 ...
QT简单的视频播放器
1.功能选择路径下的固定视频格式文件播放,对应的音频和视频同步播放 2.新建一个不含UI界面的QT工程特别注意:QT中的路径名不能含中文设置一个不含UI界面的工程取消构建目录因为要引入视频播 ...

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

videojs--跨浏览器的HTML视频播放器（可自定义样式）相关推荐

最新文章

热门文章