82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<template>
|
|
<video
|
|
ref="video"
|
|
class="_fc-video-box"
|
|
:controls="controls"
|
|
:loop="loop"
|
|
@pause="$emit('pause', $event)"
|
|
@play="$emit('play', $event)"
|
|
@ended="$emit('ended', $event)"
|
|
></video>
|
|
</template>
|
|
|
|
<script>
|
|
import loadjs from '../../utils/loadjs/loadjs';
|
|
import {defineComponent} from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: 'VideoBox',
|
|
emits: ['pause', 'play', 'ended', 'error'],
|
|
data() {
|
|
return {
|
|
player: null,
|
|
};
|
|
},
|
|
props: {
|
|
src: String,
|
|
type: String,
|
|
controls: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
autoplay: Boolean,
|
|
isLive: Boolean,
|
|
withCredentials: Boolean,
|
|
loop: Boolean
|
|
},
|
|
watch: {
|
|
src: {
|
|
handler: function () {
|
|
this.$nextTick(() => {
|
|
loadjs.ready('mpegts', () => {
|
|
const video = this.$refs.video;
|
|
const player = window.mpegts.createPlayer({
|
|
isLive: this.isLive,
|
|
type: this.type,
|
|
url: this.src,
|
|
});
|
|
|
|
player.attachMediaElement(video);
|
|
|
|
player.on('error', (e) => {
|
|
this.$emit('error', e);
|
|
});
|
|
|
|
player.load();
|
|
if (this.autoplay) {
|
|
player.play().catch((e) => {
|
|
this.$emit('error', e);
|
|
});
|
|
}
|
|
this.player = player;
|
|
})
|
|
})
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
created() {
|
|
if (window.mpegts) {
|
|
loadjs.done('mpegts');
|
|
} else if (!loadjs.isDefined('mpegts')) {
|
|
loadjs.loadNpm('mpegts.js@1.8.0/dist/mpegts.js', 'mpegts');
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
._fc-video-box {
|
|
width: 100%;
|
|
}
|
|
</style> |