在这里写这篇文章是因为先前用了Video.js这款JS库插件,实现是可以实现,但是用户体验度不怎么好,所以今天就换了xgplayer的西瓜播放器,在自定义样式与插件上,xgplayer有更高的灵活性和可控性,它可以自定义关闭效果并自行开发,并且文档可读性强,快速上手。下面来看看它的使用:
一、安装
// 最新稳定版本
npm install xgplayer --save
二、使用
1、在页面提供占位 DOM
<div id="mse"></div>
2、实例化
import Player from 'xgplayer';
data() {
return {
Player: null
}
},
mounted: () {
this.getData();
},
methods: {
// 设置视频配置(注意:initPlayer应放在异步函数里或mounted之后,不可在created里直接加载,否则不生效)
initPlayer(url){
this.Player = new Player({
// el、url为必选配置,其它为可选配置
el: document.querySelector('#mse'),
url: url,
width: '100%',
height: '3.7rem',
volume: 0.6, // 初始音量
autoplay: false, // 自动播放
playbackRate: [0.5, 0.75, 1, 1.5, 2], // 当前播放速度
defaultPlaybackRate: 1, // 播放速度设置为1
playsinline: true,
});
},
getData() {
this.initPlayer('/video/mp4/xgplayer-demo-720p.mp4')
}
}
3、最终效果:
注:此视频不是代码中显示视频,因只能上传指定平台和已上传视频,这里就给大家截图啦~
注:如果对兼容性没有太大要求的话用这个还是不错的(点播兼容到 IE10+)
参考网站:
链接: http://h5player.bytedance.com/config/.