Vue 2 & 3 simply use Video.js

What is Video.js

Video.js is a web video player with HTML5 background. It supports both HTM5 and Flash video, in simple terms it is HTMl5 and Flash video player

view2

download dependencies

cnpm install video.js

Introduced in main.js

import Video from 'video.js'
import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

Use (there are comments in the code)

    <template>
    <div class="test_two_box">
        <video
        id="myVideo"
        class="video-js"
        >
        <source
            src="//vjs.zencdn.net/v/oceans.mp4"
            type="video/mp4"
        >
        </video>
    </div>
    </template>

    <script>
    /* eslint-disable */
    export default {
    name: "TestTwo",
    data() {
        return {};
    },
    mounted() { 
        this.initVideo();
    },
    methods: {
        initVideo() {
        //初始化视频方法
        let myPlayer = this.$video(myVideo, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "800px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "400px"
        });
        }
    }
    };
    </script>

    <style scoped>
    </style>

view 3

cnpm install video.js

<template>
  <div class="test_two_box">
    <video ref="videoPlayer" class="video-js" style="margin: auto auto"></video>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, defineProps } from "vue";
import Video from "video.js";
import "video.js/dist/video-js.css";

const videoPlayer = ref();
const myPlayer = ref(null);
const props = defineProps({
  videoUrl: String,
  videoImg: String,
});

onMounted(() => {
  onMyPlayer();
});
const onMyPlayer = () => {
  myPlayer.value = Video(
    videoPlayer.value,
    {
      poster: props.videoImg, // 封面
      controls: true,
      sources: [
        {
          src: props.videoUrl, // 视频
          type: "video/mp4",
        },
      ],
      controlBar: {
        remainingTimeDisplay: {
          displayNegative: false,
        },
      },
      playbackRates: [0.5, 1, 1.5, 2],
    },
    () => {
      myPlayer.value.log("play.....");
    }
  );
};
const unMyPlayer = () => {
  if (myPlayer.value) {
    myPlayer.value.dispose();
  }
};
onUnmounted(() => {
  unMyPlayer();
});
</script>

Remember to add a v-if to the parent component 

<div v-if="open">
  <VideoDisplay :videoUrl="videoUrl" :videoImg="videoImg" />
</div>