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

监控视频流为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格式视频嵌入及自动播放功能。

相关推荐
aha-凯心2 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没19 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN19 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠25 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户990450177800933 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家36 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
Antonio9151 小时前
【音视频】HTTP协议介绍
音视频
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript