vue 组件 videojs 播放器

<template>
<div
v-show="videoSource.playUrl"
id="player-wrap"
>
<div id="player-vjs-wrap">
<video
id="player"
class="video-js vjs-big-play-centered vjs-16-9"
controls
playsinline
webkit-playsinline
x5-playsinline
poster=""
/>
</div>
</div>
</template>
<script>
export default {
name: 'PlayerWrap',
props: {
videoSource: { //视频源地址
type: Object,
default() {
return {};
}
},
curProgress: {//初始播放位置（进度）
type: Number,
default:0
}
},
data() {
return {
player: null
};
},
watch: {
videoSource: {
handler(val, oldval) {
var data = [
{
src: val.playUrl,
type: 'video/mp4'
}
];
//切换播放源时告知原视频播放进度
var percent = this.getCurProgress()
this.$emit('playToggle', percent);
this.player.src(data);
this.player.load(data);
},
deep: true //开启深度监听
}
},
mounted: function() {
// pc端视频区禁止鼠标右键点击
document.getElementById('player-wrap').oncontextmenu = function() {
return false;
};
this.initPlayer('player');
},
beforeDestroy: function() {
// 组件销毁时，清除播放器
if (this.player) {
this.player.dispose();
this.player = null;
}
},
methods: {
initPlayer(domId, lang) {
//this.setVideoPlayerLang(lang);
//videojs.options.flash.swf = '../../../videojs/video-js.swf';
this.player = videojs(domId, {
autoplay: true,
muted: true,
playbackRates: [1, 1.25, 1.5, 2, 3],
children: {
mediaLoader: true,
posterImage: true,
loadingSpinner: true,
bigPlayButton: true,
controlBar: {
children: {
playToggle: true,
currentTimeDisplay: true,
timeDivider: true,
durationDisplay: true,
progressControl: true,
customControlSpacer: true,
volumePanel: {inline: false},
playbackRateMenuButton: true,
fullscreenToggle: true
}
},
errorDisplay: true
},
sources: [
{
src: this.videoSource.playUrl,
type: 'video/mp4'
}
]
});
this.initPlayerEvent();
},
setVideoPlayerLang(lang) {
var video_i18n = lang ? 'lang' : 'zh-CN';
videojs.addLanguage(video_i18n, LANG_VIDEO[i18n]);
},
initPlayerEvent() {
this.onPlayerError();
this.onPlayerPlay();
this.onPlayerPause()
this.onPlayerEnded();
this.onProgressChange();
this.onLoadedMetadata()
},
//播放失败
onPlayerError() {
var _this = this;
this.player.on('error', function() {
_this.$emit('playError');
//console.log('player error', errCode);
});
},
//播放成功
onPlayerPlay() {
var _this = this;
this.player.on('playing', function() {
_this.$emit('playPlaying');
//console.log('player playing');
});
},
//播放暂停
onPlayerPause() {
var _this = this;
this.player.on('pause', function() {
var percent = _this.getCurProgress()
_this.$emit('playPause', percent);
//console.log('player playing');
});
},
//播放结束
onPlayerEnded() {
var _this = this;
this.player.on('ended', function() {
_this.$emit('playEnded');
//console.log('player ended');
});
},
//实时进度
onProgressChange() {
var _this = this;
this.player.on('timeupdate', function(event) {
var percent = _this.getCurProgress()
_this.$emit('playProgress', percent);
//console.log(percent);
});
},
//设置指定进度
onLoadedMetadata(){
var _this = this;
this.player.on('loadedmetadata', function() {
//console.log('loadedmetadata-视频源数据加载完成')
//设置上次播放时间lastLearnTime(秒)
var duration = this.duration(); //视频时常
var currentTime = duration*_this.curProgress/100; //当前时间
this.currentTime(currentTime);
});
},
getCurProgress(){
var currentTime = this.player.currentTime(); //当前时间
var duration = this.player.duration(); //视频时常
var percent = ((currentTime / duration) * 100).toFixed(0);
return percent
}
}
};
</script>
<style>
#player-wrap {
position: absolute;
width: 100%;
height: 100%;
background-color: #252525;
}
#player-vjs-wrap {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: relative;
left: 50%;
top: 50%;
}
</style>

最后

以上就是怕孤单夏天为你收集整理的vue 组件 videojs 播放器的全部内容，希望文章能够帮你解决vue 组件 videojs 播放器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。