操作视频的开始与暂停

  • 调用 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 和类型。

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

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

相关文章

图解 LeetCode 算法汇总——链表

本文首发公众号&#xff1a;小码A梦 一般数据主要存储的形式主要有两种&#xff0c;一种是数组&#xff0c;一种是链表。数组是用来存储固定大小的同类型元素&#xff0c;存储在内存中是一片连续的空间。而链表就不同于数组。链表中的元素不是存储在内存中可以是不连续的空间。…

SpringMVC自定义视图完成步骤 和 视图解析的源码剖析

自定义视图完成步骤&#xff1a; ● 7.2.1自定义视图完成步骤 1. 自定义视图**:** 创建一个 View 的 bean, 该 bean 需要继承自 AbstractView, 并实现 renderMergedOutputModel 方法**.** 2. 并把自定义 View 加入到 IOC 容器中 3. 自定义视图的视图处理器&#xff0c;使用…

redis核心数据结构

redis下载地址&#xff1a;Download | Redis linux进入redis目录首先使用make命令进行c的编译&#xff0c;修改redis.conf文件&#xff1a; daemonize yes #后台启动 protected-mode no #关闭保护模式&#xff0c;开启的 # 需要注释掉bind #bind 127.0.0.1&#xff08;bind…

Matlab二乘法进行参数拟合

matlab二乘法进行参数拟合 主函数&#xff1a; clear all; close all; clc; %% 原始数据可视化 JiBie[56 62 69 77 85 94 105]; Zongchengji[305 327 358 380 394 418 436]; figure(1); scatter(JiBie,Zongchengji,b*); grid on; xlabel(运动员体重);ylabel(运动员总成绩); ti…

2023-简单点-编译是什么?gcc是什么?

编译目的 把一种 程序 变成 另一种更接近机器指令 编译的术语 “接近专家的最快方法第一步&#xff0c;直接了解100行业黑话” 那么来了解一下&#xff0c;编译过程中的黑话&#xff1a; 词法分析语法分析中间代码目标代码代码优化出错管理表格管理 gcc是个什么? 一种编译…

MySQL5.7 在Window平台安装

一、下载 在MySQL的官网下载安装包 MySQL :: Download MySQL Community Serverhttps://dev.mysql.com/downloads/mysql/ 这里我选择的是x64的ZIP安装包&#xff1b;点击Download下载 这里我选择的是直接开始下载 二、解压与初始化 将下载好的安装包解压&#xff0c;这里我解…

Qt应用开发(基础篇)——向导对话框 QWizard

一、前言 QWizard类继承于QDialog&#xff0c;为有向导界面需求的应用环境提供了一个框架。 对话框窗口 QDialog QWizard向导对话框是一个拥有队列界面的特殊对话框&#xff0c;向导的目的是引导用户一步一步的完成预设的流程。向导常用于软件安装界面向导、硬件线路安装向导、…

安全运营中心(SOC)技术框架

2018年曾经画过一个安全运营体系框架&#xff0c;基本思路是在基础单点技术防护体系基础上&#xff0c;围绕着动态防御、深度分析、实时检测&#xff0c;建立安全运营大数据分析平台&#xff0c;可以算作是解决方案产品的思路。 依据这个体系框架&#xff0c;当时写了《基于主动…

Emgu调用摄像头

1&#xff0c;安装EMgu 2,调用摄像头 public FaceLoad(){InitializeComponent();try{capture new Capture();capture.Start();//摄像头开始工作capture.ImageGrabbed frameProcess;//实时获取图像}catch (NullReferenceException excpt){//MessageBox.Show(excpt.Message);}}…

Apache Doris 2.0.1 1.2.7 版本正式发布!

亲爱的社区小伙伴们&#xff0c;我们很高兴的宣布&#xff0c;2023 年 9 月 4 日 我们正式发布了 Apache Doris 2.0.1 和 Apache Doris 1.2.7 这两个版本&#xff0c;这两个版本由上百名位贡献者共同努力完成的&#xff0c;提供了更多有用的新特性&#xff0c;同时修复了若干已…

[docker]笔记-portainer的使用

1、安装完成后输入ip加端口号打开网页&#xff0c;并再相应位置输入初始密码&#xff0c;初始密码自行设置。 2、进入主页后可以看到如下图标&#xff1a; 3、选择docker环境&#xff0c;即可展示目前docker信息 可以看到目前有1个容器&#xff0c;3个卷和4个镜像&#xff0c…

Android获取 H264视频流中的SPS和PPS

代码其实很简单&#xff0c;主要是要知道H264帧数据结构。分析H264码流结构的文章一大把&#xff0c;自己网上搜索一下就知道了。 背景&#xff1a; h264aac封装mp4格式的时候&#xff0c;需要获取视频流的sps,pps。 封装mp4文件格式的大体方案 使用 MediaExtractor 和 Medi…

RT-Thread UART

UART 简介 UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;通用异步收发传输器&#xff0c;UART 作为异步串口通信协议的一种&#xff0c;工作原理是将传输数据的每个字符一位接一位地传输。是在应用程序开发过程中使用频率最高的数据总线。 UART …

【已解决】uniapp使用vant-ui中的tab标签页的时候,发现底下红色的切换线不见了

问题截图 解决办法 按F12查看vant-ui源码你会发现他的Tab标签页里面有个width&#xff0c;但是我们引入到uniapp之后发现width没有了&#xff08;不知道什么情况&#xff0c;可能是兼容问题吧&#xff09; 所以我们解决的办法&#xff0c;只需要在App.vue中给全局.van-tabs__l…

ARM+Codesys标准通用型控制器

整机工业级设计&#xff0c;通讯外设经过隔离保护 电源宽电压设计(9~36V DC ) 丰富的通讯接口&#xff0c;满足多种场合控制和通讯需求 四核工业级处理器&#xff0c;高性能&#xff0c;低功耗&#xff0c;高可靠性 机身无风扇设计&#xff0c;外壳小巧 搭载内核 100% 自主…

数学建模之圈养湖羊的空间利用率

数学建模之圈养湖羊的空间利用率 D题最新最全思路已出&#xff0c;欢迎后台私信咨询~~~~ 1.问题&#xff1a; 规模化的圈养养殖场通常根据牲畜的性别和生长阶段分群饲养&#xff0c;适应不同种类、不同阶段的牲畜对空间的不同要求&#xff0c;以保障牲畜安全和健康&#xff…

掌动智能国产化测试工具的重要性与优势

在信息技术领域的快速发展下&#xff0c;对于软件和硬件产品的质量和性能要求也日益提高。同时针对信创要求&#xff0c;国产化测试工具在这个过程中发挥着重要的作用&#xff0c;不仅能够提升产品的可靠性和稳定性&#xff0c;还能够降低测试成本和提高测试效率。作为国内领先…

蓝桥杯官网练习题(三角回文数)

问题描述 对于正整数 n, 如果存在正整数 k 使得n123⋯k(k(k1)/2)​, 则 n 称为三角数。例如, 66066 是一个三角数, 因为 66066123⋯363 。 如果一个整数从左到右读出所有数位上的数字, 与从右到左读出所有数位 上的数字是一样的, 则称这个数为回文数。例如, 66066 是一个回文…

2023高教社杯 国赛数学建模A题思路 - 定日镜场的优化设计

1 赛题 A 题 定日镜场的优化设计 构建以新能源为主体的新型电力系统&#xff0c; 是我国实现“碳达峰”“碳中和”目标的一项重要 措施。塔式太阳能光热发电是一种低碳环保的新型清洁能源技术[1]。 定日镜是塔式太阳能光热发电站(以下简称塔式电站)收集太阳能的基本组件&…

Windows如何设置终端代理?

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、需求 由于Great Firewall of China&#xff0c;可能有些时候对我们探索科研世界增加了一些障碍。比如&#xff0c;我们经常需要通过…