videojs播放直播

1. 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"

2. 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>

3. 初始化播放器并添加事件

// 初始化播放器
const initVedio = () => {
  state.player = videojs("myVideo", {}, () => {
    playerAddEvent();
  });
};

4.切换视频流地址

nextTick(() => {
  if (state.player.currentSrc() !== state.hlsSrc) {
      state.player.src(state.hlsSrc);
    }
});