JavaScriptでフルスクリーンボタンを操作するにはどうすればよいですか？

Question

ビデオのソースを変更できるようにフルスクリーンサイズのボタンを操作するにはどうすればよいですか？ 目的は2つのビデオ、切り取られたものとフルサイズのものを持つことです。動画がフルスクリーン（カスタムコマンド）でない場合は、クロップされた動画が表示されます。フルスクリーン（デフォルトのHTML5コマンド）では、ソースがフルサイズの動画に変更されます。 問題は、私は、このボタンをクリックすることである：

ソースは変更されません。これは関連するコードです：

var video = document.getElementById("video1"); 
function fullScreen(){ 
    if (!document.webkitFullScreen){ 
     if (video.webkitRequestFullScreen) 
      video.src = "video1.mp4"; 
    } else { 
     if (document.webkitCancelFullScreen()) 
      video.src = "video2.mp4"; 

コードの最初のビットが機能します。フルスクリーンでは、ビデオのソースが変更されます。しかし、フルスクリーンを終了すると、ビデオのソースは変わりません。フルスクリーンに入るのと同じボタンをクリックしていないので、そうではないかと思うので、else文には出ません。誰でも、画像に示されているフルスクリーン機能を呼び出す方法を知っていて、これを条件文として使用できますか？

Answer 1

あなたがしたいことは、モードが変わったときに発生するイベントを追跡することです。現時点では、3つのブラウザ固有のイベントがあるようですが、このコードでは何が起こっているのかを追跡できます。

document.addEventListener('webkitfullscreenchange', tog, false); 
document.addEventListener('fullscreenchange', tog, false); 
document.addEventListener('mozfullscreenchange', tog, false); 
document.addEventListener('MSFullscreenChange', tog, false); 

function tog(e) { 
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; 
    var event = state ? 'FullscreenOn' : 'FullscreenOff'; 

    // Now react to the event 
    console.log('Event: ' + event); 

    if (event == "FullscreenOn") { 
     video.src = "video1.mp4"; 
    } else { 
     video.src = "video2.mp4"; 
    } 
}