Question

我们已经开发了一个网站/交互式应用程序，可以播放内联视频，在iOS，Android（Chrome），Phonegap以及在英国的微信中观看时，都可以正常运行。

但是，当在中国的微信或腾讯X5浏览器中打开视频时，这些视频将启动到全屏播放器中，并在视频结尾向用户显示其他“相关”剪辑。

反正有禁用此行为的行为吗？通过自定义元标记或属性等？

与诸如https://play.google.com/store/apps/details?id=com.tencent.mtt

之类的东西相比，下面的基本示例足以说明在Chrome之类的浏览器中进行测试时的问题。

Person

意识到这是一个遥不可及的问题，可能不是这个问题的最佳解决方法，朝着正确方向的任何帮助将不胜感激。

Answer 1

从此处的https://x5.tencent.com/tbs/guide/video.html腾讯浏览器文档中，您可以在视频元素上使用属性x5-video-player-type="h5"来防止在使用该WebView的应用程序中查看时的默认（非标准）行为，例如微信。例如：

<video x5-video-player-type="h5" autoplay webkit-playsinline playsinline style="width: 500px">
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4">
</video>

还有一些其他属性可用于控制行为，例如x5-video-player-fullscreen="true"。从（翻译的）文档中：

如果不声明此属性，则页面将视口区域作为原始视口大小（在播放视频之前）。例如，在微信中，将有一个居民标题栏。如果不声明此属性，则不会给出标题栏的高度。

Answer 2

作为修复的起点，您可以将这些属性添加到视频代码中：

<!-- irrelevant attributes for solving this problem are omitted -->
<video
    playsinline="true"
    webkit-playsinline="true"
    x5-playsinline="true"
    x5-video-player-type="h5"
    x5-video-orientation="landscape|portrait"
    x5-video-player-fullscreen="true"
></video>

playsinline是Apple的主意；
x5-video-player-type让<video>停留在文档流中，而不是浮在其他一切之上；
x5-video-orientation声明了视频的支持方向；
x5-video-player-fullscreen在播放时将视频全屏显示。

您可以参考my blog on this进行深入探讨。

如何在中文微信和腾讯浏览器中强制内联媒体播放

2 个答案: