HTML5支持媒体播放，如音频audio，视频video，但是默认样式比较丑，并且兼容性比较差，这里推荐一个视频插件video.js
1 页面引用视频资源
|
1 2 3 |
<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 初始化
两种方式：
- 标签方式，在video上加
class="video-js"和data-setup='{}'，缺一不可 - js方式
|
1 2 3 4 5 |
var player = videojs('example_video_1',{ },function(){ console.log(this) }); |
3 设置视屏标题
|
1 |
player.addChild('TitleBar', {text: '这里是标题'}); |
标题样式，可以自己修改
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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默认居中样式就可以了
|
1 |
class="video-js vjs-big-play-centered" |
5 设置视频播放速度
|
1 |
player.playbackRate(0.7);//正常1，值越小速度越慢，如果为负，反向播放 |
6 播放/暂停
|
1 2 |
player.play();//播放 player.pause();//暂停 |
总结：video.js插件支持很多原生的属性，可以结合着原生来，因为很多浏览器视频兼容性比较差，像微信分享链接里面的视频，就无法自动播放，必须手动点击才可以播放；还有就是QQ里面的视频播放完后会出现广告推送，这一页也是无法跳过的。我自己也在探索学习，后期遇到再更！
推荐阅读：https://www.jianshu.com/p/06336ed5d66d
欢迎转载，转载需带着文章出处链接~~
One Reply to “视频播放插件video.js–插件推荐3”