77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<template>
|
|
<div class="dh-video">
|
|
<video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
|
|
<source :src="src">
|
|
</video>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import videojs from 'video.js'
|
|
import 'videojs-contrib-hls'
|
|
import 'video.js/dist/video-js.css'
|
|
|
|
export default {
|
|
props: ['src'],
|
|
|
|
data () {
|
|
return {
|
|
id: `video-${new Date().getTime()}`
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
src: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.$nextTick(() => {
|
|
videojs(this.id, {
|
|
autoplay: true
|
|
}, function () { console.log('videojs播放器初始化成功') })
|
|
})
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
if (this.src) {
|
|
this.$nextTick(() => {
|
|
videojs(this.id, {
|
|
autoplay: true
|
|
}, function () { console.log('videojs播放器初始化成功') })
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dh-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
.video-js {
|
|
width: 100%!important;
|
|
height: 100%!important;
|
|
}
|
|
|
|
::v-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> |