react+video:限制快进、倍速、画中画

实现代码:

<video ref={videoRef} src={videoUrl} className={style.video} controls onRateChange={rateChange} onPlay={playVideo} onPause={pauseVideo} onTimeUpdate={timeUpdate} disablePictureInPicture playsInline poster={poster} controlsList="nodownload noremoteplayback noplaybackrate">您的浏览器不支持 video 标签。
</video>

js

    const [videoUrl, setVideoUrl] = useState('http://10.*.*.*:4010/file/attachments/20230411150035.mp4');const videoRef = useRef(null);const lastTime = useRef(0);const [isPlaying, setIsPlaying] = useState(false);useEffect(() => {const videoElement = videoRef.current;//限制画中画播放const handleEnterPictureInPicture = async () => {Toast.show('当前视频不支持画中画播放');if (document.pictureInPictureElement) {try {await document.exitPictureInPicture();} catch (error) {console.error('Error exiting Picture-in-Picture', error);}}};// 监听事件videoElement.addEventListener('enterpictureinpicture', handleEnterPictureInPicture);return () => {videoElement.removeEventListener('enterpictureinpicture', handleEnterPictureInPicture);};}, []);//限制倍速const rateChange = () => {if (videoRef.current.playbackRate !== 1.0) {Toast.show('当前视频不支持倍速播放');videoRef.current.playbackRate = 1.0;}};const playVideo = () => {if (!isPlaying) {videoRef.current.play();setIsPlaying(true);}};const pauseVideo = () => {if (isPlaying) {videoRef.current.pause();setIsPlaying(false);}};//点击实现播放/暂停const handlePlayPause = () => {if (isPlaying) {pauseVideo();} else {playVideo();}};//限制快进const timeUpdate = () => {const currentTime = videoRef.current.currentTime;console.log(currentTime);if (currentTime > lastTime.current + 1) {Toast.show('当前视频不支持快进');videoRef.current.currentTime = lastTime.current;return;} else {lastTime.current = currentTime;}};

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

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

相关文章

卸载Python

1、查看安装框架位置并删除 Sudo rm -rf /Library/Developer/CommandLineTools/Library/Frameworks/Python3.framework/Versions/3.8 2、查看应用并删除 在 /Applications/Python 3.x 看是否存在&#xff0c;如果存在并删除。 3、删除软连接 ls -l /usr/bin/py* 或 ls -…

MATLAB电车(宝马 i3)卸载电池再利用电气模型分析

&#x1f3af;要点 特性测试评估卸载电池性能以及不同温度下电池容量和电阻。使用两种电气模型评估和模拟卸载电池可利用性能。从宝马 i3模块中提取三星三元锂方形电池作为评估电池&#xff1a;容量测量、电阻测量&#xff0c;对比新电池性能。使用的等效电路模型以及用于校准…

群晖前面加了雷池社区版,安装失败,然后无法识别出用户真实访问IP

有nas的相信对公网都不模式&#xff0c;在现在基础上传带宽能有100兆的时代&#xff0c;有公网代表着家里有一个小服务器&#xff0c;像百度网盘&#xff0c;优酷这种在线服务都能部署为私有化服务。但现在运营商几乎不可能提供公网ip&#xff0c;要么自己买个云服务器做内网穿…

MacOS RocketMQ安装

MacOS RocketMQ安装 文章目录 MacOS RocketMQ安装一、下载二、安装修改JVM参数启动关闭测试关闭测试测试收发消息运行自带的生产者测试类运行自带的消费者测试类参考博客&#xff1a;https://blog.csdn.net/zhiyikeji/article/details/140911649 一、下载 打开官网&#xff0c;…

ListView的Items绑定和comboBox和CheckBox组合使用实现复选框的功能

为 ListView 控件的内容指定视图模式的方法&#xff0c;参考官方文档。 ComboBox 样式和模板 案例说明&#xff1a;通过checkBox和ComboBox的组合方式实现下拉窗口的多选方式&#xff0c;同时说明了ListView中Items项目的两种绑定方式. 示例&#xff1a; 设计样式 Xaml代码…

C++初阶学习第七弹——string的模拟实现

C初阶学习第六弹------标准库中的string类_c语言返回string-CSDN博客 通过上篇我们已经学习到了string类的基本使用&#xff0c;这里我们就试着模拟实现一些&#xff0c;我们主要实现一些常用到的函数。 目录 一、string类的构造 二、string类的拷贝构造 三、string类的析构函…

第五课:Python学习之if语句

判断&#xff08;if&#xff09;语句 目标 开发中的应用场景if 语句体验if 语句进阶综合应用 01. 开发中的应用场景 生活中的判断几乎是无所不在的&#xff0c;我们每天都在做各种各样的选择&#xff0c;如果这样&#xff1f;如果那样&#xff1f;…… 程序中的判断 # 定义…

web前端面试中拍摄的真实vue面试题

发一波web前端面试题&#xff0c;真实拍摄。最最最最最简单的vue面试题了。 image image image 如果以上都不会&#xff0c;那么vue面试基本都是凉了&#xff0c;想彻底学习一下&#xff0c;我这里在之前录制过一套vue面试题的视频教程。 视频地址&#xff1a;https://www.3moo…

小猿口算炸鱼脚本

目录 写在前面&#xff1a; 一、关于小猿口算&#xff1a; 二、代码逻辑 1.数字识别 2.答题部分 三、代码分享&#xff1a; 补充&#xff1a;软件包下载 写在前面&#xff1a; 最近小猿口算已经被不少大学生攻占&#xff0c;小学生直呼有挂。原本是以为大学生都打着本…

智慧链动青春:国家区块链中心接待北京市十一学校青少年访学探索

以生动科学的方法点燃青少年科学探索欲望是构建未来科技人才梯队的基石。近期国家区块链技术创新中心接待北京市十一学校新生访学&#xff0c;以科普讲座、实操互动的方式让学生在深度思考中感受科学魅力、接触前沿科技&#xff0c;激发学生对区块链、隐私计算和芯片设计制造的…

MES制造执行系统原型图动端 Axure原型 交互设计 Axure实战项目

MES制造执行系统原型移动端 Manufacturing Execution System prototype MES制造执行系统原型图移动端是专门为制造执行系统设计的移动端是一个可视化的设计。用于展示和演示该系统在移动设备上的功能和界面。通过原型图&#xff0c;可以清晰地了解制造执行系统在移动端的各个…

Leetcode 跳跃游戏 二

核心任务是找出从数组的起点跳到终点所需的最小跳跃次数。 这段代码解决的是“跳跃游戏 II”&#xff08;Leetcode第45题&#xff09;&#xff0c;其核心任务是找出从数组的起点跳到终点所需的最小跳跃次数。 class Solution {public int jump(int[] nums) {//首先处理特殊情…

洛谷P3478 [POI2008] STA-Station(换根dp)

题目链接 https://www.luogu.com.cn/problem/P3478 思路 对于 n 1 e 6 n1e6 n1e6&#xff0c;我们考虑换根dp。 定义 f [ u ] f[u] f[u]表示以 u u u为根的子树中&#xff0c;所有节点的深度之和。定义 d p [ u ] dp[u] dp[u]表示整棵树以 u u u为根时&#xff0c;所有节点…

制药企业MES与TMS的数据库改造如何兼顾安全与效率双提升

*本图由AI生成 在全球制造业加速数字化转型的浪潮中&#xff0c;一家来自中国的、年营业额超过200亿元的制药企业以其前瞻性的视角和果断的行动&#xff0c;成为该行业里进行国产化改造的先锋。通过实施数据库改造试点项目&#xff0c;该企业实现了其关键业务系统MES&#xff0…

python的多线程和多进程

首先需要明确的是&#xff0c;多进程和其他语言的一样&#xff0c;能够利用多核cpu&#xff0c;但是python由于GIL的存在&#xff0c;多线程在执行的时候&#xff0c;实际上&#xff0c;每一时刻只有一个线程在执行。相当于是单线程。然而多线程在某些情况下&#xff0c;还是能…

使用 python 下载 bilibili 视频

本文想要达成的目标为&#xff1a;运行 python 代码之后&#xff0c;在终端输入视频链接&#xff0c;可自动下载高清 1080P 视频并保存到相应文件夹。 具体可分为两大步&#xff1a;首先&#xff0c;使用浏览器开发者工具 F12 获取请求链接相关信息&#xff08;根据 api 接口下…

Leetcode 1514. 概率最大的路径

1.题目基本信息 1.1.题目描述 给你一个由 n 个节点&#xff08;下标从 0 开始&#xff09;组成的无向加权图&#xff0c;该图由一个描述边的列表组成&#xff0c;其中 edges[i] [a, b] 表示连接节点 a 和 b 的一条无向边&#xff0c;且该边遍历成功的概率为 succProb[i] 。 …

【3dgs】Gaussian-SLAM发展关键历程梳理

【3dgs】Gaussian-SLAM 0. 写在前面1. 3D Splatting与SLAM流程2. Splatting SLAM&#xff1a;单目/RGB-D(2024年新作&#xff09;2.1 相机跟踪精度2.2 新视图渲染性能2.3 消融实验 3. Gaussian-SLAM&#xff08;Photo-SLAM&#xff09; Photo-SLAM技术原理详解 ORBSLAM3dGS&am…

OKG Research:如何衡量链上数据的开放价值?

在新加坡Token2049期间&#xff0c;欧科云链研究院受邀参加Bloomberg主办的企业另类资产投资峰会2024&#xff0c;与多位专家围绕未来数据形态与前景进行了深入交流。 活动后&#xff0c;欧科云链研究院负责人Lola Wang与资深研究员Jason Jiang在大公网发表署名文章《如何衡量…

faust,一个神奇的 Python 库!

大家好&#xff0c;今天为大家分享一个神奇的 Python 库 - faust。 Github地址&#xff1a;https://github.com/robinhood/faust 在分布式系统和实时数据处理的世界里&#xff0c;消息流处理&#xff08;Stream Processing&#xff09;变得越来越重要。Faust 是一个 Python 库…