h5-video自动播放兼容性处理

最新推荐文章于 2024-07-12 11:42:44 发布

I-T枭

最新推荐文章于 2024-07-12 11:42:44 发布

阅读量2.7k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/114821989

版权

在前端开发中，HTML5 video标签在移动端自动播放时常遇到兼容性问题，尤其是微信浏览器。解决这个问题需要结合autoplay、muted、loop等属性，并确保在用户交互后调用play()方法。一种解决方案是在页面加载时创建一个隐藏的video元素，当用户点击时，使其可见并播放，同时避免video元素与触发点击事件的元素存在父子关系。

摘要由CSDN通过智能技术生成

HTML<video/>视频无法自动播放

最新|解决前端微信浏览器中video标签不能自动播放视频问题
最近前端有一个需求要求在网页中自动播放视频，PC端没有问题，移动端是有问题的，移动端为了避免浪费用户的流量，默认video是不能够自动播放的，即使加了autoplay属性，也只能实现在PC端自动播放，在移动端依旧不能自动播放。

网上有很多解决方案，都不能真正的解决问题，于是自己尝试了一下。

video 标签属性

src: 设置显示视频路径
controls: 显示控制栏
loop: 控制视频循环播放
autoplay: 自动播放
muted:设置静音播放

测试pc端、移动端浏览器兼容情况 ( 支持✔ 不支持 ✘ 暂无 ∅)

<div class="video-box">
			<video muted preload autoplay loop controls="false" id="myVideo" type="video/mp4" width="100%" webkit-playsinline="true"
				x-webkit-airplay="allow" playsinline="" x5-video-player-type="h5" x5-video-orientation="portrait"
				x5-video-player-fullscreen="portraint"
				src="https://static.yximgs.com/udata/pkg/fe/kwai_video.a7616d99.mp4"
				poster="https://website.didiglobal.com/dist/img/homepage1-app.fb9b0c10.jpg">
				对不起，您的手机不支持本系统
			</video>
			<div class="btn-play"></div>
			<div class="processBar">
				<div class="playProcess"></div>
				<div class="loadProcess"></div>
			</div>
		</div>

video属性：muted autoplay loop