Trình phát Youtube được nhúng không thoát khỏi chế độ toàn màn hình

Vâng, tôi nghĩ đây là lỗi chính của Youtube nhưng tôi không tìm thấy bất kỳ báo cáo nào về nó.Trình phát Youtube được nhúng không thoát khỏi chế độ toàn màn hình

Tôi có ứng dụng web được hiển thị trong trình duyệt toàn màn hình bằng API toàn màn hình JavaScript.

Trong ứng dụng web có trình phát Youtube được nhúng. Khi bạn mở trình phát Youtube ở chế độ toàn màn hình, sau đó nhấp lại vào nút toàn màn hình của YouTube để thoát khỏi chế độ toàn màn hình của người chơi, nó không phản hồi!

Tôi chắc chắn rằng nó liên quan đến thực tế là trình duyệt đã ở chế độ toàn màn hình nên có một số loại xung đột.

tôi đã tạo ra một ví dụ đơn giản mà có thể được xem tại đây: http://run.plnkr.co/CjrrBGBvrSspfa92/

Nhấp vào nút "GO toàn màn hình".
Phát video và nhấp vào nút toàn màn hình. Video sẽ có chế độ toàn màn hình.
Nhấp lại vào nút toàn màn hình. Nó sẽ không thoát.

EDIT: Mã cho file html ở trên là ở đây:

<!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>

Nguồn

2015-06-21 Light

-1

Bởi vì nút điều khiển nhấp chuột của bạn chỉ đi toàn màn hình nhưng không thoát khỏi nó.

Cố gắng sử dụng chức năng exitFullscreen() và thuộc tính fullscreenElement.

Something như thế này:

UPDATE:

Tested chỉ trong Firefox. Nó có attrs riêng của mình (mozFullScreenElement và 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 
});

Logic cùng phải ở trong các trình duyệt khác.

Nguồn

2015-06-21 11:19:01 phts

Cảm ơn nhưng không liên quan đến vấn đề tôi đã mô tả. Vấn đề là nút toàn màn hình trong trình phát YOUTUBE không phản hồi khi bạn đang ở chế độ toàn màn hình. Làm theo các bước tôi đã mô tả để tái sản xuất. – Light

Điều này là tôi đã thực hiện một số tìm kiếm và đường nối Youtube không biết video có ở chế độ toàn màn hình hay không khi sử dụng API toàn màn hình JavaScript Google cũng không cung cấp cuộc gọi API để vào hoặc ra khỏi chế độ toàn màn hình. Vì vậy, khi bạn nhấp vào nút và nút đó ở chế độ toàn màn hình, bạn sẽ thấy nút toàn màn hình của người chơi chưa được nhấn. Vì vậy, để quay lại chế độ xem cửa sổ, người dùng có hai tùy chọn: 1) nhấp vào nút 2 lần (lần đầu tiên, trình phát cố gắng ở chế độ toàn màn hình và nút thay đổi trạng thái, lần thứ hai, máy nghe nhạc đi trong chế độ cửa sổ) - đây là giải pháp 2) nhấp Esc trên bàn phím.

Tôi đã kiểm tra với trình phát HTML5.

Hơn nữa, tôi đã thử tiêm một nút bên trong iframe của YouTube để tôi có thể chọn nó để thoát khỏi chế độ toàn màn hình, nhưng nó không hoạt động ... có thể là ngớ ngẩn.

này nên làm việc:

<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>

Bạn có thể sử dụng nhúng cổ điển, I belive.

Working demo

Nguồn

2015-06-26 23:40:41 mihaidp

Cảm ơn bạn đã trả lời tôi đánh giá cao sự thực sự của bạn đối với câu hỏi. Tuy nhiên nó không hiệu quả với tôi. Tôi đã nhấp vào video để phát video, sau đó nhấp vào nút "đi toàn màn hình". Sau đó nhấp vào nút toàn màn hình trên trình phát, khi nhấp vào lần đầu tiên, nó sẽ không hoạt động và nhấp vào lần thứ hai, nó sẽ thoát toàn màn hình của trình duyệt nhưng trình phát yt vẫn ở chế độ toàn màn hình. – Light

Đã lâu rồi kể từ khi câu hỏi được trả lời, nhưng chỉ là một người đứng đầu, liên kết bị hỏng trên "demo làm việc" – dmr07

này có thể giúp: "Thoát khỏi Fullscreen Mode":

// 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.

Side lưu ý: API của Youtube là vẫn còn khá khan hiếm về những gì bạn có thể tùy chỉnh thậm chí vào năm 2015 (do nó như thế nào phụ thuộc vào rất nhiều iFrame, và họ không muốn bạn Reskin của họ trình phát). Bạn sẽ có khả năng đến một điểm mà bạn sử dụng một loạt các hacks JavaScript sôi nổi để có được những gì bạn muốn, mà có thể nhận được lộn xộn và không ổn định. Sẽ tốt hơn nếu bạn sử dụng một trong nhiều trình phát video có thể tùy chỉnh, nơi bạn có thể kiểm soát nhiều hơn với JS; như JW player, Video.js, Flow player, popcorn.js v.v.

Nguồn

2015-06-30 18:45:45

Trình phát Youtube được nhúng không thoát khỏi chế độ toàn màn hình

Trả lời

Các vấn đề liên quan