vue播放器播放名.m3u8视频_element ui 播放 .m3u8

<template>
  <video id="singleVideo" preload="none" class="video-js vjs-default-skin" ></video>
</template>
<script>
  import 'video.js/dist/video-js.css'
  import videojs from 'video.js';
  import 'videojs-contrib-hls'
 
  export default {
    data() {
      return {
        player: null,
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        //使用
        let singlePlayer = videojs("singleVideo", {
          autoplay: true,//自动播放
          controls: true,//控件显示
          width: "440",//视频框宽度
          height: "264",//视频框高度
        });
        let res ="http://61.175.121.73:83/pag/10.13.7.2/7302/33052182001320012936/0/MAIN/TCP/live.m3u8";
        if (res) {
          singlePlayer.src({ src: res, type: "application/x-mpegURL" });
          singlePlayer.play();
        }
      }
    },
    // 离开页面销毁视频播放器
    beforeDestroy() {
      if (this.player != null) {
        this.player.dispose() // dispose()会直接删除Dom元素
      }
    }
  }
</script>
<style scoped>
  .video{
    width: 450px;
    height: 257px;
    background: black;
    margin-left: 14px;
    margin-top: 11px;
  }
</style>