This video control is a control in the npm library. The source address of this control is: https://www.npmjs.com/package... . Because this control is relatively simple to use and there are not too many complex buttons, it can only play the camera picture in real time, which is suitable for the project requirements, so this control is selected as the video playing control.

Overall idea: now the code of this control is encapsulated as a component, which is convenient for global real-time call. This control can be called multiple times through different id names, so different id names and video URLs are defined in the parent component to pass parameters into the component. [modified relative to the original code]

Code malpractice: the initial code needs to provide the corresponding video url before loading. In the later stage, it cannot be called again by modifying the url. In order to get the corresponding url through the background request, I used the way of storing the value in the xuex data pool, first loading the request to get the corresponding url, and then calling the component. (it can be referenced by component calling, and the url is passed in when calling the build)

Component code:

First, install the components in the console: npm i hls.js

<template>
  <video :id=videoValue></video> // The id name is the value of the videoValue from the parent component
</template>
<script>
  import Hls from 'hls.js'; // Reference Hls component
  export default {
    data () {
      return {
        value: this.videoValue,
        addre: this.add,
        // cameraUrl is the video url array obtained in the background of the request
        cameraUrl: this.$store.getters.getCameraGet.cameraGets 
      }
    },
    props: ['videoValue', 'add'], // id name and subscript value from parent component
    mounted() {
      this.videoData();
    },
    methods: {
      videoData() {
        if (this.addre === 0) { // Determine the subscript value from the parent component to find the corresponding video url from the background.
          var address = this.cameraUrl[0];
        } else if (this.addre === 1) {
          address = this.cameraUrl[1]
        }
        let video = document.getElementById(this.videoValue); // Find the id tag passed from the parent component
        if (Hls.isSupported()) { // If the Hls plug-in supports
          let hls = new Hls();
          hls.loadSource(address); // Pass url to local data source
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play(); // Play video
          });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = address; // When it is not supported, the url is passed into the video link.
          video.addEventListener('canplay', function() {
            video.play();
          });
        }
      }
    }
  }
</script>

The code in the parent component is:

import video from '../components/video.vue'; // Reference component
export default {
   data () {
      return {
        videoValue0: 'video0', // Define component id
        url0: 1, // Define subscript value
        videoValue1: 'video1',
        url1: 0
      }
   },
   components: {
      'videotp': video // Define a label for the component
    }
}

By label reference:

< VideoTP: videovalue = "videovalue3": add = "url3" >

usage method:

Through the above code to define the sub components, add the corresponding code in the parent component and then you can use it directly. The above component code is the use method. Since the code is still improving, if there is a better optimization scheme in the later stage, it will be updated.