52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<template lang="pug">
|
|
.play
|
|
video-player(v-if=" Object.keys(videoUrl).length != 0 ").video-player-box.video-player.vjs-custom-skin(:style="{display: `${isHidden ? 'none' : 'block'}`}" ref='videoPlayer', :options='playerOptions', :playsinline='true')
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
videoUrl: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
isHidden: { // true 隐藏播放， false 显示播放
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
playerOptions:{
|
|
// videojs options
|
|
muted: false,
|
|
language: 'en',
|
|
playbackRates: [0.7, 1.0, 1.5, 2.0],
|
|
sources: []
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
watch: {
|
|
videoUrl: function (val) {
|
|
console.log("检测到传入播放地址")
|
|
this.playerOptions.sources.push(val)
|
|
console.log("播放配置参数：", this.playerOptions)
|
|
}
|
|
},
|
|
methods: {
|
|
play () {
|
|
this.$refs.videoPlayer.player.play()
|
|
},
|
|
pause() {
|
|
this.$refs.videoPlayer.player.pause()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="stylus">
|
|
|
|
</style>
|