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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1780 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

黑魔法也行。

播放

抖音

安卓

视频

28 条回复 • 2021-02-07 10:53:46 +08:00

f056917

2020-01-15 14:07:49 +08:00

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

f056917

2020-01-15 14:08:38 +08:00

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

f056917

2020-01-15 14:10:56 +08:00

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

ccfoucs

2020-01-15 14:18:18 +08:00

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

redbuck

2020-01-15 14:24:35 +08:00

与 wifi 无关.

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

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

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

KuroNekoFan

2020-01-15 14:28:12 +08:00

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

redbuck

2020-01-15 14:28:19 +08:00

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

efaun

2020-01-15 14:29:12 +08:00

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

slowhand

2020-01-15 14:31:03 +08:00

忘了自己当年微信打开视频遇到的是什么奇葩问题了。
试试这几个设置：
// 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

2020-01-15 14:32:02 +08:00

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