解决：h5的＜video＞在移动端浏览器无法自动播放

已于 2023-07-31 22:52:08 修改
阅读量2.6k 收藏
点赞数
分类专栏： 网页 文章标签： html5
于 2023-07-31 22:47:43 首次发布
本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺
本文链接：https://blog.csdn.net/qq_43319748/article/details/132032117
版权
文章指出并非所有移动端浏览器都禁止视频自动播放，如谷歌、火狐和Edge支持autoplay属性。但在夸克浏览器中，autoplay属性失效。解决方案是为<video>标签添加muted属性，实现静音自动播放。然后利用@canplay和@play事件回调，可在视频开始播放时取消静音，保持声音播放。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

并不是所有的移动端浏览器都无法自动播放，下载谷歌、火狐、edge等都可以正常播放，目前发现夸克浏览器无法自动播放。即autoplay属性失效。

<video autoplay="autoplay"></video>

可能移动端有移动端的策略，但解决夸克浏览器无法自动播放的方法很简单

给<video>添加静音属性即可，

<video autoplay="autoplay" muted></video>

再次测试，发现已经可以自动播放了，然后设置开始播放的回调函数，把静音取消即可。

什么？不知道回调？

@canplay="canplay"  已准备好播放
@play="play"  已经开始播放
video对象.muted = false     设置取消静音

移动端微信内置浏览器播放video不兼容无法自动播放的问题
weixin_44295184的博客
04-17 3596
移动端微信内置浏览器播放video不兼容无法自动播放的问题
移动端H5【video】浏览器劫持视频播放
2201_75568521的博客
02-26 3022
在H5页面开发中会使用视频，现在是使用videojs组件进行开发，但是在部分浏览器，如夸克，QQ浏览器中，视频会被浏览器劫持，不仅样式会有变化，且视频的层次会变得特别高。解决问题2：如需实现页面内（非全屏）播放，需要在 video 标签中加入 playsinline 和 webkit-playsinline 和 x5-playsinline 属性。解决问题1： 视频转成gif 使用poster属性做背景封面也可以使用js 方法。：使用第三方播放器，一般插件做过封装以上两个问题都可以解决。
H5 video 自动播放（autoplay）不生效解决方案
热门推荐
卡尔特斯
12-13 1万+
有个h5需要加入播放器，发现在微信浏览器中无法自动播放，在移动端普通浏览器中也无法正常自动播放ios浏览器中（微信或者其他浏览器），每次刷新进入网页首次需要手动点击播放，下次会自动播放。安卓在微信浏览器中是随便怎么样都不会进入自动播放，在其他浏览器中会进入自动播放。ios平台可以通过微信官方的jweixin插件来解决，但是安卓就暂时无任何办法，限制太严重，只能通过诱导用户点击屏幕进行播放。
H5移动端如何自动播放视频
qq_42931285的博客
03-05 2651
由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码: 在mounted生命周期钩子函数中可以写： document.addEventListener('touchstart', function () { document.getElementsByTagName('audio')
微信h5video不能自动播放和不显示问题解决
aaa123aaasqw的博客
07-12 5536
在微信中，由于安全和用户体验的考虑，自动播放视频（尤其是带有声音的视频）受到了严格的限制。特别是在iOS设备上，由于操作系统的限制，视频通常不能自动播放，除非它们被设置为静音（请注意，这仅适用于iOS设备上的Safari浏览器（包括微信内置的X5浏览器），并且需要用户之前与页面有过交互（如点击或触摸页面上的某个元素）。然而，在Android设备上，微信的X5浏览器可能会稍微宽松一些，但仍然不建议依赖自动播放功能，因为用户的浏览器设置和微信版本可能会影响这一行为。）且用户之前与页面有过交互（如点击或触摸）。
H5端Video无法自动播放
weixin_38079959的博客
09-15 2570
H5视频无法自动播放
h5移动端视频自动播放
高先生的猫
12-11 4570
在移动端使用h5自动的video标签播放视频，设置autoplay属性，在android端部分不支持，全屏播放还存在层级问题，ios10以上版本支持视频自动播放，以下版本不支视频自动播放。 jsMpeg是js写的视频、音频解码器，能使用WebGL&Canvas2D渲染以及WebAudio声音输出。 官网：https://jsmpeg.com/ github:https://github.com/phoboslab/jsmpeg 官方例子:https://jsmpeg.com/perf.html
video是移动端无法自动播放以及自动弹出解决方法
u010481557的博客
07-13 4292
视频在 safri 页面不能自动播放的原因： 因为ios中明确的指出等待用户的交互动作后才能播放video，也就是说没有得到用户的action就播放的话会被safri拦截 解决方法如下： 因为这个是微信的链接，需要在微信上点开进入他的浏览器，这里需要一个插件 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script> 然后.
h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理(获取当前浏览器做一下逻辑处理)
essnbb的博客
09-08 2152
像h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理
一个移动端H5Video标签播放视频的实现
08-11
在移动端使用H5的`<video>`标签来播放视频已经成为现代网页开发的常见实践，尤其在移动设备上，用户越来越倾向于通过浏览器直接观看在线视频。本文将深入探讨如何利用JavaScript和HTML5的`<video>`标签在移动端实现...
video在微信浏览器引导用户触摸自动播放解决方案
11-01
video在移动端微信浏览器上会出现全屏的情况，而且无法自动播放（这是由微信官方开发团队设定的，暂无根本解决办法），此Demo是在进入页面时生成一个Dom将video部分进行遮盖，这个Dom可以看作是一个进入页面后的弹窗...
解决网页中的 video 标签在移动端浏览器（如百度访问网页）视频脱离文档流播放问题
weixin_40795574的博客
07-16 1240
部分浏览器视频脱离文档流，滚动时，视频是悬浮出来，在顶部播放。
vue3开发移动端H5页面中video无交互自动播放完美解决方案
最新发布
aaa123aaasqw的博客
07-31 593
链接官网：https://jsmpeg.com/官方例子：https://jsmpeg.com/perf.html在线video转ts文件：https://convertio.co/zh/mp4-ts/本文完整案例代码：https://gitee.com/liubaichao/vue3-video-h5-auto.git。
H5网页中的video标签不能自动播放并且play或者click播放按钮无效的原因及解决办法
先飞网校
02-05 3946
于是，获取video标签，然后静音：video.muted=true;然后再播放：video.play()获取按钮和video都是可以的，但是无法进行下一步，除非有互动动作，比如点击一下页面任意位置。2、用js获取video标签，play。1、用js获取播放按钮，click；
video标签在安卓手机内置浏览器上的播放问题
weixin_44891495的博客
08-30 1845
道阻且长，行而不辍，未来可期在手机内置浏览上，虽然没有给video标签设置controls,但在内置浏览器上，就是会显示。而且，video一旦自动播放，video的层级就会提升到最前，想设置一个盒子覆盖在上面都做不到，给前端造成了很大的困扰。看了很多相关问题的解决方法，直到看到把video的src设置为blob(视频流）安卓手机的内置浏览器因为认不出数据格式，而不再劫持video标签的渲染。直觉是个好方法，开始动手。下载blob类型的文件：在回调函数中可以这样写完美解决。
微信浏览器H5部分ios机型不能自动播放视频，解决方案
ZeBo_jiang的博客
04-16 1969
使用uniapp的video组件 制作视频播放，由于浏览器限制，视频不能自动播放
Html5视频播放之 video标签 autoplay="autoplay"设置无法自动播放视频
静若清池，动如涟漪_
09-22 8114
在标签中，在autoplay的基础上，添加一个属性muted即可 <video controls="controls" autoplay="autoplay" width="500" height="400" muted loop="loop"> <source src="video/video-h264.mp4" type="video/mp4" /&gt...
手机 html自动播放视频格式,Video 在网页和移动端无法自动播放问题？?
weixin_42118056的博客
06-01 2092
标签介绍 标签定义视频，比如电影片段或其他视频流。支持三种视频格式：MP4、WebM、Ogg。是 H5 的新标签，使用如下：//autoplay表示视频自动播放，controls表示显示视频控制器，loop表示循环播放您的浏览器不支持 video 标签。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。Element谷歌IE火狐safariopera4.09.03.54.010.5提示和...
关于H5移动端视频的一些问题，自动播放，添加音频，视频全屏
thirteen_king13的博客
03-26 2206
H5前端如何实现移动端音频视频自动播放 项目介绍 vue 前后端 分离 有 android 和 iOS 是所涉及法是否 为什么不能 自动播放 非静音条件下怎么实现 1 通过事件点击(不是用户第一次点击 被禁止了),视频没有播放 就一直 循环触发 2 默认禁音 然后 先触发播放, 再在 播放之后操作类样式删除muted属性 3 ios 和 android 协助 打开一下开关, 然后 调用android ios方法, 在该方法中 调用自己的事件 4 模拟 用户的 点击事件 而不是 自己 通过事件点击 5 诱
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值