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

server/2024/10/21 23:54:10/

实现代码:

<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

javascript">    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.ppmy.cn/server/133748.html

相关文章

在 Flutter鸿蒙next版本 中使用 if 语句和三元表达式进行视图逻辑判断

目录 写在前面 1. 使用 if 语句 1.1 使用 if 语句 1.2 使用多个条件 2. 使用三元表达式 2.1 简单示例 2.2 结合多条件判断 写在最后 最佳实践 写在前面 在 Flutter 开发中&#xff0c;构建动态和响应式的用户界面是一个核心任务。在显示视图时&#xff0c;我们经常需要…

网络空间指纹:新型网络犯罪研判的关键路径

前言 新型网络犯罪是指利用计算机技术和互联网平台进行犯罪活动的一类犯罪行为。它涵盖了一系列使用网络和数字技术进行非法活动的行为&#xff0c;如网络钓鱼、网络诈骗、恶意软件攻击、黑客入侵、数据泄露、网络色情和社交网络犯罪等。 随着当前打击治理新型网络犯罪博弈态…

【专题】数据库编程

1. MySQL编程基础 1.1 常量与变量 字符串常量&#xff1a; 字符串常量指用单引号或双引号括起来的字符序列。 示例&#xff1a;查询表emp中ename值为SCOTT的雇员信息。 SELECT * FROM emp WHERE enameSCOTT; 数值常量&#xff1a; 数值常量可以分为整数常量和小数常量。 示…

mysql存储过程和存储函数的区别

MySQL中的存储函数和存储过程是两种不同类型的存储程序&#xff0c;它们各自具有独特的特点和适用场景。以下是它们之间的主要区别&#xff1a; 一、定义与功能 存储函数&#xff1a; 是一组为了完成特定功能的SQL语句集&#xff0c;但功能相对单一&#xff0c;针对性强。通常…

屏幕找图实现植物大战僵尸自动收取阳光

阳光图片 2.在截图中查找阳光&#xff0c;找到阳光使用鼠标点击进行收集 import java.awt.AWTException; import java.awt.Dimension; import java.awt.Rectangle; import java.awt.Robot; import java.awt.MouseInfo; import java.awt.image.BufferedImage; import java.io.F…

浅析建造者模式

建造者模式 一、基础知识介绍 1. 问题引出 上图面存在的问题&#xff1a;产品和产品创建的过程是封装在一起的。耦合性太强 解决方法: 将二者解耦和 2.建造者模式介绍 将复杂对象的构造过程抽象出来&#xff0c;用户不用知晓里面的构建细节 3.四个角色 建造者模式的四个角…

centos8配置java环境变量jdk8u422-b05

1. 下载 JDK 8u422-b05 首先&#xff0c;确保已经下载了 JDK 8u422-b05 的二进制文件。如果还没有下载&#xff0c;你可以去 Oracle 官方网站或者其他可信的源下载 JDK 8u422。 2. 安装 JDK 将下载的 JDK 文件解压到 /usr/local/java 目录下&#xff1a; sudo mkdir /usr/l…

Spire.PDF for .NET【页面设置】演示:从 PDF 中删除页面

PDF 文档可以包含多个页面&#xff0c;这些页面具有不同的文本内容、图像或其他对象。有时&#xff0c;用户可能需要删除某些页面&#xff0c;这些页面包含不正确绘制的对象或与文档主题无关的页面。本文将演示如何使用Spire.PDF for .NET以编程方式从现有 PDF 文档中删除/移除…