vue m3u8视频播放组件

vue m3u8视频播放组件

依赖库 dplayer

<template>
  <div class="full">
    <div class="dplayer-container" ref="player">   定义一个ID为player的div
    </div>
  </div>
</template> 
复制代码

<script>
import 'dplayer/dist/DPlayer.min.css' // 引入css样式
// 基础配置 参考官网
mounted(){
// 运行时报错hls undefinded  需要声明这个全局对象
 window.Hls = require('hls.js');
    this.DPlayer = require('dplayer')
      this.dp = new this.DPlayer({
        container: this.$refs.player,
        preload: 'none',
        autoplay: false,
       video: {
        url: 'demo.mp4',
        pic: 'demo.jpg',
        thumbnails: 'thumbnails.jpg'
    },
    subtitle: {
        url: 'webvtt.vtt'
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/'
    }
        screenshot: true, // 截图
      });
}
</script>
复制代码

组件bug 视频头图设置有时候显示不出来 可以在视频外层包裹一个div手动设置一个视频头图