使用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將是video是ended，所以：

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

它變得有點複雜，因爲webkitExitFullscreen只適用於基於webkit的眉毛（Safari，Chrome，Opera），所以你可以瞭解更多關於它的正確使用方法MDN

來源

2011-11-18 23:05:29 cbaigorri

謝謝cbaigorri。就是這樣！謝謝您的幫助。 – ShockTower

似乎不適用於iOS7 – Dejan

請注意！函數名稱是'webkitExitFullscreen' * not *'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

不適用於IE。 – Someone

我知道這已經回答了，但在這裏是很少的代碼片段最後我用了所有的瀏覽器關閉全屏視頻結束後。

在Chrome，IE11，火狐到目前爲止作品：

$("#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 
    } 
});

您還可以找到當前全屏元素（如果有的話），如：

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

來源：https://www.sitepoint.com/use-html5-full-screen-api/

只是想我會添加答案，因爲這是我在尋找解決方案時遇到的第一個問題。

來源

2017-07-31 23:52:15 elzaer

使用HTML5視頻標籤退出全屏

回答

相關問題