55 lines
1.0 KiB
Vue
55 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<video
|
||
|
|
ref="video"
|
||
|
|
:autoplay="propValue.basic.autoplay"
|
||
|
|
:muted="propValue.basic.muted"
|
||
|
|
:controls="propValue.basic.controls"
|
||
|
|
></video>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import flvjs from 'flv.js'
|
||
|
|
import { useProp } from 'open-data-v/base'
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
|
||
|
|
import type FlvVideoComponent from './config'
|
||
|
|
import type { FlvVideo } from './type'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
component: FlvVideoComponent
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const { propValue } = useProp<FlvVideo>(props.component, () => propChange())
|
||
|
|
|
||
|
|
const video = ref<HTMLVideoElement | null>(null)
|
||
|
|
|
||
|
|
const playVideo = () => {
|
||
|
|
if (flvjs.isSupported()) {
|
||
|
|
const flvPlayer = flvjs.createPlayer({
|
||
|
|
type: propValue.basic.videoType,
|
||
|
|
url: propValue.basic.url
|
||
|
|
})
|
||
|
|
flvPlayer.attachMediaElement(video.value!)
|
||
|
|
flvPlayer.load()
|
||
|
|
flvPlayer.play()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
playVideo()
|
||
|
|
})
|
||
|
|
|
||
|
|
const propChange = () => {
|
||
|
|
playVideo()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
video {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|