视频播放插件video.js–插件推荐3

HTML5支持媒体播放，如音频audio，视频video，但是默认样式比较丑，并且兼容性比较差，这里推荐一个视频插件video.js

1 页面引用视频资源

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" data-setup="{}" poster="http://vjs.zencdn.net/v/oceans.png">
    	<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>

</video>

2 初始化

两种方式：

标签方式，在video上加 class="video-js"和data-setup='{}'，缺一不可
js方式

var player = videojs('example_video_1',{

       },function(){
	console.log(this)
});

var player = videojs('example_video_1',{

},function(){

console.log(this)

});

3 设置视屏标题

player.addChild('TitleBar', {text: '这里是标题'});

1	player.addChild('TitleBar', {text: '这里是标题'});

标题样式，可以自己修改

.video-js .vjs-title-bar {
  color: red;
  display: none;
  font-size: 2em;
  padding: .5em;
  position: absolute;
  top: 0;
  right: 0;
  min-width: 80px;
  height: 40px;
  line-height: 40px;
}

.video-js.vjs-paused.vjs-has-started .vjs-title-bar,
.video-js.vjs-user-active.vjs-has-started .vjs-title-bar{
  display: block;
}

.video-js .vjs-title-bar {

color: red;

display: none;

font-size: 2em;

padding: .5em;

position: absolute;

top: 0;

right: 0;

min-width: 80px;

height: 40px;

line-height: 40px;

}

.video-js.vjs-paused.vjs-has-started .vjs-title-bar,

.video-js.vjs-user-active.vjs-has-started .vjs-title-bar{

display: block;

}

4 视频播放按钮

默认是放在左上角，可以居中放置，使用css默认居中样式就可以了

class="video-js vjs-big-play-centered"

1	class="video-js vjs-big-play-centered"

5 设置视频播放速度

player.playbackRate(0.7);//正常1，值越小速度越慢，如果为负，反向播放

1	player.playbackRate(0.7);//正常1，值越小速度越慢，如果为负，反向播放

6 播放/暂停

player.play();//播放
player.pause();//暂停

1 2	player.play();//播放 player.pause();//暂停

总结：video.js插件支持很多原生的属性，可以结合着原生来，因为很多浏览器视频兼容性比较差，像微信分享链接里面的视频，就无法自动播放，必须手动点击才可以播放；还有就是QQ里面的视频播放完后会出现广告推送，这一页也是无法跳过的。我自己也在探索学习，后期遇到再更！

欢迎转载，转载需带着文章出处链接~~

火辣辣

前端博客