V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cl903254852
V2EX  ›  程序员

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

  •  
  •   cl903254852 · 2020-01-15 13:54:31 +08:00 · 6360 次点击
    这是一个创建于 1553 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    黑魔法也行。

    28 条回复    2021-02-07 10:53:46 +08:00
    f056917
        1
    f056917  
       2020-01-15 14:07:49 +08:00
    哈哈哈这个我遇到过,用定时器解决
    f056917
        2
    f056917  
       2020-01-15 14:08:38 +08:00
    不对,看错了。。。。。我当时做的是直播,你这个是视频列表
    f056917
        3
    f056917  
       2020-01-15 14:10:56 +08:00
    什么格式的视频? flv 的话用 bilibili 的 flv.js 试试
    ccfoucs
        4
    ccfoucs  
       2020-01-15 14:18:18 +08:00
    非 wifi 环境下浏览器是禁止自动播放的,省流量
    redbuck
        5
    redbuck  
       2020-01-15 14:24:35 +08:00
    与 wifi 无关.

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

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

    除此之外,你可以监听 touchstart 事件,至少在用户接触屏幕之后可以开始播放
    KuroNekoFan
        6
    KuroNekoFan  
       2020-01-15 14:28:12 +08:00
    youtube 的方法是 mute 播放,然后加个提示让用户交互来启用声音
    redbuck
        7
    redbuck  
       2020-01-15 14:28:19 +08:00
    查了下, 设置 muted 视频可以静音自动播放
    [MDN 文档]( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)
    efaun
        8
    efaun  
       2020-01-15 14:29:12 +08:00   ❤️ 2
    自动播放视频就是毒瘤,我遇到一个关一个
    slowhand
        9
    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
        10
    KuroNekoFan  
       2020-01-15 14:32:02 +08:00
    不要尝试其它 workaround 了,用得了一时,用不了升级系统
    cl903254852
        11
    cl903254852  
    OP
       2020-01-15 14:58:50 +08:00
    @f056917 mp4 格式
    cl903254852
        12
    cl903254852  
    OP
       2020-01-15 15:01:43 +08:00
    @slowhand 这些加过了,跟自动播放没有关系,IOS 可以自动播放安卓不行
    cl903254852
        13
    cl903254852  
    OP
       2020-01-15 15:02:46 +08:00
    @redbuck 对,我监听了 WeixinJSBridgeReady 事件,然后在回调里用 video.play() 方法,IOS 可以 安卓不行
    chaselen
        14
    chaselen  
       2020-01-15 15:09:27 +08:00 via Android
    去年研究过一样的问题,无解
    f056917
        15
    f056917  
       2020-01-15 15:50:51 +08:00
    安卓版微信内置 X5 浏览器,播放的时候自动全屏的问题你解决了?
    learnshare
        16
    learnshare  
       2020-01-15 15:52:39 +08:00
    浏览器的安全策略,禁止自动播放,只有手动同步触发才行
    xiangyuecn
        17
    xiangyuecn  
       2020-01-15 15:58:17 +08:00
    黑魔法?帧动画要不要,检测到不能自动播放时播放图片帧序列来模拟视频,反正流量不要钱😒😒
    zisiluojin
        18
    zisiluojin  
       2020-01-15 16:04:36 +08:00
    试试调用 wxsdk,在 sdk 初始化时候播放
    qiayue
        19
    qiayue  
       2020-01-15 16:09:03 +08:00
    用微信 jssdk,在初始化后播放
    justin2018
        20
    justin2018  
       2020-01-15 16:16:57 +08:00
    https://github.com/qiaozi-tech/WXInlinePlayer 这个应该符合楼主需求~
    ajaxfunction
        21
    ajaxfunction  
       2020-01-15 16:19:47 +08:00
    哈哈,微信里最好解决,反而浏览器不行。
    因为微信有 JSSDK,自动播放音频视频都很简单
    cw2k13as
        22
    cw2k13as  
       2020-01-15 16:24:48 +08:00
    @xiangyuecn 你可真是个小机灵鬼,鬼才
    redbuck
        23
    redbuck  
       2020-01-15 17:23:26 +08:00
    @cl903254852 我的安卓可以啊.你是不是加了 setTimeout,video.play 只能在用户行为回调里同步执行,异步不行.
    reus
        24
    reus  
       2020-01-15 20:35:22 +08:00
    我先骂一句傻逼自动播放。
    constantine008
        25
    constantine008  
       2020-01-16 09:22:02 +08:00
    遇到过,反正我最后得出的结论是解决不了。。很多说可以的都是在浏览器里可以,而不是在微信里的浏览器可以,不知道其它大神怎么做到的
    constantine008
        26
    constantine008  
       2020-01-16 09:22:50 +08:00
    说可以的,好歹随便给个可以自动播放的网址开开眼
    Zoopen
        27
    Zoopen  
       2021-01-22 09:17:25 +08:00
    同遇到过该问题,因为浏览器策略的问题,禁止了浏览器自动播放视频。之前用 WXBridgeReady 事件解决了 IOS 的自动播放下一视频的功能,但是安卓无法实现。IOS 自动播放有时候还会出现一直 loading 的情况= = 。扎个坑,到时候回来再看看有没有解决方法。
    justin2018
        28
    justin2018  
       2021-02-07 10:53:46 +08:00
    WXInlinePlayer 又用了一次

    客户需求 o(╥﹏╥)o
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3637 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 10:53 · PVG 18:53 · LAX 03:53 · JFK 06:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.