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

Question

我们开发了一个 website/interactive 播放内联视频的应用程序，在 iOS、Android (Chrome)、Phonegap 和微信中查看时效果很好在英国。

但是，当在中国的微信或腾讯 X5 浏览器中打开时，视频会启动为全屏播放器，并且在视频结束时，会向用户显示其他 "related" 个片段。

有什么方法可以禁用这种行为吗？通过自定义元标记或属性等？

下面的基本示例足以看出问题，在 Chrome 之类的浏览器中进行测试时，与 https://play.google.com/store/apps/details?id=com.tencent.mtt

之类的浏览器相比

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

意识到这是一个远景，这可能不是解决这个问题的最佳场所，我们将不胜感激在正确方向上的任何帮助。

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"。来自（翻译的）文档：

If you do not declare this property, the page gets the viewport area as the original viewport size (before the video is played). For example, in WeChat, there will be a resident title bar. If you do not declare this property, the title bar height will not be given.

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是苹果的创意；
x5-video-player-type 让 <video> 留在文档流中而不是漂浮在其他一切之上；
x5-video-orientation声明视频支持方向；
x5-video-player-fullscreen 播放视频时全屏。

你可以参考my blog on this深入了解。

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

How to force inline media playback in Chinese WeChat and Tencent browsers

android

html5-video

wechat