react项目中使用video标签设置自动播放并未及时播放解决

news/2024/7/15 17:31:54 标签: react.js, 前端, javascript

react项目中使用video标签设置autoplay,但是视频不会直接播放,会加载一段时间后才会自动播放。

解决:
手动调用play方法

const videoRef = useRef();

useEffect(() => {
if(videoRef?.current){

	if(videoRef?.current.paused){
		videoRef?.current.play()
	}

}
},[])


<video  
	ref={videoRef} 
	autoplay 
	src="">
</video>

http://www.niftyadmin.cn/n/5241229.html

相关文章

3d家居产品虚拟三维展示提升企业的品牌竞争力

2D展示逐渐难以满足消费者需求&#xff0c;因此基于3D三维展示制作平台将产品或服务以三维形式呈现的3D三维展示更受客户和企业青睐&#xff0c;也大幅提升企业的营销推广效果。那么3D三维展示制作平台如何赋能企业营销推广呢? 首先&#xff0c;3D三维展示制作平台能够提供更加…

C#,数值计算——计算实对称矩阵所有特征值与特征向量的三角分解与QL迭代法源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Computes all eigenvalues and eigenvectors of a real symmetric matrix by /// reduction to tridiagonal form followed by QL iteration. /// </summary> pu…

Java 连接Sqlite数据库

POM文件添加依赖 <dependency><groupId>org.xerial</groupId><artifactId>sqlite-jdbc</artifactId><version>3.36.0.3</version></dependency> application.yml spring:datasource:#url: jdbc:sqlite::resource:db/main.db…

使用 PyTorch 进行 K 折交叉验证

一、说明 中号机器学习模型在训练后必须使用测试集进行评估。我们这样做是为了确保模型不会过度拟合&#xff0c;并确保它们适用于现实生活中的数据集&#xff0c;与训练集相比&#xff0c;现实数据集的分布可能略有偏差。 但为了使您的模型真正稳健&#xff0c;仅仅通过训练/测…

Redis系列之keys命令和scan命令性能对比

项目场景 Redis的keys *命令在生产环境是慎用的&#xff0c;特别是一些并发量很大的项目&#xff0c;原因是Redis是单线程的&#xff0c;keys *会引发Redis锁&#xff0c;占用reids CPU&#xff0c;如果key数量很大而且并发是比较大的情况&#xff0c;效率是很慢的&#xff0c…

华为云RDS通用型(x86) vs 鲲鹏(ARM)架构的性能对比

概述 之前&#xff0c;我们对比了阿里云RDS的经济版&#xff08;ARM&#xff09;与x86版的性价比&#xff0c;这次我们来看看华为云的RDS MySQL的“通用型”(x86)与“鲲鹏通用增强型”(ARM)版本的情况如何。 这里依旧选择了用户较为常用的4c16g的规格进行测试&#xff0c;测试…

Axure网页端高复用组件库, 下拉菜单文件上传穿梭框日期城市选择器

作品说明 组件数量&#xff1a;共 11 套 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;web端原型设计、桌面端原型设计 作品特色 本作品为「web端组件库」&#xff0c;高保真高交互 (带仿真功能效果)&#xff1b;运用了动态面板、中继…

C语言进阶之路-数组与指针

目录 一、学习目标 二、数组入门 基本概念 语法释义&#xff1a; 定义&#xff1a; 访问&#xff1a; 赋值&#xff1a; 字符数组 多维数组 数组万能拆解法 三、指针入门 内存地址 基地址 取址符 指针基础 指针的定义&#xff1a; 指针的赋值 指针的尺寸 四、…