- 官方文档
- npm安装
npm i vue3-video-play --save
- vue页面
<template>
<div>
<vue3VideoPlay
width="800px"
:src="options.src"
:type="options.type"
:autoPlay="false"
/>
</div>
</template>
<script>
import "vue3-video-play/dist/style.css";
import vue3VideoPlay from "vue3-video-play";
import {reactive} from "vue";
export default {
components: {
vue3VideoPlay,
},
data() {
return {
options: reactive({
src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
type: "m3u8", //视频类型
})
}
}
};
</script>
- 切换视频
当src变更后,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题,data
添加 reFresh: false
<vue3VideoPlay v-if="reFresh"
:autoPlay="true"
:src="options.src"
:type="options.type"
width="auto" />
src变更事件
handleReFresh() {
this.options.src = "http://newSrc.m3u8";
this.reFresh = false;
this.$nextTick(()=>{
this.reFresh = true;
})
}