当前位置: 首页 > news >正文

操作视频的开始与暂停

  • 调用 ref.current.play() 方法来播放视频;

  • 如果视频需要暂停,我们调用 ref.current.pause() 方法来暂停视频

通过 useRef 创建的 ref 操作视频的开始与暂停

当用户点击按钮时,根据当前视频的状态,我们会开始或暂停视频,并根据视频的播放状态来更新按钮的显示文本。

image.png

// 播放及暂停视频
import { useRef, useState } from "react";const ControlsVideo = () => {const [isPlaying, setIsPlaying] = useState<any>(false);const ref = useRef<any>(null);function handleClick() {// 按钮名的修改const nextIsPlaying = !isPlaying;// 开始或暂停视频setIsPlaying(nextIsPlaying);if (nextIsPlaying) {ref.current.play();} else {ref.current.pause();}}return (<><button onClick={handleClick}>{isPlaying ? "开始" : "暂停"}</button><videowidth="250"ref={ref}onPlay={() => setIsPlaying(true)}onPause={() => setIsPlaying(false)}><sourcesrc="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"type="video/mp4"/></video></>);
};export default ControlsVideo;

我们定义了一个函数组件 ControlsVideo。在组件内部,我们使用 useState 创建了一个名为 isPlaying 的状态变量,并将初始值设置为 false,表示视频初始状态是暂停的。我们还使用 useRef 创建了一个引用 ref,并将其初始化为 null

接下来,我们定义了一个叫做 handleClick 的函数。当按钮被点击时,这个函数会被调用。

在函数内部,我们首先通过取反操作符 ! 来获取下一个状态 nextIsPlaying。然后,我们调用状态更新函数 setIsPlaying,将 nextIsPlaying 设置为新的状态值,从而更新 isPlaying 的值。

接着,我们使用 ref.current 来获取到 ref 引用所指向的 DOM 元素,这里是一个 video 元素。

根据 nextIsPlaying 的值,如果视频需要播放

  • 调用 ref.current.play() 方法来播放视频;

  • 如果视频需要暂停,我们调用 ref.current.pause() 方法来暂停视频

在组件的返回值中,我们渲染了一个按钮和一个视频元素。

在按钮部分,我们通过调用 handleClick 函数来处理按钮的点击事件。根据 isPlaying 的状态,我们使用条件运算符 ?: 来显示不同的按钮名,如果 isPlayingtrue,显示 “开始”,否则显示 “暂停”。

在视频元素部分,我们将 ref 设置为 video 元素的 ref 属性,以便将引用与该元素关联起来。同时,我们通过 onPlayonPause 事件处理函数来更新 isPlaying 的状态,当视频开始播放时将其设置为 true,当视频暂停时将其设置为 false。并且,我们指定了视频源的 URL 和类型。

相关文章:

操作视频的开始与暂停

调用 ref.current.play() 方法来播放视频&#xff1b; 如果视频需要暂停&#xff0c;我们调用 ref.current.pause() 方法来暂停视频。 通过 useRef 创建的 ref 操作视频的开始与暂停 当用户点击按钮时&#xff0c;根据当前视频的状态&#xff0c;我们会开始或暂停视频&…...

使用Docker配置深度学习的运行环境

文章目录 推荐实验环境前言docker安装docker操作docker配置常见方法&#xff08;安装包、联网、程序管理器&#xff09;安装驱动的前提要求传统方法安装驱动程序程序管理器安装联网安装deb包安装 安装完成后的设置非传统方法安装-通过容器安装驱动的前提要求安装NVIDIA-Contain…...

三相PMSM的坐标变换

三相PMSM的坐标变换 三相PMSM的数学模型具有复杂性和耦合性的多变量系统。因此需要对其进行降阶和解耦变换。 Vα&#xff0c;Vb&#xff0c;Vc是自然坐标系。 Vα&#xff0c;Vβ是静止坐标系。 Vd&#xff0c;Vq是同步旋转坐标系。 自然坐标系 三相永磁同步电机的驱动电路…...

8.(Python数模)(预测模型一)马尔科夫链预测

Python实现马尔科夫链预测 马尔科夫链原理 马尔科夫链是一种进行预测的方法&#xff0c;常用于系统未来时刻情况只和现在有关&#xff0c;而与过去无关。 用下面这个例子来讲述马尔科夫链。 如何预测下一时刻计算机发生故障的概率&#xff1f; 当前状态只存在0&#xff08;故…...

Leetcode1006笨阶乘

思路&#xff1a;以4为一个分组分别进行处理 class Solution:def clumsy(self, n: int) -> int:answer_dict {0:0,1: 1, 2: 2, 3: 6, 4: 7}if n > 4:answer n * (n - 1) // (n - 2) n - 3n - 4else:print(answer_dict[n])return answer_dict[n]print(answer)while n …...

阻塞非阻塞IO(BIO和NIO),IO多路复用

1.概念 NIO&#xff08;New Input/Output&#xff09;和BIO&#xff08;Blocking Input/Output&#xff09;是Java中用于处理输入输出的两种不同的模型。 BIO 会阻塞&#xff0c;等有了消息&#xff0c;立刻返回&#xff0c;一个线程处理一个recv&#xff08;需要很多线程&…...

HTTP协议初识·中篇

加上目录&#xff0c;会出现导向不正确的情况&#xff0c;可能是bug&#xff0c;目录一长就容易出错&#xff1f; 本篇主要讲解了&#xff1a; 网页分离(网页代码和.c文件分离) html链接跳转 网页添加图片 确认并返回资源类型 填写正文长度属性 添加表单 临时重定向 补充知识&a…...

数学建模:拟合算法

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 数学建模&#xff1a;拟合算法 文章目录 数学建模&#xff1a;拟合算法拟合算法多项式拟合非线性拟合cftool工具箱的使用 拟合算法 根据1到12点间的温度数据求出温度与时间之间的近似函数关系 F ( t ) F(…...

计算机网络-笔记-汇总

目录 &#x1f4da; 前言 &#x1f338;章节汇总 &#x1f680; 学习心得 ⌛2023年8月31日 星期四 &#x1f4da; 前言 在学习了【操作系统】、【计算机组成原理】之后 再来学习【计算机网络】&#xff0c;对计算机之间如何通信&#xff0c;有了一个大致的认识。 可以想象…...

STM32定时器定时及其应用

STM32定时器定时及其应用 定时器概述☆定时器相关配置CubeMX工程配置及程序实现固件库程序设计及实现 定时器概述 1. 工作原理 使用精准的时基&#xff0c;通过硬件的方式&#xff0c;实现定时功能。定时器核心就是计数器 2. 定时器分类   基本定时器&#xff08;TIM6~TIM7…...

(牛客) 游游的字符重排(next_permutation的使用)

题目描述 游游定义一个字符串是“好串”&#xff0c;当且仅当该字符串相邻的字符不相等。例如"arcaea"是好串&#xff0c;而"food"不是好串。 游游拿到了一个字符串&#xff0c;她可以将该字符串的各个字符顺序随意打乱。她想知道一共可以生产多少种不同的…...

RTPEngine 通过 HTTP 获取指标的方式

文章目录 1.背景介绍2.RTPEngine 支持的 HTTP 请求3.通过 HTTP 请求获取指标的方法3.1 脚本配置3.2 请求方式 1.背景介绍 RTPEngine 是常用的媒体代理服务器&#xff0c;通常被集成到 SIP 代理服务器中以减小代理服务器媒体传输的压力&#xff0c;其架构如下图所示。这种使用方…...

聚鑫数藏平台——引领数字资产管理新风向

随着数字经济的飞速发展&#xff0c;新金融生态应运而生。区块链技术的崭新突破&#xff0c;使数字资产的重要性日益凸显&#xff0c;为投资者带来了前所未有的机遇和挑战。在此背景下&#xff0c;聚鑫数藏平台横空出世&#xff0c;引领着数字资产管理的新风向。 聚鑫数藏平台&…...

web3j solidity 转java

需要使用的环境 web3j&#xff0c;nodejs 安装编译sol工具 1 $ npm install -g solc 保存为hello.sol文件到本地 1 2 3 4 5 6 7 8 pragma solidity 0.4.19; contract hello { function main(uint a) constant returns (uint b) { uint result a * 8; …...

uniapp项目实战系列(3):底部导航栏与头部导航栏的配置

目录 系列往期文章&#xff08;点击跳转&#xff09;uniapp项目实战系列(1)&#xff1a;导入数据库&#xff0c;启动后端服务&#xff0c;开启代码托管&#xff08;点击跳转&#xff09;uniapp项目实战系列(2)&#xff1a;新建项目&#xff0c;项目搭建&#xff0c;微信开发工具…...

Jwt工具类

导入依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version> </dependency> <dependency><groupId>javax.xml.bind</groupId><artifactId>jax…...

计算机网络-笔记-第五章-运输层

&#x1f338;章节汇总 一、第一章——计算机网络概述 二、第二章——物理层 三、第三章——数据链路层 四、第四章——网络层 五、第五章——运输层 六、第六章——应用层 目录 五、第五章——运输层 1、运输层概述 2、运输层端口号、复用、分用 &#xff08;1&#xff0…...

java-参数传递机制

java参数传递机制都是值传递。 基本类型参数传输都是数据值。 传递到方法中的值是拷贝后的值。 引用类型参数传输的都是地址值。 如果是数组的参数传递&#xff0c;那么是引用传递&#xff08;本质上还是值传递&#xff0c;但是由于数组的值传递是传递数组的内存地址&#xf…...

Python编程练习与解答 练习96:字符串是否表示整数

本练习将编写一个名为isInteger的函数&#xff0c;用于确定字符串中的字符是否代表有效整数&#xff0c;确定字符串是否表示整数时&#xff0c;则应忽略开通要或者结尾的任何空白。一旦这个空白被忽略&#xff0c;如果字符串的长度至少是1&#xff0c;且只包含数字&#xff0c;…...

Scala的特质trait与java的interface接口的区别,以及Scala特质的自身类型和依赖注入

1. Scala的特质trait与java接口的区别 Scala中的特质&#xff08;trait&#xff09;和Java中的接口&#xff08;interface&#xff09;在概念和使用上有一些区别&#xff1a; 默认实现&#xff1a;在Java中&#xff0c;接口只能定义方法的签名&#xff0c;而没有默认实现。而在…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...

【QT控件】显示类控件

目录 一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏&#xff1a;QT_uyeonashi的博客-CSDN博客 一、Label QLabel 可以用来显示文本和图片. 核心属性如下 代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...