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

[rizon]

一个展示型网页，里面的很多小模块都是做了没有控制条的视频(playsinline muted loop autoplay 等属性)，但是到了手机端，这些视频会被第三方浏览器处理成各种行为： 播放器替换导致很难看，无法自动播放，最过分的是有些浏览器会在网页打开后强制全屏播放视频。。。

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

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


所以，我的问题是：如果是这种修饰网页的视频，怎么保证他们在移动端的体验？难道只能放弃视频换成其他形式吗，有没有能够做到的视频插件？

[okakuyang]

video 标签 要加 playsinline 属性

[rizon]

@okakuyang 这些常用属性，包括一些 x5 兼容属性好像都没用的，有些浏览器根本不讲道理。

[rizon]

append: 我还有个奇怪的问题，有些人的微信浏览器和安卓浏览器里视频完全加载不出来(黑屏或者白屏)，这个实在不理解为什么

[okakuyang]

有些浏览器确实会给你视频加贴片广告，但是我没有遇到过，一般来说加 playsinline 和 webkit-playsinline 两个属性就可以规避移动浏览器全屏播放的行为了。

[krapnik]

https://h5player.bytedance.com/generate/

[okakuyang]

@rizon 可能几种情况，网络问题视频加载不出来，视频格式不被设备支持，可能用了 10 位色的 h265 视频之类的，挂视频的服务器不支持分片，不支持断点续传，导致苹果系无法播放。

[rizon]

@okakuyang 我苹果 13 ，微信内置浏览器正常，另一个苹果 14 的微信内置浏览器，视频直接显示为一个加载不出视频的灰色播放器。。非常奇怪

[okakuyang]

@rizon 这个你可以把相关代码和视频地址发出来帮你看看。

[codehz]

不在乎延迟的话，可以考虑不把 video 插入到 dom 里，直接捕获画面并糊到 canvas 上（）

[rizon]

所以，有人有办法吗。我还是没办法。
就是解决被百度、uc 等这些手机浏览器将视频给抠出来导致破坏了页面正常交互这个问题。

是不是只有大公司和他们协议加入他们 app 的白名单才可以？？

[rizon]

@okakuyang 其实我要解决的是被百度、uc 等这些手机浏览器将视频给抠出来导致破坏了页面正常交互这个问题。我只是想拿视频当作网页的一个修饰效果用而已