html 视频类插件,科技常识：HTML5视频播放插件 video.js介绍-优快云博客

今天小编跟大家讲解下有关HTML5视频播放插件 video.js介绍，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5视频播放插件 video.js介绍的相关资料，希望小伙伴们看了有所帮助。

video.js是一款很流行的html5视频播放插件。很适合在移动端播放视频(比如微信网页) 功能强大且支持降级到flash,兼容ie8。官网：http://videojs.com/ git&demo ：http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

看下默认例子：

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 第一种它会自动计算后面两种指定比率。样式也需要设置起始宽高才能显示图片

data-setup='{ "html5" : { "nativeTextTracks" : false } }'>

播放视频需要启用 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：

常见视频格式：

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 可以编辑玩玩。主要是播放按钮控制条和进度条。默认就是上面那样。

还有这款：http://codepen.io/zanechua/pen/GozrNe SublimeVideo

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/ 有这样的效果：

总结

以上所述是小编给大家介绍的HTML5视频播放插件 video.js介绍希望对大家有所帮助如果大家有任何疑问请给我留言小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。