dplayer播放hls格式视频并自动开始播放

监控视频流为hls格式,需要打开或刷新页面自动开始播放,需要安装dplayer和hls.js插件,插件直接npm装就行,上代码

import DPlayer from 'dplayer'
import Hls from 'hls.js'
//jquery是用来注册点击事件,实现自动开始播放
import $ from 'jquery'

new DPlayer({
    container: document.getElementById('monitor1'),  // 注意:这里一定要写div的dom
    lang: 'zh-cn',
    video: {
    url: url?url:'',  // 这里填写.m3u8视频连接,此处判断不可少,如果链接为空需要赋值为空
    type: 'customHls',
    customType: {
        customHls: function(video) {
            const hls = new Hls()
            hls.loadSource(video.src)
            hls.attachMedia(video)
          }
        }
    },
    autoplay:true,
    mutex:false,
    live:true
})
//模拟单击或是双击播放视频,即自动开始播放,无需专门点击后才播放
$('monitor1').on('click',this.checkMonitor)
$('monitor1').on('doubleClick',this.checkMonitor)

//必要函数
checkMonitor = e =>{
    console.log(e);
}

嵌入视频流结构体

用于解决hls格式视频嵌入及自动播放功能。

你可能感兴趣的:(音视频,react.js,javascript,前端,react)