1.我们先看一下效果图（目前没有推流所以视频是播放无效的）

2.播放直播m3u8需要的插件 dplayer hls.js

npm install hls.js --save
npm install dplayer --save

3.安装完成在文件中使用

<!-- 视频直播 -->
<template
   <div class="video-dplayer">
     <div id="dplayer"></div>
   </div>
</template>

<script>

export default {
  mounted(){
    this.initPlayer();
  },
  methods:{
    initPlayer() {
      let Hls = require('hls.js');
      let DPlayer = require('dplayer');
      
      const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        live:true,

        video: {
          url: 'http:xxxxxx.m3u8, // 地址
          // pic: picUrl,  // 封面
          
          type: 'customHls',
          customType: {
              customHls: function (video, player) {
                  const hls = new Hls();
                  hls.loadSource(video.src);
                  hls.attachMedia(video);
              },
          },
        }
      });

      document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
      document.oncontextmenu = () => false; // 阻止页面所有右键事件
    }
  }
}
</script>

<style lang="scss" scoped>
  .video-dplayer{
    width: 60%;
    display: inline-block;
  }
  
</style>