vue播放m3u8视频流

• npm 下载

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

• 在mina.js中

     window.Hls = require('hls.js')

• 在用到需要视频播放的页面

    <!-- 引入插件 -->
    import DPlayer from 'dplayer';
    <!-- 设置容器 -->
    <div id="dplayer" style="width:100%;height:100%"></div>
    

    data(){
        rerutn{
             dplayer:null
        }
    }
    mounted() {
      this.dplayer = new DPlayer({
            container: document.getElementById('dplayer'),
            live: true, //是否直播
            autoplay: true, //是否自动播放
            lang: "zh-cn", //设置中文
            video: {
              url:"http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
              type: "hls", //这一步必须要写，播放直播流
            }
          });
    }
    

测试流

1. CCTV1：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
2. 不知名：https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8

测试视频流是否可用 去看看