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.rhkb.cn/news/450442.html

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

相关文章

Qml-Item的构造和显示顺序

Qml-Item的构造和显示顺序 qml文件中组件构造顺序 在同一个qml文件中&#xff0c;同层级的Item, 文件尾的Item优先构造&#xff0c;文件首的Item后构造。这就能解释默认情况下同一个qml文件中&#xff0c;几个同层级的item都设置了focus:true&#xff0c;为啥最上面item最终有…

毕业设计选题:基于django+vue的个人博客系统设计与开发

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 博主管理 博客文章管理 博文排行管理 博文打赏管理 博文…

设计模式之组合模式(Composite)

一、组合模式介绍 组合模式(Composite Pattern) 的定义是&#xff1a;将对象组合成树形结构以表示整个部分的层 次结构。组合模式可以让用户统一对待单个对象和对象的组合。 如在windows操作系统中的目录结构&#xff0c;其实就是树形目录结构&#xff0c;可以通过 tree /f 命令…

加速“人工智能+”落地,青云如何打磨智算基石

智算中心建设不断加速&#xff0c;正成为推动数字经济发展的新引擎。 根据天风证券的研究&#xff0c;2024年1-6月&#xff0c;全国智算中心招投标相关事件791起&#xff0c;较上年同期增加407.1%。 围绕AI算力&#xff0c;云计算厂商也在积极探索第二增长曲线。根据2024年半年…

2024.10月17日- Vue.js(2)

2.4 计算属性 从字符串反转中&#xff0c;我们发现 插值语法的初衷是用于简单运算。明显练习题中的写法&#xff0c;违背了插值语法的初衷。 methods方法可以。但是方法中如果封装的是性能开销比较大的逻辑代码&#xff0c;需要进行大量的运算&#xff0c;并且别的属性还依赖…

【数据结构与算法】栈和队列

文章目录 一.栈1.1定义 顺序栈和链式栈1.2基本操作1.2.1表示1.2.2初始化1.2.3清空1.2.4销毁1.2.5入栈1.2.6出栈1.2.7取栈顶 1.3共享栈1.3.1定义1.3.2进栈出栈 二.队列2.1定义 顺序队列和链式队列循环队列2.2基本操作2.2.1初始化2.2.2判空2.2.3求队列长度2.2.4取队头元素2.2.5销…

Python123练习题

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 目录 &#x1f449;&#x1f3fb;百钱买百鸡&#x1f449;&#x1f3fb;鸡兔同笼&#x1f449;&#x1f3fb;最大公约数和最小公倍数&#x1f449;…

redux与react18setState触发render问题

最近在做一个需求&#xff0c;需要用im做那个协同。 刚好遇到一个比较有意思的问题。 具体问题就不赘述了。 根本原因就是在修改state的时候&#xff0c;触发了两次重渲染。 后面也是做了一些验证 demo function App() {const [state, setState] useState("");con…

JDK、JRE、JVM相关知识点

1、JDK、JRE、JVM三者的关系 JDK‌&#xff1a;Java开发工具包&#xff0c;包括编译工具&#xff08;javac.exe&#xff09;、打包工具&#xff08;jar.exe&#xff09;等&#xff0c;也包含JRE。JDK是开发Java程序的主要工具包&#xff0c;包括了Java运行环境、Java工具和Jav…

C++之设计原则

在C中&#xff0c;设计原则是一套指导软件开发过程中决策和设计模式的准则&#xff0c;旨在提高软件的可维护性、可扩展性、灵活性和可靠性。 以下是几种核心设计原则&#xff1a; 1.单一职责 功能单一&#xff0c;方便组合和复用。 图示&#xff1a; 应用场景&#xff1a;…

【2024CANN训练营第二季】Ascend C概述

什么是算子 算子在神经网络中的定义 算子对应网络中层或者节点的计算逻辑 算子的数学含义 算子在数学中的定义&#xff1a; 一个函数空间到函数空间上的映射O&#xff1a;X->X&#xff1b; 广义&#xff1a; 对任何函数进行某一项操作都可以认为是一个算子。比如微分算…

redis IO多路复用机制

目录 一、五种 I/O 模型 1.阻塞IO&#xff08;Blocking IO&#xff09; 2.非阻塞IO&#xff08;Nonblocking IO&#xff09; 3.IO多路复用&#xff08;IO Multiplexing&#xff09; 通知的方式 select模式 poll模式 epoll模式 4.信号驱动IO&#xff08;Signal Driven …

SD-WAN技术的特点和应用场景

近年来&#xff0c;SD-WAN逐渐成为企业网络建设中的热门技术。那么&#xff0c;SD-WAN到底是什么呢&#xff1f;简而言之&#xff0c;SD-WAN&#xff08;软件定义广域网&#xff09;结合了软件定义网络&#xff08;SDN&#xff09;与广域网优化技术&#xff0c;为企业提供了更加…

一文读懂:Session、Cookie与Token

我是小白刚刚接触JWT&#xff0c;看了b站一些相关视频、查了中国知网和csdn其他人的文章之后&#xff0c;总结出了这篇文章。写文章的初心是为了检验自己是否透彻了解了知识点以及之后复习。如果标题党了&#xff0c;斯米马赛请原谅&#xff01;&#xff01;&#xff01;欢迎大…

企业AI助理与知识库管理系统:重塑企业知识管理的新篇章

在数字化转型的浪潮中&#xff0c;企业正面临着前所未有的机遇与挑战。如何高效管理、快速获取并利用企业内部的知识资源&#xff0c;成为了提升企业竞争力的关键。近年来&#xff0c;企业AI助理与知识库管理系统的结合&#xff0c;正逐步成为企业知识管理的新趋势&#xff0c;…

【C语言】循环嵌套:乘法表

循环嵌套&#xff0c;外层循环执行一次&#xff0c;内层循环执行i次。分别控制 在循环的过程中加一层循环。 多层循环属于循环嵌套、嵌套循环 #include <stdio.h> #include <math.h> /* 功能&#xff1a;循环嵌套 乘法表 时间&#xff1a;2024年10月 地点&#xf…

老机MicroServer Gen8再玩 OCP万兆光口+IT直通

手上有一台放了很久的GEN8微型服务器&#xff0c;放了很多年&#xff0c;具体什么时候买的我居然已经记不清了 只记得开始装修的时候搬家出去就没用了&#xff0c;结果搬出去有了第1个孩子&#xff0c;孩子小的时候也没时间折腾&#xff0c;等孩子大一点的时候&#xff0c;又有…

使用Python PyQt5 vscode 制作流水灯或者交通灯

需要用到 Python PyQt5 vscode&#xff0c;其他的各模块引用在代码里面有&#xff0c;自己找找就行 制作流水灯代码 import sys from PyQt5.QtCore import (QEvent, QTimer, Qt,QPoint) from PyQt5.QtWidgets import (QApplication, QMenu,QMainWindow) from PyQt5.QtGui imp…

限时设计ui

ctrl-------放大缩小 空格-----画面移动 alt------复制 页面<画板<图层 添加交互事件 原型 点击蓝色的圆&#xff0c;从1跳转到2 点击绿色的圆&#xff0c;从2跳转到1

如何实现安川MP3300运动控制器与西门子1200系列PLC进行ModbusTCP通讯

在工业自动化中&#xff0c;实现不同品牌、不同型号设备之间的通讯是确保生产流程顺畅、高效运行的关键。本文详细介绍了安川MP3300运动控制器与西门子1200系列PLC进行ModbusTCP通讯的具体方法。 一&#xff0e;软硬件需求 1.一台安川MP3300CPU301&#xff0c;其IP地址是192.…