微信 H5 页面在安卓环境下 video 无法自动播放视频，该如何解决？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2493 days ago, the information mentioned may be changed or developed.

需求：做个类似抖音 h5 页面，哪怕第一个视频需要手动播放都行，后面的视频能自动播放。

IOS 没有问题，可以自动播放，安卓不行。

在网上查了资料，没有解决办法。

黑魔法也行。

播放

抖音

安卓

视频

28 replies • 2021-02-07 10:53:46 +08:00

p8YFk4f3E8SJ3aEv

Jan 15, 2020

哈哈哈这个我遇到过，用定时器解决

p8YFk4f3E8SJ3aEv

Jan 15, 2020

不对，看错了。。。。。我当时做的是直播，你这个是视频列表

p8YFk4f3E8SJ3aEv

Jan 15, 2020

什么格式的视频？ flv 的话用 bilibili 的 flv.js 试试

ccfoucs

Jan 15, 2020

非 wifi 环境下浏览器是禁止自动播放的，省流量

redbuck

Jan 15, 2020

与 wifi 无关.

高版本浏览器禁止视频,音频自动播放.只能由用户行为触发.甚至,如果是在用户行为的回调中,你加个延时都是无效的.

如果是在微信中,那可以使用'WeixinJSBridgeReady'事件,微信浏览器做了特殊处理,在这个回调里拿到 videoContext,手动调用 play 可以开始播放.

除此之外,你可以监听 touchstart 事件,至少在用户接触屏幕之后可以开始播放

KuroNekoFan

Jan 15, 2020

youtube 的方法是 mute 播放，然后加个提示让用户交互来启用声音

redbuck

Jan 15, 2020

查了下, 设置 muted 视频可以静音自动播放
[MDN 文档]( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)

efaun

Jan 15, 2020

自动播放视频就是毒瘤，我遇到一个关一个

geeksnail

Jan 15, 2020

忘了自己当年微信打开视频遇到的是什么奇葩问题了。
试试这几个设置：
// for wechat browser
video.setAttribute('webkit-playsinline', 'webkit-playsinline');
video.setAttribute('x-webkit-airplay', 'true');
video.setAttribute('playsinline', 'true');
video.setAttribute('x5-video-player-type', 'h5');
video.setAttribute('x5-video-player-fullscreen', 'false');
video.preload = 'auto';

KuroNekoFan

Jan 15, 2020

不要尝试其它 workaround 了，用得了一时，用不了升级系统