HTML5ビデオタグを使用して全画面を終了

ビデオの最後にビデオを全画面で終了しようとしていますが、終了しません。私は検索し、これを行う方法を見つけましたが、私の人生のために私はそれを働かせることはできません。 iPad2のChrome（15）とiOS 5の最新バージョンでテストしています。すべてのヘルプは理解されるであろうHTML5ビデオタグを使用して全画面を終了

<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#myVideoTag").on('ended', function(){ 
    webkitExitFullScreen(); 
    }); 
}); 

</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>854x480</title> 
</head> 
<body> 
<video width="854" height="480" 
     src="video/854x480-Template_1.mp4" 
     poster="images/poster.jpg" 
     id="myVideoTag" 
     type="video/mp4" 
     preload="auto" 
     autobuffer 
     controls> 
    <p>Requires HTML5 capable browser.</p> 
</video> 

</body> 
</html>

：は、ここに私が使用しているコードです。それはこのよう呼び出す必要がありますので

出典

2011-11-17 ShockTower

webkitExitFullScreenは、video要素のメソッドです：

videoElement.webkitExitFullscreen(); 
//or 
$("#myVideoTag")[0].webkitExitFullscreen(); 
//or, without needing jQuery 
document.getElementsById('myVideoTag').webkitExitFullscreen();

、イベントハンドラ内なので、thisはvideoendedそのため、次のようになります。

$("#myVideoTag").on('ended', function(){ 
    this.webkitExitFullscreen(); 
});

webkitExitFullscreenはWebkitベースの眉でしか動作しないため、もう少し複雑になりますあなたは正しい使い方についてもっと学ぶことができるので、正しい使い方についてもっと学ぶことができます。MDN

出典

2011-11-18 23:05:29 cbaigorri

ありがとうcbaigorri。それだった！助けてくれてありがとう。 – ShockTower

iOS7で動作しないようです – Dejan

注意！関数名は 'webkitExitFullscreen' *' webkitExitFullScreen'ではありません。（小文字の "s"に注意してください） –

cbaigorriありがとうございました、.webkitExitFullscreen（）;を使用するとうまくいきました。

<script type="text/javascript"> 
function CloseVideo() { 
    document.getElementsByTagName('video')[0].webkitExitFullscreen(); 
} 
</script> 

<video controls onended=CloseVideo() > 
    <source src="video.mp4" type="video/mp4"> 
</video>

出典

2013-06-28 07:29:43

fot IEが動作しません。 – Someone

は、私が知っている、これは既に回答されていますが、ここで私はフルスクリーンビデオを閉じるために、すべてのブラウザのために使用してしまった小さなコードスニペットは、次のとおりです。

は、私は、ビデオの再生が行われたときにフルスクリーンを終了するには、次の使用しましたそれが終わった後。これまでのクロム、IE11、Firefoxの上

作品：

var fullscreenElement = document.fullscreenElement || 
    document.mozFullScreenElement || document.webkitFullscreenElement;

出典：https://www.sitepoint.com/use-html5-full-screen-api/

$("#myVideoTag").on('ended', function(){ 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); // Standard 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); // Blink 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); // Gecko 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); // Old IE 
    } 
});

また、現在フルスクリーン要素（もしあれば）などを見つけることができますちょうど私が答えを追加すると思ったのは、これを解決するために私が見つけた最初の質問だったからです。

出典

2017-07-31 23:52:15 elzaer

HTML5ビデオタグを使用して全画面を終了

答えて

関連する問題