Videojs-H5播放器,html5视频播放插件

　　Video.js是一个流行的html5视频播放插件。非常适合在移动端播放视频(比如微信网页)。功能强大，支持降级到flash，兼容ie8。git demo:http://files . cn blogs . com/files/stoneniqiu/video-js-5 . 11 . 4 . zip，http://videojs.com/,官网

　　看下默认例子：

　　Controls表示控制条，prload: preload，poster表示最初显示的图片。数据集支持json设置一些参数。出处不用多说，指的是字幕。

　　就是这样，但是实际上我们还有其他的需求。

　　不要字幕：

　　需要novtt的Js，在demo的alt文件里。这样，选择的字母就不会出现在视频控制栏中。当然，您不再需要页面中的track元素。

　　link href= ~/js/video-js-5 . 11 . 4/alt/video-js-cdn . min . CSS rel= style sheet /script src= ~/js/video-js-5 . 11 . 4/alt/video . novtt . min . js /script宽高自适应：

　　我开始自己用css设置，发现都不行。视频元素不同于一般元素，需要设置内部元素的比例，以达到响应式的宽度和高度。Video.js提供了两种方式。

　　Js:设置一个流体为真。

　　var player=videojs(video ，{ fluid: true }，function () { console.log(好了！);this . play()；//如果你因为某种原因不信任autoplay)但是这也需要为视频元素设置一个起始宽度和高度，否则起始图片是看不到的。

　　Css:可以直接添加样式。有三种。vjs-流体。vjs-4-3和。vjs-16-9。第一个会自动计算，后两个会指定比例。样式还需要设置显示图片的起始宽度和高度。

　　video id= video class= video-js vjs-default-skin vjs-fluid poster= http://vjs . Zen cdn . net/v/oceans . png width= 375 height= 200 controls preload= none data-setup= { html 5 :{ native text tracks :false } } Source src= @ model . URL type= video/MP4 p class= vjs-no-js javasc建议使用a href= 3358videojs.com/HTML5-video-support/target= _ blank 来支持HTML5/a浏览器访问。/p/视频事件问题：

　　我们一般关注三个事件：开始、暂停和结束。

　　var player=videojs(video ，{ }，function(){ console . log( Good to go！);//this . play()；//如果因为某种原因不信任autoplay })；Player.on (play ，function () {console.log(开始/恢复播放))；});Player.on(暂停，function () {console.log(暂停))；});Player.on(结束，function () {console.log(结束播放)；});还有更新事件：

　　player.on(timeupdate ，function(){ console . log(player . current time())；});可以通过判断当前时间和总时间是否相等来判断视频是否结束：

　　Player.on(时间更新，function(){//If current time()===duration())，视频已经播放if (player.duration())！=0 player . current time()===player . duration()){//播放结束} })；有前辈指出ended事件在Android设备上触发不正确(先做好准备)。

　　MIME类型设置

　　默认iis MIME设置不添加mp4类型，本地播放不会有问题，但是到了服务器会出现404错误。这需要在iis中设置MIME:

　　常见视频格式：

　　flv格式是添加关联的扩展名：flv和内容类型：应用程序/八位字节流。

　　f4v格式是扩展名： f4v，内容类型是application/octet-stream。

　　mp4格式是扩展名： mp4，内容类型：video/mp4。

　　Ogv格式是扩展名：ogv，以及内容类型：视频/ogg。

　　webm格式是扩展名：webm和内容类型：视频/webm。

　　它将在iis重新启动后生效。

　　样式自定义

　　codepen的官方地址给了http://codepen.io/heff/pen/EarCt,可以编辑和播放。主要按钮有播放按钮、控制栏和进度条。这是默认的。

　　这个：http://codepen.io/zanechua/pen/GozrNe崇高视频。

　　Flash设置

　　播放技术用于在浏览器或插件中播放视频或音频文件。如果是h5，会用视频或者音频元素。如果是flash，就定义了一个flash播放器。不仅仅是flash，还有Silverlight，Quicktime等技术。您可以直接在要素中定义数据设置。特定技术。

　　video-setup= { Tech holder :[ html 5 ， Flash ，其他支持的技术]} 或使用JavaScript:

　　videojs(videoID ，{ techOrder: [html5 ， flash ，其他支持的技术]})；这里默认的规则是第一种技术会被用来玩，后一种选项不能再用。比如先写html5，所有视频都用html5播放。如果我们想让flash优先，就把它放在前面：

　　data-setup= { tech holder :[ flash ， HTML5]} 在页面元素中，你会发现video.js给了我们使用的flash对象。

　　自动播放：

　　向video元素添加autoplay属性，或者向js添加autoplay:true。

　　Video id= video 自动播放海报=/images/bk . png width= 375 height= 200 控件preload= none/video或

　　var player=videojs(video ，{ autoplay:true }，function () { console.log(好了！);//this . play()；//保险你也可以主动调用play()})；自动播放总是很烦人，反之就是删除autoplay属性或者设置为false。

　　其他：

　　Video.js支持扩展插件，使用起来非常方便。

　　//定义一个插件函数示例plugin (options) {this.on (play)，function (e) {console.log(回放已开始！);});}//注册videojs.plugin(示例插件，示例插件)；//使用player . example plugin({ example option:true })；插件可以直接调用播放器的api。有一个播放列表插件可以研究一下，如果需要播放列表的话。https://github.com/brightcove/videojs-playlist和http://videojs.com/advanced/有这样的效果：

　　总结

　　以上是边肖介绍的HTML5视频播放器插件video.js的介绍。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。