HTML5 video on full screen rotaate the screen like on youtube in mobile device using jquery / javascript?

问题

I have a html5 custom video player, now I would like on clicking the full-screen icon on mobile to rotate the screen to landscape and vice versa as in youtube.

Here is my 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>

Here is 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);
}

Unfortunately, my solution is not working as expected, there is a full screen but rotation is not working properly as on youtube.

Can someone help me to solve this problem? any help or suggestions will be appreciated

回答1:

You can use screen.orientation.lock('landscape') to enable landscape once you are entering full-screen mode. It works for android only.

As there are some limitations on iOS for enabling full-screen mode, it's better to use default behaviours for videos on iOS as youtube does.

$(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>

回答2:

Mate, You have just not provided correct ID in the video player, Instead of id="player" provide id="video-block", That is the reason why rotation CSS is not being applied. In below mentioned Tag

<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">enter code here

来源：https://stackoverflow.com/questions/61469628/html5-video-on-full-screen-rotaate-the-screen-like-on-youtube-in-mobile-device-u