- index.html引入css和js
<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/alt/video-js-cdn.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/alt/video.core.min.js"></script>
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"
- dom结构
<video
id="myVideo"
class="my-video-player video-js vjs-default-skin vjs-fluid vjs-big-play-centered"
width="343"
height="193"
:poster="coverImg"
controls
playsinline
webkit-playsinline
autoplay
loop
>
<source
id="mySource"
:src="hlsSrc"
:type="
hlsSrc?.includes('.mp4')
? 'video/mp4'
: 'application/x-mpegURL'
"
/>
</video>
- 初始化播放器并添加事件
// 初始化播放器
const initVedio = () => {
state.player = videojs("myVideo", {}, () => {
playerAddEvent();
});
};
4.切换视频流地址
nextTick(() => {
if (state.player.currentSrc() !== state.hlsSrc) {
state.player.src(state.hlsSrc);
}
});