vue dplayer播放m3u8地址视频

 dplayer官方配置：http://dplayer.js.org/zh/guide.html#hls

 

npm i hls.js -S --registry=http://registry.npm.taobao.org
npm i dplayer -S --registry=http://registry.npm.taobao.org

 

<script>
let Hls = require('hls.js');
import DPlayer from 'dplayer';

...

  methods: {
    initPlayer() {
      const dp = new DPlayer({
          live: true,
          autoplay: false,

          container: document.getElementById('dplayer'),
          video: {
            url: m3u8url, // 地址
            pic: picUrl,  // 封面
            
            type: 'customHls',
            customType: {
                customHls: function (video, player) {
                    const hls = new Hls();
                    hls.loadSource(video.src);
                    hls.attachMedia(video);
                },
            },
          },
        });
    }
  }