javascript - 全屏上的 HTML5 视频使用 jquery/javascript 旋转屏幕，就像在移动设备中的 YouTube 上一样？

Question

我有一个 html5 自定义视频播放器，现在我想单击移动设备上的全屏图标将屏幕旋转为横向，反之亦然，就像在 YouTube 中一样。

这是我的 HTML

  <div id="video-block">
    <video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
      <source src="INPUT VIDEO URL HERE"/>
      Your browser does not support the HTML5 video tag.  Use a better browser!
    </video>
    <button onclick="goFullscreen('player'); return false">
      View Fullscreen!
    </button>
 </div>

这里是js

$(document).ready(function() {

    // rotate function

    function rotateVideoPlayer() {
        var width = $(window).width();
        var height = $(window).height();

        $("#video-block").width(0);
        $("#video-block").height(0);

        console.log(width, height);
        // document.body.scrollTop = document.documentElement.scrollTop = 0
        if (width > height) {
            console.log("landscape");
            $("#video-block").width(width);
            $("#video-block").height(width * 9 / 16);


            $("#video-block").css("left", 0 + "px");
            $("#video-block").removeClass("rotated");

        } else {

            console.log("portrait");
            $("#video-block").width(height);
            $("#video-block").height(height * 9 / 16);


            $("#video-block").css("left", width - (width - height * 9 / 16) / 2 + "px");
            $("#video-block").addClass("rotated");
            document.body.scrollTop = document.documentElement.scrollTop = 0

        }
    }


    $('#btn').on('click', function(){
        rotateVideoPlayer();
        var element = document.getElementById('videocontainer');
        if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        }
    })
});

CSS

#video-block.rotated{
    -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

不幸的是，我的解决方案没有按预期工作，有一个全屏，但旋转不能像在 YouTube 上那样正常工作。

有人可以帮我解决这个问题吗？任何帮助或建议将不胜感激

Answer 1

进入全屏模式后，您可以使用screen.orientation.lock('landscape')启用landscape。它仅适用于安卓。

由于 iOS 上启用全屏模式存在一些限制，因此最好像 YouTube 一样对 iOS 上的视频使用默认行为。

$(function() {

  function makeLandscape() {
    // this works on android, not iOS
    if (screen.orientation && screen.orientation.lock) {
      screen.orientation.lock('landscape');
    }
  }

  $(document).on('click', '#btn', function() {
    var element = document.getElementById('video-container');
    if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
      makeLandscape();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
      makeLandscape();
    }

  });

});

<div id="video-container">
  <video class="video_player" id="player" width="100%" autoplay="autoplay" playsinline="">
          <source src="https://wp-iframe.videomill.co/vpaidexamples/videos//vmerce.mp4" />
          Your browser does not support the HTML5 video tag. Use a better browser!
        </video>
  <button id="btn">
          View Fullscreen!
        </button>
</div>