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的domlang: '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格式视频嵌入及自动播放功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/598704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一个不容忽视的警告WARNING:pip install --upgrade pip

2024年第一篇文章记录下一个很重要的知识点&#xff1a;pip提示升级时&#xff0c;尽量升级。 pip升级的好处&#xff1a; 1、安装速度加快&#xff0c;寻找依赖包的速度更快。 2、解决部分包安装失败&#xff0c;安装不上&#xff0c;不兼容的问题。 所以&#xff0c;如果…

【OpenCV】在MacOS上使用OpenCvSharp

前言 OpenCV是一个基于Apache2.0许可&#xff08;开源&#xff09;发行的跨平台计算机视觉和机器学习软件库&#xff0c;它具有C&#xff0c;Python&#xff0c;Java和MATLAB接口&#xff0c;并支持Windows&#xff0c;Linux&#xff0c;Android和Mac OS。OpenCvSharp是一个Op…

Windows异常-解决118及WiFi图标消失问题

注册表修复&#xff1a; 注册表修复 Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\EventLog] "ServiceDll"hex(2):25,00,53,00,79,00,73,00,74,00,65,00,6d,00,52,00,6f,00,6f,\ 00,74,00,25,00,5c,00,53,00,79,00,…

ubuntu 22 virt-manger(kvm)安装winxp

安装 、启动 virt-manager sudo apt install virt-manager sudo systemctl start libvirtdsudo virt-manager安装windowsXP 安装过程截图如下 要点1 启用 “包括寿终正寝的操作系统” win_xp.iso 安装过程 &#xff1a; 从winXp.iso启动, 执行完自己重启从硬盘重启&#xff0c…

C 练习实例13 - 水仙花数

题目&#xff1a;打印出所有的"水仙花数"&#xff0c;所谓"水仙花数"是指一个三位数&#xff0c;其各位数字立方和等于该数 本身。例如&#xff1a;153是一个"水仙花数"&#xff0c;因为1531的三次方&#xff0b;5的三次方&#xff0b;3的三次方…

太牛了!微信批量自动加好友你还不知道吗?

你还在一个一个地输入号码或微信号&#xff0c;再手动进行搜索添加好友吗&#xff1f;这样不仅费时费力&#xff0c;还可能会出现错误或是漏加的情况。 今天给大家分享一个支持多个微信号自动批量添加好友的宝藏工具&#xff0c;解放你的双手&#xff0c;帮你节省大量的时间和…

【React系列】非父子组件通信—Context.Provider共享数据、events库事件总线通信

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. Context使用 1.1. Context应用场景 非父子组件数据的共享&#xff1a; 在开发中&#xff0c;比较常见的数据传…

【SpringCloud】设计原则之数据一致性与设计模式

一、设计原则之数据一致性 数据一致性分以下几种情况。 强一致性 当更新操作完成之后&#xff0c;任何多个后续进程或线程的访问都会返回最新的更新过的值。这种是对用户最友好的&#xff0c;就是用户上一次写什么&#xff0c;下一次就保证能读到什么。根据 CAP 理论&#…

RBAC基于角色的访问控制

一 什么是RBAC 概念 RBAC 是基于角色的访问控制&#xff08;Role-Based Access Control &#xff09;在 RBAC 中&#xff0c;权限与角色相关联&#xff0c;用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。这样管理都是层级相互依赖的&#…

Python 设置文件资源锁定

功能背景 使用线程操作或者多个程序同时对同一个excel文件进行读写操作&#xff0c;不可避免的会操作冲突的问题&#xff0c;有没有一种方法就是可以不冲突&#xff0c;而是等待上一个程序使用完成后再对文件进行操作&#xff0c;就是等待一个完成再接着下一个&#xff1f; 实现…

SD杂症:TemporalKit的key关键帧无图片问题

本地安装好temporalkit后&#xff0c;进行Ebsynth预处理后&#xff0c;居然发现key文件夹里&#xff0c;没有一张图片 搜遍百度&#xff0c;搜到了原因&#xff0c;也搜到了解决方案 但是。。。。这个解决方案我觉得很不cool&#xff0c;像个打补丁的老师傅&#xff0c;缝缝补补…

深度掌握GitHub Copilot:提高编码效率的终极指南

引言&#xff1a; GitHub Copilot&#xff0c;作为一款由OpenAI和GitHub合作打造的智能代码助手&#xff0c;正在迅速改变开发者的编码体验。本文将深入研究GitHub Copilot&#xff0c;从安装和基础用法到高级应用和实用技巧&#xff0c;助您充分发挥这一工具在提高编码效率和…

Linux第16步_安装NFS服务

NFS&#xff08;Network File System&#xff09;是一种在网络上实现的分布式文件系统&#xff0c;它允许不同的操作系统和设备之间共享文件和资源。 在创建的linux目录下&#xff0c;再创建一个“nfs“文件夹&#xff0c;用来供nfs服务器使用&#xff0c;便于”我们的开发板“…

GeoServe本地部署结合内网穿透实现远程访问Web管理界面

文章目录 前言1.安装GeoServer2. windows 安装 cpolar3. 创建公网访问地址4. 公网访问Geo Servcer服务5. 固定公网HTTP地址 前言 GeoServer是OGC Web服务器规范的J2EE实现&#xff0c;利用GeoServer可以方便地发布地图数据&#xff0c;允许用户对要素数据进行更新、删除、插入…

springboot中使用mongodb进行简单的查询

文章目录 引言依赖配置文件代码编写1、实体类2、使用repository查询3、使用MongoTemplate查询 引言 应用程序中&#xff0c;通常会使用两种数据库&#xff0c;一种是关系型数据库如mysql等&#xff0c;另一种则是非关系型数据库例如mongodb&#xff0c;今天我们就来讲一讲如何…

PPT插件-大珩助手-文字整理功能介绍

删空白行 删除文本中的所有空白行 清理编号 删除文本中的段落编号 清理格式 删除文本中的换行、空格符号 清理艺术 删除文本的艺术字效果 清理边距 删除文本框与文字之间的间隙 软件介绍 PPT大珩助手是一款全新设计的Office PPT插件&#xff0c;它是一款功能强大且实…

【Python案例实战】水质安全分析及建模预测

一、引言 1.水资源的重要性 水是生命之源,是人类生存和发展的基础。它是生态系统中不可或缺的组成部分,对于维系地球上的生命、农业、工业、城市发展等方面都具有至关重要的作用。 2.水质安全与人类健康的关系 水质安全直接关系到人类的健康和生存。水中的污染物和有害物…

苹果Mac电脑PDF优化压缩推荐 Recompress中文 for Mac

Recompress采用了先进的压缩技术&#xff0c;能够智能地分析PDF文件并确定哪些内容可以进一步压缩以节省存储空间。中文界面&#xff1a;Recompress Mac版提供了符合国人浏览习惯的中文界面&#xff0c;使得用户在使用时更加方便。批量压缩&#xff1a;Recompress支持批量压缩P…

Linux三剑客 grep、sed和awk浅析

grep、sed和awk是文本处理中最强大的三个命令行工具。它们在Linux中广泛用于文本搜索、替换、格式化和报告&#xff0c;下面我将详细介绍相关语法和使用案例。 grep (Global Regular Expression Print) grep是一个模式搜索工具&#xff0c;它使用正则表达式来搜索文本&#x…

海外直邮革命:跨境电商的全球化销售策略

在数字化时代&#xff0c;跨境电商正经历着一场革命&#xff0c;而海外直邮成为这场变革的引领者。全球范围内&#xff0c;越来越多的企业通过直邮方式销售商品&#xff0c;打破了地域限制&#xff0c;实现了商品的全球化流通。本文将深入探讨海外直邮的崛起&#xff0c;以及跨…