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”