视频流播放的几种方式

1.video元素

使用video元素可直接播m3u8视频流

<video  :id="`my-video${index}`" :ref="`my-video${index}`" autoplay
                class="video-js vjs-default-skin videos" muted>
                <source :ref="`my-source${index}`" src="" type="application/x-mpegURL" />
              </video>

 data中设置player:[ ]

 getVideojs(index, src) {
      this.$nextTick(() => {
        this.$refs[`my-source${index}`][0].src = src;
        this.player[index] = videojs(
          `my-video${index}`,
          {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
            controls: true,
            hls: {
              withCredentials: true,
            },
            controlBar: {
              fullscreenToggle: true, //显示全屏按钮，默认为true
              pictureInPictureToggle: false, //隐藏画中画按钮，默认为true
              volumePanel: true, //隐藏声音面板
              //currentTimeDisplay: true,//显示当前播放时间
              //timeDivider: true,//显示时间分割线
              //durationDisplay: true,//显示总时间
              //remainingTimeDisplay: false,//隐藏剩余时间，
            },
          },
          function () {
            this.play();
          }
        );
      })
    },

2.阿里云 Aliplayer播放器

需要引入js文件（vue中引入文件可写在出口文件中   public / index.html）

<script src="https://vcp.21cn.com/metaplayer/static/template/latest/lib/mpIframe-min.js"></script>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.11.0/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.11.0/aliplayer-min.js"></script>

Aliplayer只需要有一个div标签，有唯一标识的id即可

 <div v-else class="prism-player" style="height:160px;" :id="`my-video${index}`"></div>

 getVideo(index, src) {
      this.$nextTick(() => {
        this.player[index] = new Aliplayer({
          "id": `my-video${index}`,
          "source": src,
          "width": "100%",
          "height": "160px",
          "autoplay": true,
          "isLive": true,
          "rePlay": false,
          "playsinline": true,
          "preload": true,
          "controlBarVisibility": "hover",
          "useH5Prism": true
        }, (player) => {
          this.$forceUpdate()  //强制组件更新，可省略
        }
        );
      })

    },

3.嵌入 iframe 来显示视频流

这种展示视频流方式可能会有层级问题，可以通过条件判断展示或隐藏视频流【showIframe】

<iframe  :style="showIframe ? 'display:block' : 'display:none'" ref="players"
    id="player" :src="video_rtsp" width="100%" height="530"
    allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen scrolling="no"
    allow="autoplay" marginwidth="0" marginheight="0"></iframe>

• allowfullscreen: 标准属性，允许全屏。
• webkitallowfullscreen: 用于 WebKit 浏览器（如 Safari）。
• mozallowfullscreen: 用于 Mozilla Firefox。
• oallowfullscreen: 用于 Opera 浏览器。
• msallowfullscreen: 用于 Microsoft 浏览器（如 Internet Explorer 和 Edge）。

• scrolling="no" 禁止 <iframe> 内部滚动。

• allow="autoplay" 允许 <iframe> 自动播放媒体内容。

• marginwidth="0" marginheight="0" 设置 <iframe> 的内边距宽度和高度为 0，这些属性已经在 HTML5 中被弃用，但有时仍然使用以确保旧版浏览器的兼容性