82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<template>
|
|
<div class="dh-video" style="height: 100%;">
|
|
<video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
|
|
<source :src="src">
|
|
</video>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: ['src'],
|
|
|
|
data() {
|
|
return {
|
|
id: `video-${Math.ceil(Math.random() * 1000000)}`
|
|
}
|
|
},
|
|
methods: {
|
|
loadLib() {
|
|
const promise = url => new Promise(resolve => this.$injectLib(url, () => resolve())),
|
|
promiseCss = url => new Promise(resolve => this.$injectCss(url, () => resolve()))
|
|
return Promise.all([
|
|
promiseCss("https://cdn.cunwuyun.cn/videojs/video-js.min.css"),
|
|
promise("https://cdn.cunwuyun.cn/videojs/video.min.js"),
|
|
]).then(() => promise("https://cdn.cunwuyun.cn/videojs/videojs-contrib-hls.js"))
|
|
},
|
|
initVideoJs(count = 0) {
|
|
if (!!window.videojs) {
|
|
videojs(this.id, {
|
|
autoplay: true
|
|
}, function () {
|
|
console.log('videojs播放器初始化成功')
|
|
})
|
|
} else if (count < 10) {
|
|
setTimeout(() => this.initVideoJs(), 200)
|
|
} else console.error("videojs加载失败!")
|
|
}
|
|
},
|
|
watch: {
|
|
src: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.loadLib().then(() => this.initVideoJs())
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dh-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.video-js {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
:deep( .video-js ){
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
|
|
.vjs-big-play-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
& > div {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
</style>
|