HTML5 видео на весь экран поворачивает экран, как на YouTube в мобильном устройстве, используя jquery / javascript? - PullRequest
Новая
       16

HTML5 видео на весь экран поворачивает экран, как на YouTube в мобильном устройстве, используя jquery / javascript?

1 голос
/ 28 апреля 2020

У меня есть html5 пользовательский видеоплеер, теперь я хотел бы нажать на полноэкранный значок на мобильном телефоне, чтобы повернуть экран в альбомную ориентацию и наоборот, как в YouTube.

Вот живая демонстрация демо полноэкранный

Вот мой HTML

  <div id="videocontainer">
    <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.

Может кто-нибудь помочь мне решить эту проблему? Любая помощь или предложения будут оценены

1 Ответ

0 голосов
/ 06 мая 2020

Вы можете использовать screen.orientation.lock('landscape'), чтобы включить landscape после входа в полноэкранный режим. Работает только на android.

Поскольку на iOS существуют некоторые ограничения для включения полноэкранного режима, лучше использовать поведение по умолчанию для видео на iOS, как на YouTube. 

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