Html5视频播放器：自定义控件未在Android手机上以完整模式显示

Question

我为网站上的视频制作了播放器。我使用的是Html5技术。 一切都在PC上运行良好。  但是，如果我在完整模式下在Android手机上打开我的播放器，则控件不会显示。 IMAGE

为什么会这样？我需要帮助 ：） 打开我的播放器代码：CODE PEN

Answer 1

视频和自定义控件应该放在那个容器中。它不是你带到全屏的视频而是它的容器。我希望这对你有帮助。

Html代码

<div id="videoContainer">
          <video>...<source></source>
          </video>
          <div> custom controls 
                <button>play/pause</button>
                <button id="fullscreenBtn" class="enterFullscreenBtn">fullscreen</button>
          </div>
    </div>

Js Code

var video=$('video');
$('#fullscreenBtn').on('click', function() {
 if (video.requestFullscreen)
 {
     $("#videoContainer").webkitRequestFullScreen();
 } 
});