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

2020-01-15 13:54:31 +08:00
 cl903254852

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

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

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

黑魔法也行。

6660 次点击
所在节点    程序员
28 条回复
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 了,用得了一时,用不了升级系统
cl903254852
2020-01-15 14:58:50 +08:00
@f056917 mp4 格式
cl903254852
2020-01-15 15:01:43 +08:00
@slowhand 这些加过了,跟自动播放没有关系,IOS 可以自动播放安卓不行
cl903254852
2020-01-15 15:02:46 +08:00
@redbuck 对,我监听了 WeixinJSBridgeReady 事件,然后在回调里用 video.play() 方法,IOS 可以 安卓不行
chaselen
2020-01-15 15:09:27 +08:00
去年研究过一样的问题,无解
f056917
2020-01-15 15:50:51 +08:00
安卓版微信内置 X5 浏览器,播放的时候自动全屏的问题你解决了?
learnshare
2020-01-15 15:52:39 +08:00
浏览器的安全策略,禁止自动播放,只有手动同步触发才行
xiangyuecn
2020-01-15 15:58:17 +08:00
黑魔法?帧动画要不要,检测到不能自动播放时播放图片帧序列来模拟视频,反正流量不要钱😒😒
zisiluojin
2020-01-15 16:04:36 +08:00
试试调用 wxsdk,在 sdk 初始化时候播放
qiayue
2020-01-15 16:09:03 +08:00
用微信 jssdk,在初始化后播放
justin2018
2020-01-15 16:16:57 +08:00
https://github.com/qiaozi-tech/WXInlinePlayer 这个应该符合楼主需求~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/638103

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX