79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template lang="pug">
|
||
video-player.video-player-box(ref='videoPlayer', :options='playerOptions',
|
||
:playsinline='true' v-show="show")
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Video',
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
videoUrl: {
|
||
type: Array,
|
||
default: () => [{
|
||
type: 'audio/x-mpegurl',
|
||
src: 'https://vse-as-all44.secdn.net/logos-channel/live/biblescreen-ad-free/chunklist_sess390797962.m3u8'
|
||
}]
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
playerOptions: {
|
||
// videojs options
|
||
language: 'zh-CN',
|
||
aspectRatio: '16:9',
|
||
autoplay: false,
|
||
muted: false,
|
||
loop: false,
|
||
preload: 'none',
|
||
playbackRates: [0.7, 1.0, 1.5, 2.0, 3.0],
|
||
sources: this.videoUrl,
|
||
controlBar: {
|
||
// 当前时间和总时间的 分隔符
|
||
timeDivider: true,
|
||
//当前播放时间
|
||
currentTimeDisplay: true,
|
||
// 总时间
|
||
durationDisplay: true,
|
||
|
||
/**
|
||
* 区分 currentTimeDisplay,timeDivider,durationDisplay
|
||
* remainingTimeDisplay显示默认样式，只显示当前播放时间，一般
|
||
* 为false
|
||
*/
|
||
remainingTimeDisplay: false,
|
||
fullscreenToggle: true
|
||
}
|
||
}
|
||
}
|
||
},
|
||
created () {},
|
||
mounted () {},
|
||
methods: {
|
||
play() {
|
||
this.$refs.videoPlayer.player.play()
|
||
},
|
||
stop() {
|
||
this.$refs.videoPlayer.player.pause()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='less' scoped>
|
||
/deep/.video-js.vjs-fluid,
|
||
.video-js.vjs-16-9,
|
||
.video-js.vjs-4-3 {
|
||
margin-top: 1.33rem;
|
||
}
|
||
|
||
/deep/.video-js .vjs-big-play-button {
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
</style>
|