很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错
直接添加如下代码即可
html5: {
vhs: {
overrideNative: true
},
nativeVideoTracks: false,
nativeAudioTracks: false,
nativeTextTracks: false
}
下面是完整组件示例
<template>
<div>
<video
style="border-radius: 8px; margin: 0 auto; overflow: hidden"
id="my-video"
class="video-js vjs-default-skin"
controls
autoplay
muted
preload="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>