vue3 播放 m3u8、RTSP视频

因为项目中会遇到播放不同视频流的情况，这里聚集了博主遇到的情况，合集整理给大家。

1.m3u8的视频流，使用vedio.js

(1).先npm i video.js

(2).引用vedio.js并创建实例，进行资源配置

具体代码如下

<template>
  <div class="monitors">
    <div class="myVedioBox">
      <video
        class="video-js vjs-default-skin"
        ref="videoPlay1"
        muted
        :autoplay="true"
        :controls="true"
        style="object-fit: fill; width: 100%; height: 100%"
      >
        <source src="" type="application/x-mpegURL" />
      </video>
    </div>
  </div>
</template>
<script setup>
import { nextTick, onMounted, reactive } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.min.css";

const data = reactive({});
const videoPlay1 = ref