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

news/2024/7/15 20:12:04 标签: 音视频, react.js, javascript, 前端, react

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


http://www.niftyadmin.cn/n/5306279.html

相关文章

全志R128 SDK架构与目录结构

R128 S2 是全志提供的一款 M33(ARM)C906(RISCV-64)HIFI5(Xtensa) 三核异构 SoC&#xff0c;同时芯片内部 SIP 有 1M SRAM、8M LSPSRAM、8M HSPSRAM 以及 16M NORFLASH。本文档作为 R128 FreeRTOS SDK 开发指南&#xff0c;旨在帮助软件开发工程师、技术支持工程师快速上手&…

【PHP】TP5 使用模型一对一关联查询,条件筛选及字段过滤

目录 方法一&#xff1a;使用Eloquent ORM的with关联查询 方法二&#xff1a;使用JOIN进行查询 方法一&#xff1a;使用Eloquent ORM的with关联查询 在 ThinkPHP5 中&#xff0c;可以使用模型关联和条件查询来实现一对一关联查询。以下是一个示例&#xff1a; 假设有两个表&a…

吉林大学19、21级计算机学院《计算机网络》期末真题试题

一、21级&#xff08;考后回忆&#xff09; 一、不定项选择&#xff08;一共10个选择题&#xff0c;一个两分&#xff0c;选全得满分&#xff09; 不定项&#xff1a;可以选择1~4个 考点有&#xff1a; ①协议、服务 ②码分多路复用通过接受码片序列&#xff0c;求哪个站点发送…

架构(1)

目录 1.如何理解架构的演进&#xff1f; 2.如何理解架构的服务化趋势&#xff1f; 3.架构中有哪些技术点&#xff1f; 4.谈谈架构中的缓存应用&#xff1f; 5.在开发中缓存具体如何实现&#xff1f; 1.如何理解架构的演进&#xff1f; 初始阶段的网站架构应用服务和数据服…

记一次 .NET 某新能源材料检测系统 崩溃分析

一&#xff1a;背景 1. 讲故事 上周有位朋友找到我&#xff0c;说他的程序经常会偶发性崩溃&#xff0c;一直没找到原因&#xff0c;自己也抓了dump 也没分析出个所以然&#xff0c;让我帮忙看下怎么回事&#xff0c;那既然有 dump&#xff0c;那就开始分析呗。 二&#xff…

记一次 .NET 某零售管理系统 存储不足分析

一&#xff1a;背景 1. 讲故事 前几天有位朋友找到我&#xff0c;说他的程序会偶发性的报 存储空间不足&#xff0c;无法处理此命令 的错误&#xff0c;让我帮忙看下到底怎么回事&#xff0c;哈哈&#xff0c;人家是有备而来&#xff0c;dump都准备好了&#xff0c;话不多说&…

微信小程序:flex布局实现换行

1、关键代码.wxml&#xff1a; <view class"pay margin-top-40"><view class"info"><view class"pay-info-title margin-left-22 flex-start"> 请选择充值金额</view><view class"flex-wrap margin-top-20&quo…

VM与欧姆龙PLC通讯设置

1、欧姆龙PLC 进行网口通讯&#xff0c;协议用的Fins tcp&#xff0c;也可以用Fins UDP。 2、主要步骤如下&#xff1b; step1&#xff1a;设置IP地址、端口号默认是9600&#xff0c;根据需要设置寄存器首地址和寄存器数量 step2&#xff1a;鼠标移动到某个地址下&#xff0c…