androidhtml5-videowechat

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


We've developed a website/interactive application that plays inline videos, this works fine on iOS, Android (Chrome), Phonegap and when viewed in WeChat in the UK.

However, when opened in WeChat in China, or the Tencent X5 browser, the videos are launching into a fullscreen player, and at the end of the video, other "related" clips are shown to the user.

Is there anyway to disable this behaviour? Through something like a custom meta tag or attribute etc?

The basic example below is enough to see the issue, when tested in a browser like Chrome, compared to something like 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>

Realise this is a long shot and this may not be the best place for this question, any help in the right direction would be appreciated.


Solution

  • From the Tencent Browser docs here: https://x5.tencent.com/tbs/guide/video.html, you can use the attribute x5-video-player-type="h5" on the video element to prevent the default (non standard) behaviour when viewed in applications that use this WebView, such as WeChat. Fore example:

    <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>
    

    There are also some other attributes that be used to control the behaviour such as x5-video-player-fullscreen="true". From the (translated) docs:

    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.