web-dev-qa-db-ja.com

全画面表示のHTML5ビデオは、jquery / javascriptを使用してモバイルデバイスのYouTubeのように画面を回転させますか？

私は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のように回転が適切に機能していません。

誰かがこの問題を解決するのを手伝ってくれる？どんな助けや提案もありがたいです

javascripthtmljquerymobilehtml5-video
3
The Dead Man

メイト、ビデオプレーヤーで正しいIDを提供していないid = "player"の代わりに---提供id = "video-block"、それがローテーションCSSが適用されない理由です。下記のタグで

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