81 lines
1.5 KiB
Vue
81 lines
1.5 KiB
Vue
<template>
|
|
<div class="videoPlay">
|
|
<video
|
|
ref="m3u8_video"
|
|
class="video-js vjs-default-skin vjs-big-play-centered"
|
|
controls
|
|
>
|
|
<source :src="videoSrc" />
|
|
</video>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
import videojs from 'video.js'
|
|
import 'video.js/dist/video-js.css'
|
|
const props = defineProps({
|
|
videoSrc: String,
|
|
autoPlay: Boolean,
|
|
})
|
|
|
|
const m3u8_video = ref()
|
|
let player
|
|
const initPlay = async () => {
|
|
videojs.addLanguage('zh-CN', zh)
|
|
await nextTick()
|
|
const options = {
|
|
muted: true,
|
|
controls: true,
|
|
autoplay: true,
|
|
loop: true,
|
|
language: 'zh-CN',
|
|
techOrder: ['html5'],
|
|
}
|
|
player = videojs(m3u8_video.value, options, () => {
|
|
videojs.log('播放器已经准备好了!')
|
|
if (props.autoPlay && props.videoSrc) {
|
|
player.play()
|
|
}
|
|
player.on('ended', () => {
|
|
videojs.log('播放结束了!')
|
|
})
|
|
player.on('error', () => {
|
|
videojs.log('播放器解析出错!')
|
|
})
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
initPlay()
|
|
})
|
|
//直接改变路径测试
|
|
watch(
|
|
() => props.videoSrc,
|
|
() => {
|
|
player.pause()
|
|
player.src(props.videoSrc)
|
|
player.load()
|
|
if (props.videoSrc) {
|
|
player.play()
|
|
}
|
|
}
|
|
)
|
|
onBeforeUnmount(() => {
|
|
player?.dispose()
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.videoPlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
.video-js {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: fill;
|
|
}
|
|
}
|
|
|
|
:deep(.vjs-tech) {
|
|
object-fit: fill;
|
|
}
|
|
</style>
|