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

原创已于 2024-01-05 15:00:27 修改 · 2.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #react.js #javascript #前端 #react

于 2024-01-05 14:59:39 首次发布

本文介绍了如何在网页中嵌入HLS格式的监控视频流，并利用DPlayer和hls.js插件实现页面加载或刷新时自动播放。通过npm安装插件，配合jQuery事件处理，提供自动播放功能的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监控视频流为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);
}

嵌入视频流结构体

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

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