作者:手机用户2502939901 | 来源:互联网 | 2020-08-23 13:05
这次给大家带来H5的视频播放库video.js详解,使用H5的视频播放库video.js的注意事项有哪些,下面就是实战案例,一起来看一下。
video.js是一款很流行的html5视频播放插件。很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8。官网:http://videojs.com/ git&demo :http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip
看下默认例子:
To view this video please enable Javascript, and consider upgrading to a web browser that supports HTML5 video
View Code
controls表示控制条,prload:预加载,poster表示最初的显示的图片。data-set支持用json来设置一些参数。source不用说了,track指的是字幕。
这样子就出来了,但是在实际中我们还有其他需求。
不要字幕: 需要应用novtt的js,在demo的alt文件中。这样视频控制条中就不会出现字母的选择。当然你不再需要页面中的track元素了。
宽高自适应: 开始用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 第一种它会自动计算,后面两种指定比率。 样式也需要设置起始宽高才能显示图片
播放视频需要启用 Javascript,推荐使用支持HTML5 的浏览器访问。
事件关注: 我们一般关注开始,暂停,结束这三个事件
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('结束播放');
}); 还有更新事件:
player.on('timeupdate', function() {
console.log(player.currentTime());
}); 可以通过判断当前时间和总时间是否相等来判断视频是否结束:
player.on('timeupdate', function () {
// 如果 currentTime() === duration(),则视频已播放完毕
if (player.duration() != 0 && player.currentTime() === player.duration()) { // 播放结束 }
}); 有前辈指出在ended事件在安卓设备上没有正确触发(先备着)。
MIME类型设置 默认的iis MIME设置是没有增加mp4类型的,会出现本地播放没有问题,但是到了服务器上就出404错误。这需要在iis中设置MIME:
Flash设置 Playback技术用来在浏览器或插件中播放视频或音频文件,如果是h5会使用video或audio元素,如果是flash,会定义一个flash播放器。不止flash,还支持Silverlight、Quicktime等技术播放。可以在元素中直接定义data-setup。指定支持的技术。
或者使用Javascript:
videojs("videoID", {
techOrder: ["html5", "flash", "other supported tech"]
}); 这里默认的规则是,会用第一项技术去播放,不行再使用后面的选项。比如上方html5写在第一位,就会用html5播放所有的视频。如果我们想flash优先,放在前面即可:
data-setup='{ "techOrder": ["flash","html5"] }' 在页面元素中你会发现,video.js给我们使用的flash对象了。
自动播放: 给video元素加上autoplay属性,或者在js中加入autoplay:true
或
var player = videojs('video', { autoplay:true }, function () {
console.log('Good to go!'); //this.play(); // 保险你还可以主动调用play()
}); 自动播放总让人讨厌,反之就是删除autoplay属性或设置为false。
其他: video.js支持扩展插件,用起来很方便。
//定义一个插件
function examplePlugin(options) { this.on('play', function (e) {
console.log('playback has started!');
});
} //注册
videojs.plugin('examplePlugin', examplePlugin); // 使用
player.examplePlugin({ exampleOption: true }); 插件内部可以直接调用播放器的api。 有一款playlist的插件可以研究下,如过你需要播放列表。https://github.com/brightcove/videojs-playlist 以及 http://videojs.com/advanced/ 有这样的效果:
公众号支付接口的开发
以上就是H5的视频播放库video.js详解的详细内容,更多请关注 第一PHP社区 其它相关文章!