HTML5视频元素在全屏的Chrome移动设备上冻结

Question

在某些android设备上全屏播放HTML5视频元素时，我遇到了问题。

我创建了一个代码笔来显示问题，您可以here找到它

这只是带有一些js和CSS的HTML5视频元素，要重现此问题，请单击全屏按钮，然后在2/3秒后单击重新加载，等待2/3秒，直到视频冻结为止。 / p>

全屏不是“真正的”全屏，而是在主体上设置的，因为在播放视频时我需要显示元素，这就是为什么不在视频上设置

您的手机可能不受此错误影响。它已经在华为P20上进行了测试，其Android版本为9，Google Chrome版本为73.0.36.83.90，三星Galaxy S8 +

感谢您的帮助

document.addEventListener('DOMContentLoaded', function(e) {
  var isFullscreen = false;
  var video = document.querySelector('video');

  var fullScreen = function fullScreen(elem, cancel) {
    var func = 'RequestFullScreen';
    var elFunc = 'requestFullScreen'; //crappy vendor prefixes.
    isFullscreen = !isFullscreen;
    if (cancel) {
      if (document.exitFullscreen) document.exitFullscreen();
      else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
      else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
    } else {
      try {
        if (elem[elFunc]) elem[elFunc]();
        else if (elem['ms' + func]) elem['ms' + func]();
        else if (elem['moz' + func]) elem['moz' + func]();
        else if (elem['webkit' + func]) var res = elem['webkit' + func]();
      } catch (e) {
        console.log('error fullscreen');
      }
    }
  };

  var buttonFullscreen = document.querySelector('.fullscreen');
  buttonFullscreen.addEventListener('click', function() {
    fullScreen(document.getElementsByTagName("BODY")[0], isFullscreen);
  });

  var buttonReload = document.querySelector('.reload');
  buttonReload.addEventListener('click', function() {
    video.load();
  });
});

video {
  width: 100%;
}

button {
  height: 40px;
  width: 100px;
  position: absolute;
  top: 10%;
  left: 40%;
}

button.reload {
  position: absolute;
  left: 60%;
}

<video class="vjs-tech" muted="muted" data-index="0" src="https://www.w3schools.com/html/mov_bbb.mp4" id="vjs_video_3_html5_api" style="display: block;" tabindex="-1" autoplay>
</video>
<button class="fullscreen">fullscreen</button>
<button class="reload">reload</button>