视频播放插件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>

2 初始化

两种方式:

  1. 标签方式,在video上加 class="video-js"data-setup='{}',缺一不可
  2. js方式
var player = videojs('example_video_1',{

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

3 设置视屏标题

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;
}

4 视频播放按钮

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

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

5 设置视频播放速度

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

6 播放/暂停

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

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

推荐阅读:https://www.jianshu.com/p/06336ed5d66d

 

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

视频播放插件video.js–插件推荐3》有1个想法

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据