当前位置：首页 > news >正文

vue video播放m3u8监控视频

news 2025/5/18 18:15:23

很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错

直接添加如下代码即可

  html5: {vhs: {overrideNative: true},nativeVideoTracks: false,nativeAudioTracks: false,nativeTextTracks: false}

下面是完整组件示例

<template><div><videostyle="border-radius: 8px; margin: 0 auto; overflow: hidden"id="my-video"class="video-js vjs-default-skin"controlsautoplaymutedpreload="auto"width="300"ref="videoPlayer"></video></div>
</template><script setup>import { ref, onMounted, onBeforeUnmount, watch } from 'vue';import videojs from 'video.js';import 'video.js/dist/video-js.css';const props = defineProps({srcUrl: {type: String,required: true}});const videoPlayer = ref(null);let player = null;const getVideo = () => {console.log('11111111');player = videojs(videoPlayer.value,{bigPlayButton: true,textTrackDisplay: false,posterImage: false,errorDisplay: false,controlBar: true,html5: {vhs: {overrideNative: true},nativeVideoTracks: false,nativeAudioTracks: false,nativeTextTracks: false}},function onPlayerReady() {console.log('视频加载成功');this.src({ type: 'application/x-mpegURL', src: props.srcUrl });this.play();});};onMounted(() => {getVideo();});watch(() => props.srcUrl,(newSrcUrl) => {if (player) {player.src({ type: 'application/x-mpegURL', src: newSrcUrl });player.play();}});onBeforeUnmount(() => {if (player) {player.dispose();}});
</script><style scoped>video {border-radius: 8px;margin-bottom: 24px;}
</style>

查看全文

http://www.mrgr.cn/news/53167.html