【React】react实现前端播放m3u8格式视频

DPlayer文档：http://dplayer.js.org

1. 导入依赖

yarn add dplayer hls.js

2. 在头部引入依赖

import DPlayer from 'dplayer'
const Hls = require('hls.js')

3. 新建一个div

<div id="video"></div>

4. 初始化播放器

componentDidMount(){
video = new DPlayer({
  container: document.getElementById('video'),  // 注意：这里一定要写div的dom
  lang: 'zh-cn',
  video: {
    url: 'https://test.com/text.m3u8',  // 这里填写.m3u8视频连接
    type: 'customHls',
    customType: {
      customHls: function(video) {
        const hls = new Hls()
        hls.loadSource(video.src)
        hls.attachMedia(video)
      }
    }
  }
})
video.play() // 播放
video.on('ended', function() {
	// 监听函数
})
}

标签：React,m3u8,DPlayer,hls,js,react,video,dplayer
来源： https://blog.csdn.net/ah_biao/article/details/116997540