如何使用DPlayer播放m3u8视频

1.引入cdn

<script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
<script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>

2.组件内使用

<template>
  <div id="videoPlay_box">
    <div id="video-wrap-player"></div>
  </div>
</template>

<script>
export default {
  name: 'videoboPlayer',
  data() {
    return {
        dpPlayer :null,
    }
  },

  mounted() {
    this.initDPlayer('https://kjdjfs.m3u8')
  },
  beforeDestroy() {
    this.dpPlayer && this.dpPlayer.pause() && this.dpPlayer.destroy()
  },
  methods: {

    initDPlayer(playUrl) {
      let _self = this
      _self.dpPlayer = new DPlayer({
        container: document.getElementById('video-wrap-player'),
        autoplay: false,
        theme: '#FADFA3',
        logo: 'https://dfdfd/logo.png', // 水印logo
        mutex: true,
        video: {
          url: playUrl,
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })

      _self.dpPlayer.on('loadeddata', () => {
         console.log('加载完成')
      })
      _self.dpPlayer.on('play', () => {
        console.log('开始播放')
      })
      // 监听播放进度更新evt
      _self.dpPlayer.on('timeupdate', () => {
        _self.currentTime = _self.dpPlayer.video.currentTime.toFixed(2)
      })
      _self.dpPlayer.on('pause', () => {
        console.log('暂停播放')
        
      })
      _self.dpPlayer.on('ended', () => {
        
        // 结束播放时

      })
    },

    
  }
}
</script>