全屏自定义控件的问题（chrome mobile）

Question

我正在尝试制作自定义控件。我用

隐藏了原件

video::-webkit-media-controls {
  display:none !important;
}

这是视频块的 HTML

<div id="video-container">
  <video width="400px" src="#" id="video"></video>

  <div id="controls">
    <div class="switch" id="play"></div>
    <div id="progress">
      <div id="progress-bar"></div>
    </div>
    <div id="fullscreen"></div>
  </div>
</div>

控件的 CSS

#controls {
  z-index: 2147483647;
  position: absolute;
  width: 100%;
  background: silver;
  display: flex;
  bottom: 0;
  left: 0;
}

这是JS中的toggleFullscreen函数

if((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (video.requestFullscreen) {
        video.requestFullscreen();
    }
    else if (video.mozRequestFullScreen) {
        container.mozRequestFullScreen(); // Firefox
    }
    else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen(); // Chrome and Safari
    }
}
else{
    if(document.cancelFullScreen) {
        document.cancelFullScreen();
    }
    else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
}

所以，当我打开桌面 Chrome 时，它​​工作正常。进入全屏，没问题。我按 f12，“切换设备工具栏”，选择任何手机，全屏，它就在那里。我打开横向模式，那里没什么不好。
然后我在手机上打开它。我看到了。我全屏显示，Aaaand 我看到了。 “可是有什么问题？”你会问吗？ 你看，src="#"？用我的 js 我改变它$video.attr("src", dir); 现在它消失了。全屏没有控件。如果我启用，则会看到原始控件。

Answer 1

好的，我做到了。我正在对视频应用全屏，现在我为视频容器（包含视频和控件）执行此操作。

感谢您的关注。