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;对比新电池性能。使用的等效电路模型以及用于校准…

数据结构编程实践20讲(Python版)—17散列

本文目录 17 散列(Hashing)S1 说明特点应用领域S2 示例:字符串哈希S2 示例:文件、图片哈希S3 应用1:食品安全追溯S4 应用2:在线内容版权保护S5 应用3:社交媒体内容审核往期链接 01 数组02 链表03 栈04 队列05 二叉树06 二叉搜索树07 AVL树08 红黑树09 B树10 B+树11 线段…

速盾:cdn高防服务器防火墙的特性是什么?

CDN高防服务器防火墙是一种专门为互联网应用提供安全防护的网络安全设备。它采用先进的技术和算法&#xff0c;通过对网络流量进行过滤和检测&#xff0c;以防止恶意攻击和非法访问&#xff0c;保障网络服务的可用性和安全性。CDN高防服务器防火墙的特性主要包括以下几个方面&a…

群晖前面加了雷池社区版,安装失败,然后无法识别出用户真实访问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;…

HTML 之 <div> 和 <span>

div 和 span 是 HTML 中两种非常常见的元素&#xff0c;但它们在页面布局和结构中的行为有所不同。它们分别是块级元素和行内元素&#xff0c;每种类型有各自的特点和用途。 1. div标签 块级元素 (Block-level element)默认样式&#xff1a;display: block特点&#xff1a; 它…

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

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

【力扣热题100】3194. 最小元素和最大元素的最小平均值【Java】

题目&#xff1a;3194.最小元素和最大元素的最小平均值 你有一个初始为空的浮点数数组 averages。另给你一个包含 n 个整数的数组 nums&#xff0c;其中 n 为偶数。 你需要重复以下步骤 n / 2 次&#xff1a; 从 nums 中移除 最小 的元素 minElement 和 最大 的元素 maxElement…

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) {//首先处理特殊情…

sql的使用

MySQL、PostgreSQL关系型和MongoDB 和 Redis非关系型数据库 一、前期准备 在安装和使用数据库之前&#xff0c;确保你的 CentOS 7 系统具备以下条件&#xff1a; 系统安装了基本的开发工具&#xff1a;如 gcc、make 等。有权限使用 sudo 命令。有良好的网络环境以下载软件包…

Vue 3 和 Vue 2区别

Vue 3 是 Vue 2 的全新升级版本&#xff0c;引入了诸多新的特性&#xff0c;并在性能、开发体验、响应式系统等多个方面进行了改进。以下是 Vue 2 和 Vue 3 的详细对比&#xff1a; 1. 生命周期钩子差异 Vue 3 保留了大部分 Vue 2 的生命周期钩子&#xff0c;但部分名称有所调…

力扣 3.无重复字符的最长子串——Java

题目要求&#xff1a; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: 输入: s "bbbbb&quo…

洛谷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;所有节点…