嵌入式Youtube播放器不能從全屏幕退出

嗯，我認爲這是一個重大的YouTube錯誤，但我沒有找到任何有關它的報告。嵌入式Youtube播放器不能從全屏幕退出

我有一個網頁應用程序，它使用JavaScript全屏API在全屏瀏覽器中顯示。

在網絡應用程序中有一個嵌入式Youtube播放器。當您以全屏模式打開Youtube播放器時，再次單擊Youtube的全屏按鈕退出播放器的全屏，但它不響應！

我相信這與瀏覽器已經處於全屏模式，因此存在某種衝突有關。

我創建了可以在這裏看到一個簡單的例子： http://run.plnkr.co/CjrrBGBvrSspfa92/

點擊「GO FULLSCREEN」按鈕。
播放視頻並單擊全屏按鈕。視頻將全屏顯示。
再次點擊全屏按鈕。它不會退出。

編輯：以上的HTML文件中的代碼是在這裏：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-6B2zyoFsI" frameborder="0" allowfullscreen></iframe> 
<button id="btn">GO FULLSCREEN</button> 

<script type="text/javascript"> 
    document.getElementById("btn").addEventListener("click", function() { 
     var elem = document.documentElement; 
     if (elem.requestFullscreen) { 
      elem.requestFullscreen(); 
     } else if (elem.msRequestFullscreen) { 
      elem.msRequestFullscreen(); 
     } else if (elem.mozRequestFullScreen) { 
      elem.mozRequestFullScreen(); 
     } else if (elem.webkitRequestFullscreen) { 
      elem.webkitRequestFullscreen(); 
     } 
    }); 
</script> 
</body> 
</html>

來源

2015-06-21 Light

-1

因爲你的按鈕單擊處理只有進入全屏模式，但是從中不退出。

嘗試使用exitFullscreen()功能和fullscreenElement屬性。

事情是這樣的：

UPDATE：

只是Firefox測試。它有自己的attrs（mozFullScreenElement和mozCancelFullScreen）

document.getElementById("btn").addEventListener("click", function() { 
    var elem = document.documentElement; 
    if (document.mozFullScreenElement) { // null if not in fullscreen 
     document.mozCancelFullScreen(); 
    } else { 
     elem.mozRequestFullScreen(); 
    } 
    // and other prefixes omitted 
});

同樣的邏輯也應該在其他瀏覽器。

來源

2015-06-21 11:19:01 phts

謝謝，但它與我所描述的問題無關。問題是，當您已經處於全屏模式時，YOUTUBE播放器中的全屏按鈕不響應。按照我所描述的步驟重現。 – Light

事情是我做了一些搜索，它接縫Youtube不知道當使用JavaScript Fullscreen API時，視頻是全屏還是不全屏Google也沒有提供API調用以進入全屏模式。所以，當你點擊按鈕並全屏顯示時，你會看到播放器的全屏按鈕沒有按下。所以，爲了回到窗口視圖，用戶有兩個選擇： 1）點擊按鈕2次（第一次，玩家嘗試全屏進入，按鈕改變狀態，第二次，播放器進入窗口模式） - 這是解決方案 2）單擊鍵盤上的Esc。

我檢查了HTML5播放器。

此外，我嘗試在YouTube的iframe中注入一個按鈕，以便我可以選擇它以便退出全屏，但它不起作用......實際上會很愚蠢。

這應該工作：

<div id="videoplayer"></div> 
<p><button id="btn">GO FULLSCREEN</button></p> 

<script type="text/javascript"> 
var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var player; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('videoplayer', { 
     height: '380', 
     width: '500', 
     videoId: 'h7ArUgxtlJs', 
     fs: 1 
    }); 
} 

document.getElementById("btn").addEventListener("click", function() { 
    var elem = document.getElementById('videoplayer'); 
    var requestFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen; 
    if (requestFullScreen) { 
    requestFullScreen.bind(elem)(); 
    } 
}); 
</script>

您可以使用經典的嵌入，我相信。

Working demo

來源

2015-06-26 23:40:41 mihaidp

謝謝你的回答，我很欣賞你真正回答了這個問題。但它不適用於我。我點擊了視頻進行播放，然後點擊了「全屏」按鈕。然後點擊播放器上的全屏按鈕，首先點擊它什麼也不做，然後點擊它退出瀏覽器的全屏幕，但是yt播放器保持全屏顯示。 – Light

這個問題已經回答了一段時間了，但只是一個小小的頭腦，「工作演示」 – dmr07

這可能會幫助：「退出全屏模式」：

// Whack fullscreen 
function exitFullscreen() { 
    if(document.exitFullscreen) { 
    document.exitFullscreen(); 
    } else if(document.mozCancelFullScreen) { 
    document.mozCancelFullScreen(); 
    } else if(document.webkitExitFullscreen) { 
    document.webkitExitFullscreen(); 
    } 
} 

// Cancel fullscreen for browsers that support it! 
exitFullscreen();

Source。

旁註：的Youtube的API仍處於什麼，你甚至可以在2015年（定製方面非常稀少，由於它是如何依賴於這麼多的iFrame，他們不希望你reskin他們播放器）。如果你使用一堆時髦的JavaScript黑客來獲得你想要的東西，可能會變得混亂和不穩定。使用許多可自定義的視頻播放器中的一種可以更好地控制JS;像JW player,Video.js,Flow player, popcorn.js等

來源

2015-06-30 18:45:45

嵌入式Youtube播放器不能從全屏幕退出

回答

相關問題