全屏HTML5视频使用jquery/javascript在移动设备上像youtube上一样旋转屏幕?

问题描述

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

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.

这是我的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上那样正常运行.

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

推荐答案

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

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

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

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>

这篇关于全屏HTML5视频使用jquery/javascript在移动设备上像youtube上一样旋转屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！