vue+videojs 动态切换 flv 视频流

<script setup> import { onMounted, onUnmounted, ref, watch } from 'vue' import videojs from 'video.js' import 'videojs-flvjs-es6' import 'video.js/dist/video-js.css' let myPlayer = null const props = defineProps({ videoUrl: { default: '' } }) watch( () => props.videoUrl, url => { if (myPlayer) { myPlayer.dispose() myPlayer = null createDom() setTimeout(() => { url && init() }, 100) } else { url && init() } } ) onMounted(() => { props.videoUrl && init() }) function init() { myPlayer = videojs( document.getElementById('videoPlayer'), { autoplay: true, //自动播放，由于谷歌浏览器限制需设置静音muted: true，自动播放才会生效 controls: true, //用户可以与之交互的控件 loop: true, //视频一结束就重新开始 muted: true, //默认情况下将使所有音频静音 techOrder: ['html5', 'flvjs'], // 兼容顺序 flvjs: { mediaDataSource: { isLive: false, cors: true, withCredentials: false } }, sources: [ { // type: 'video/rtsp' // type: 'rtmp/flv' src: props.videoUrl, type: 'video/x-flv' } ] }, () => { myPlayer.log('play.....') } ) } function createDom() { const newVideoElement = document.createElement('video') newVideoElement.id = 'videoPlayer' newVideoElement.style.width = '100%' newVideoElement.style.height = '100%' newVideoElement.className = 'video-js vjs-default-skin vjs-big-play-centered' newVideoElement.preload = 'auto' const oldVideoElement = document.getElementById('videoDom') oldVideoElement.appendChild(newVideoElement) } onUnmounted(() => { if (myPlayer) { myPlayer.dispose() } }) </script> <template> <div class="videoContainer" id="videoDom"> <video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto"></video> </div> </template> <style lang="scss" scoped> .videoContainer { width: 100%; height: 100%; .video-js { width: 100%; height: 100% !important; &.vjs-fluid { padding-top: 0 !important; } } } </style>