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

累求,视频在第三方手机浏览器内被拦截导致破坏页面效果问题

  •  
  •   rizon ·
    othorizon · 2023-10-13 09:49:40 +08:00 via iPhone · 1716 次点击
    这是一个创建于 392 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一个展示型网页,里面的很多小模块都是做了没有控制条的视频(playsinline muted loop autoplay 等属性),但是到了手机端,这些视频会被第三方浏览器处理成各种行为: 播放器替换导致很难看,无法自动播放,最过分的是有些浏览器会在网页打开后强制全屏播放视频。。。

    我不是资深前端,搞不明白这里面的花花肠子,也不懂各种内核浏览器的行为逻辑。

    这问题虽然很常见,但是我还是没有在网上得到一个很好的版本答案。


    所以,我的问题是:如果是这种修饰网页的视频,怎么保证他们在移动端的体验?难道只能放弃视频换成其他形式吗,有没有能够做到的视频插件?
    11 条回复    2023-10-30 14:36:06 +08:00
    okakuyang
        1
    okakuyang  
       2023-10-13 09:52:42 +08:00 via iPhone
    video 标签 要加 playsinline 属性
    rizon
        2
    rizon  
    OP
       2023-10-13 09:55:06 +08:00 via iPhone
    @okakuyang 这些常用属性,包括一些 x5 兼容属性好像都没用的,有些浏览器根本不讲道理。
    rizon
        3
    rizon  
    OP
       2023-10-13 09:57:09 +08:00 via iPhone
    append: 我还有个奇怪的问题,有些人的微信浏览器和安卓浏览器里视频完全加载不出来(黑屏或者白屏),这个实在不理解为什么
    okakuyang
        4
    okakuyang  
       2023-10-13 09:57:46 +08:00 via iPhone
    有些浏览器确实会给你视频加贴片广告,但是我没有遇到过,一般来说加 playsinline 和 webkit-playsinline 两个属性就可以规避移动浏览器全屏播放的行为了。
    krapnik
        5
    krapnik  
       2023-10-13 09:59:40 +08:00
    okakuyang
        6
    okakuyang  
       2023-10-13 10:01:15 +08:00 via iPhone
    @rizon 可能几种情况,网络问题视频加载不出来,视频格式不被设备支持,可能用了 10 位色的 h265 视频之类的,挂视频的服务器不支持分片,不支持断点续传,导致苹果系无法播放。
    rizon
        7
    rizon  
    OP
       2023-10-13 10:03:06 +08:00 via iPhone
    @okakuyang 我苹果 13 ,微信内置浏览器正常,另一个苹果 14 的微信内置浏览器,视频直接显示为一个加载不出视频的灰色播放器。。非常奇怪
    okakuyang
        8
    okakuyang  
       2023-10-13 10:07:56 +08:00 via iPhone
    @rizon 这个你可以把相关代码和视频地址发出来帮你看看。
    codehz
        9
    codehz  
       2023-10-13 18:41:07 +08:00
    不在乎延迟的话,可以考虑不把 video 插入到 dom 里,直接捕获画面并糊到 canvas 上()
    rizon
        10
    rizon  
    OP
       2023-10-30 14:34:32 +08:00
    所以,有人有办法吗。我还是没办法。
    就是解决被百度、uc 等这些手机浏览器将视频给抠出来导致破坏了页面正常交互这个问题。

    是不是只有大公司和他们协议加入他们 app 的白名单才可以??
    rizon
        11
    rizon  
    OP
       2023-10-30 14:36:06 +08:00
    @okakuyang 其实我要解决的是被百度、uc 等这些手机浏览器将视频给抠出来导致破坏了页面正常交互这个问题。我只是想拿视频当作网页的一个修饰效果用而已
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2335 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:53 · PVG 23:53 · LAX 07:53 · JFK 10:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.