HTML5 - フルスクリーンモードを防止する

ブラウザウィンドウがフルスクリーンモードに入っているかどうかを検出するために、埋め込みYouTubeビデオでFullscreen APIを使用しています。私はそれが素晴らしい仕事をしています。HTML5 - フルスクリーンモードを防止する

私がしたいのは、フルスクリーンモードに入るというデフォルトの動作が行われないようにすることです。自分のフルスクリーンモードのロジックを入れて、YouTubeプレーヤーの上にDOM要素をオーバーレイすることができます。現時点では、フルスクリーンモードを入力した直後に終了することができますが、その結果、ユーザーにとっては貧弱で混乱した経験になります。

YouTubeのPlayer APIパラメータを使用してフルスクリーンボタンを削除し、独自のロジックを使用して独自のボタンを追加する方法がありますが、ユーザーはYouTubeプレーヤーをダブルクリックしてフルスクリーンにすることができます。

はここでブラウザのフルスクリーン状態を検出するための私のコードです：

preventDefault()、 stopPropagation()、および stopImmediatePropagation()は動作しませんでしたので、私はこの時点でこだわっている使用

$(document).on("fullscreenchange webkitfullscreenchange msfullscreenchange mozfullscreenchange", function(event) 
{ 
    onFullScreenChange(event); 
}); 

function onFullScreenChange(event) 
{ 
    var fullScreenElement = 
     document.fullscreenElement || 
     document.msFullscreenElement || 
     document.mozFullScreenElement || 
     document.webkitFullscreenElement; 

    var isFullscreen = !!fullScreenElement; 

    console.log("In fullscreen mode?", isFullscreen); 

    if (isFullscreen === true) 
    { 
     // TODO: Prevent the browser from entering full screen mode. These three lines don't prevent that behavior 
     event.stopImmediatePropagation(); 
     event.stopPropagation(); 
     event.preventDefault(); 
     return false; 

     // The commented code below works. Ideally, we'd want to prevent the browser from even entering full screen mode 
     //document.webkitExitFullscreen(); 
    } 
}

。本当に可能であれば、ブラウザがフルスクリーンモードに入るのを防ぐにはどうすればよいですか？ FS：0

無効にキーボードのコントロール：ここ

出典

2017-06-25 Alexander

をやったことですdisablekb：1

プレーヤーは、フルスクリーンオプションを削除読み込まれた場合：

// Get DOM video player not YT videoplayer 
videoPlayer = document.getElementById('player'); 
// don't allow full screen 
videoPlayer.allowFullscreen = false;

videoPlayer.requestFullScreen()

フルスクリーン休暇がESC場合に発生しますFullscreen_APIとDOMプレーヤー（我々の場合ではインラインフレーム）の

トリガーフルスクリーンキーが押されたか、ビデオが終了する（カスタムイベント処理）

JsFiddleは例作業さ：

<!DOCTYPE html> 
<html> 
<body> 
    <!-- The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 
    <br /> 
    <button id="fullScreenPlayer">Full Screen Player</button> 

    <script> 
     // DOM player 
     var videoPlayer; 
     // This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
      player = new YT.Player('player', 
      { 
       height: '390', 
       width: '640', 
       videoId: 'nAgKA7R4Fz4', 
       // params: https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 
       playerVars: { 'fs': 0, 'disablekb': 1, 'rel': 0 }, 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     // The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
      event.target.playVideo(); 
      // Get DOM video player not YT videoplayer 
      videoPlayer = document.getElementById('player'); 
      // don't allow full screen 
      videoPlayer.allowFullscreen = false; 
      // Listen for fulscreen changes, if you need custom logic here, but I won't recommned that, it's to complex and you don't have control inside YT iframe 
      videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false); 
      videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false); 
      videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false); 
      videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false); 
     } 

     // If the video reach the end then player will leave full screen 
     function onPlayerStateChange(event) { 
      if (event.data == YT.PlayerState.ENDED) { 
       leaveFullscreen(); 
      } 
     } 
     function stopVideo() { 
      player.stopVideo(); 
     } 

     // fullscreen event handller 
     function fullScreeCallback(e) { 
      // do what you like when you catch the event 
      console.log(e); 
      return false; 

     } 

     var goFullscreen = function() { 
      if (videoPlayer === undefined) throw "player is undefined"; 
      if (videoPlayer.requestFullScreen) { 
       videoPlayer.requestFullScreen(); 
      } else if (videoPlayer.mozRequestFullScreen) { 
       videoPlayer.mozRequestFullScreen(); 
      } else if (videoPlayer.webkitRequestFullScreen) { 
       videoPlayer.webkitRequestFullScreen(); 
      } 
     } 

     var leaveFullscreen = function() { 
      if (document.cancelFullScreen) { 
       document.cancelFullScreen(); 
      } else if (document.mozCancelFullScreen) { 
       document.mozCancelFullScreen(); 
      } else if (document.webkitCancelFullScreen) { 
       document.webkitCancelFullScreen(); 
      } 
     } 

     document.getElementById('fullScreenPlayer').addEventListener("click", function(e) { 
      goFullscreen(); 
     }, false); 


    </script> 
</body> 
</html>

出典

2017-06-27 08:57:13 SilentTremor

あなたのすばらしい答えをありがとう！これは本当にうまく動作し、私がこの質問で言及した回避策です。 YouTubeのフルスクリーンボタンを使用している間に動作させる方法はありますか？ YouTubeのボタンをクリックすると、フルスクリーンチェンジイベントが発生します。 YouTubeの全画面ボタンを使用しているときに、YouTubeプレーヤーがフルスクリーンモードになるのを防ぎ、その代わりにDOM要素の1つからフルスクリーンをリクエストしたいと考えています。 – Alexander

フルスクリーンボタンが表示され、プレイヤーのvarsから 'fs'：0が削除されますが、そうしないとフルスクリーンにならないため、クリックや他のイベントのイベントをiframe内で聞くことができません。回避策は、これがフルスクリーンを防ぐために行うことができる唯一の方法です。私はその解決策を試してみてください。しかし、私はそれがないことを確信しています。 – SilentTremor

yt.player "fs"ボタンが不可能な場合にソースをフルスクリーンで表示すると、ダブルクリック、フルスクリーンfsコントロール、またはキーボードショートカットプレスでフルスクリーンを表示する必要はありません。これはプレイヤー上でいくつかのHTMLをオーバープレイされますが、あなたがフルスクリーンを使用して別のプレイヤーをコントロールしたい場合は、youtube iframe apiで唯一のオプションであるフルスクリーントリガーを追加してください。良い一日を。 – SilentTremor

は、私は:)

<script type="text/javascript"> 
    // Entering fullscreen mode 
    $('#videoSrcBlk').click(function() { 
     $("#full-screen").click(function() { 
      $(this).attr('id'); 
      var vid = document.getElementById('selfVideo');  
      vid.removeAttribute("controls"); 

      if (vid.requestFullscreen) { 
       vid.requestFullscreen(); 
      } else if (vid.mozRequestFullScreen) { 
       vid.mozRequestFullScreen(); // Firefox 
      } else if (vid.webkitRequestFullscreen) { 
       vid.webkitRequestFullscreen(); // Chrome and Safari 
      } 
     }); 
    });

希望このヘルプ:) youtube iframe api

無効にフルスクリーンボタンを使用して

出典

2017-06-25 05:51:09 TheGinxx009

ご回答いただきありがとうございますが、私はあなたの質問を読むことができません。フルスクリーンモード（キーボード、ビデオプレーヤーをクリック）に入るにはいくつかの方法がありますが、これらはすべて処理されません。 – Alexander

私はそれを得る。大丈夫よ、この種の行為を防ぐためのコードを貼り付けてください。 – TheGinxx009

HTML5 - フルスクリーンモードを防止する

答えて

関連する問題