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

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

  1. 导入依赖
yarn add dplayer hls.js
  1. 在头部引入依赖
import DPlayer from 'dplayer'
const Hls = require('hls.js')
  1. 新建一个div
<div id="video"></div>
  1. 初始化播放器
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() {
	// 监听函数
})
}
上一篇:AngularJs ng-repeat重复项异常解决方案


下一篇:PHP-如何解析m3u8并获取不同的bitttrate子m3u8网址?