CODEWITHSUNDEEP
androidhtml5-videowechat
SteveEdson
SteveEdson

Reputation: 2495

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.

Upvotes: 2

Views: 1835

Answers (3)

Hongming Wang
Hongming Wang

Reputation: 21

if the video is the first thing users see when they open the browser, for example, a banner, other answers won't work. I suspect it's due to the WeChat browser needing user gestures to init video play.

so the way to fix it:

<video
  autoPlay
  muted
  loop
  playsInline
  webkit-playsinline="true"
  x-webkit-airplay="true"
  x5-video-player-type="h5"
  src={TEST_VIDEO_URL}
  poster={POSTER_URL}
></video>

<script>
  // using typescript, Next.js
  // get first dom element with class video
  const video: any = document.querySelectorAll(".video")[0];
  if (!video) {
    return;
  }

  //play video function
  function doPlay() {
    //getNetworkType is a wechat jsbridge api to get network type
    //we do not need to do anything with the result, just call it to trigger the video play action
    (window as any).WeixinJSBridge?.invoke(
      "getNetworkType",
      {},
      function (e: any) {
        //check if video is already playing
        const isVideoPlaying =
          video.currentTime > 0 &&
          !video.paused &&
          !video.ended &&
          video.readyState > 2;

        //if video is not playing, play it
        if (!isVideoPlaying) {
          video.play();
        }
      }
    );
  }

  // check if WeixinJSBridge exist and is ready
  // WeixinJSBridge is a global object in wechat browser
  // the reason we use it here is because we need to
  // trigger video play action in WeixinJSBridge invoke callback
  // otherwise the video will not play
  if ((window as any).WeixinJSBridge) {
    doPlay();
  } else {
    // add event listener for WeixinJSBridgeReady 
    // in case it's not ready yet
    document.addEventListener(
      "WeixinJSBridgeReady",
      function () {
        doPlay();
      },
      false
    );
  } 
</script>

here is a blog I wrote to for trying to solve this problem "https://www.hongming-wang.com/blogs/2"

Upvotes: 0

nanmu42
nanmu42

Reputation: 1

As the start point for fixing, you may add those attributes to your video tag:

<!-- 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 is Apple's idea;
  • x5-video-player-type lets <video> stay in document flow rather than float above everything else;
  • x5-video-orientation declares supporting orientation of video;
  • x5-video-player-fullscreen makes video fullscreen when playing.

You may refer to my blog on this for deep dive.

Upvotes: 0

Scaalees
Scaalees

Reputation: 76

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.

Upvotes: 3

Related Questions