大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本文小编为大家详细介绍“怎么在HTML5中使用video.js视频播放插件”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么在HTML5中使用video.js视频播放插件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
创新互联成立于2013年,是专业互联网技术服务公司,拥有项目网站设计制作、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元美兰做网站,已为上家服务,为美兰各地企业和个人服务,联系电话:18980820575
看下默认例子:
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 第一种它会自动计算,后面两种指定比率。 样式也需要设置起始宽高才能显示图片
事件关注:
我们一般关注开始,暂停,结束这三个事件
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:
常见视频格式:
flv格式是加入关联扩展名:.flv,内容类型:application/octet-stream
f4v格式是扩展名:.f4v,内容类型:application/octet-stream
mp4格式是扩展名:.mp4,内容类型:video/mp4
ogv格式是扩展名:.ogv ,内容类型:video/ogg
webm格式是扩展名:.webm,内容类型:video/webm
设置完重启iis才能生效。
样式自定义
官方给了一个codepen的地址 http://codepen.io/heff/pen/EarCt 可以编辑玩玩。 主要是播放按钮,控制条和进度条。默认就是上面那样。
Flash设置
Playback技术用来在浏览器或插件中播放视频或音频文件,如果是h6会使用video或audio元素,如果是flash,会定义一个flash播放器。不止flash,还支持Silverlight、Quicktime等技术播放。可以在元素中直接定义data-setup。指定支持的技术。