請求全屏 HTML5 視頻 onPlay

Question

當用戶單擊<video>元素上的播放按鈕時，我使用以下代碼觸發全屏：

var video = $("#video");
video.on('play', function(e){
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen();
    }
});

但是當我點擊播放按鈕時沒有任何反應。

知道為什么嗎？

編輯：這是我的 HTML 代碼：

<video width="458" height="258" controls id='video' >
          <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.mp4' type="video/mp4">
          <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.ogv' type="video/ogg">
          <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.webm' type="video/webm">
</video>

Answer 1

這里發生了幾件事：

首先，在您的代碼中， video是一個 jQuery 對象，而不是實際的視頻元素。 對於 jQuery 對象，您可以像這樣引用它：

var actualVideo = video[0]; // (assuming '#video' actually exists)

其次，為了安全和良好的用戶體驗，瀏覽器只會讓你在用戶觸發的事件中觸發全屏，比如“點擊”。 您不能在訪問每個網頁時立即全屏顯示，並且您可以使視頻自動開始播放，這將違反該規則。

因此，另一種解決方案是在單擊事件中請求全屏，如下所示：

var video = $("#video");
video.on('click', function(e){
    var vid = video[0];
    vid.play();
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }
});

理想情況下，您可能想要構建一個更完整的播放器用戶界面，但這應該可以為您提供總體思路。

Answer 2

一種不那么冗長的方式來切換全屏結合來自這個問題和其他問題的答案。

這應該可以處理所有瀏覽器風格：基於chromium 和webkit、firefox、opera 和基於MS 的瀏覽器。

var p = document.querySelector('#videoplayer');

if (!window.isFs) {
    window.isFs = true;
    var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen;
    fn_enter.call(p);
} else {
    window.isFs = false;
    var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen;
    fn_exit.call(p);
}

p代表video元素的 DOM 對象， window.isFs只是一個隨機變量，用於存儲當前全屏狀態。

如果您的player是一個 jQuery 對象，那么您可以使用var p = player.get(0)獲取底層 DOM 元素。