Thoát khỏi chế độ toàn màn hình bằng thẻ video HTML5

Tôi đang cố gắng thoát video ở chế độ toàn màn hình ở cuối video nhưng video sẽ không hiển thị. Tôi đã tìm kiếm và tìm ra cách để làm điều này nhưng đối với cuộc sống của tôi, tôi không thể làm cho nó hoạt động được. Tôi đang thử nghiệm trong phiên bản mới nhất của Chrome (15) và iOS 5 trên iPad2. Đây là mã tôi đang sử dụng:Thoát khỏi chế độ toàn màn hình bằng thẻ video 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>

Mọi trợ giúp sẽ được đánh giá cao.

Nguồn

2011-11-17 ShockTower

webkitExitFullScreen là một phương pháp của phần tử video, vì vậy nó phải được gọi theo cách này:

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

Vì nó bên trong một event handler, this sẽ là video rằng ended, vì vậy:

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

Nó phức tạp hơn một chút vì webkitExitFullscreen chỉ hoạt động trong trang web dựa trên trán sers (Safari, Chrome, Opera), vì vậy bạn có thể tìm hiểu thêm về cách sử dụng chính xác của nó trên MDN

Nguồn

2011-11-18 23:05:29 cbaigorri

Cảm ơn cbaigorri. Điều đó là vậy đó! Cảm ơn đã giúp đỡ. – ShockTower

Dường như không hoạt động trên iOS7 – Dejan

Hãy coi chừng! Tên hàm là 'webkitExitFullscreen' * không *' webkitExitFullScreen' (lưu ý chữ thường "s") –

Cảm ơn bạn đã làm việc tuyệt vời để sử dụng .webkitExitFullscreen();

tôi đã sử dụng sau đây để thoát toàn màn hình khi video được thực hiện chơi:

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

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

Nguồn

2013-06-28 07:29:43

Không hoạt động được IE. – Someone

Tôi biết điều này đã được trả lời, nhưng đây là đoạn mã nhỏ tôi đã kết thúc sử dụng cho tất cả các trình duyệt để đóng video toàn màn hình sau khi nó kết thúc.

trình trên Chrome, IE11, Firefox cho đến nay:

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

Bạn cũng có thể tìm thấy những yếu tố toàn màn hình hiện tại (nếu có) như:

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

Nguồn: https://www.sitepoint.com/use-html5-full-screen-api/

Chỉ cần nghĩ rằng tôi sẽ thêm câu trả lời vì đây là câu hỏi đầu tiên tôi gặp khi tìm kiếm một giải pháp cho điều này.

Nguồn

2017-07-31 23:52:15 elzaer

Thoát khỏi chế độ toàn màn hình bằng thẻ video HTML5

Trả lời

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