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

StupigYy2024-01-06 13:33

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

javascript 复制代码

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);
}

嵌入视频流结构体

javascript 复制代码

<div 
    id={'monitor1'}
    className={styles.monitor}
    onClick={this.checkMonitor}
    onDoubleClick={this.checkMonitor}
/>

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