Web App - iPad webkitEnterFullscreen - 以編程方式進行全屏視頻

Question

http://sandbox.solutionsbydesign.com/i-screenplay/h5/

以上是我從Apple下載的示例，您可以使用控件進行播放和全屏模式。 在Safara / iPad中，它非常棒。 然而，我想要做的是讓人們點擊鏈接，然后加載視頻，然后進入全屏模式。 因此，例如在上面的鏈接上，如果加載點完成后，它進入全屏，這將是完美的。

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html有關於此的更多信息。

Answer 1

我能做到最好的就是這個。

設置您的視頻標簽並使用CSS將其放置在屏幕的某個位置（它不能設置為display：none）。 我使用絕對定位將其移出屏幕的左上角。

然后使用這個JS：

$('.popup.ipad a').click(function() {

        var currentID = $(this).closest('.player').find('video').attr('id');
        var videoContainer = document.getElementById(currentID);
        var newSrc = $(this).attr('href');

        videoContainer.src = newSrc;
        videoContainer.webkitEnterFullscreen();
        videoContainer.play();
});

它將在Fullscreen中播放很棒，但是當用戶點擊“完成”退出視頻時，將繼續播放屏幕（這樣您就會聽到音頻）。

因此，我需要弄清楚如何觸摸觸發“完成”時觸發的事件（我甚至不確定是否存在此事件）。 或者，使用此處描述的方法並每秒運行一次以查看是否正在使用全屏模式。 但是我沒有取得多大成功，無論我做什么我都會得到錯誤。

希望這可以幫助您找到一些答案。 如果是這樣，請告訴我！

Answer 2

秘訣是，在加載視頻元數據之前，您無法進入全屏模式。 Apple文檔指出：

如果加載元數據或者未觸發loadedmetadata事件，並且文件是僅音頻的，則此屬性[ webkitSupportsFullscreen ]也為false。

因此，要在正確的時間觸發全屏，只需為loadedmetadata事件創建一個事件偵聽器：

videoContainer.addEventListener('loadedmetadata', function() {
    if (videoContainer.webkitEnterFullscreen) {
        videoContainer.webkitEnterFullscreen();
    }
});

有了這個，您應該能夠以編程方式在iOS上添加和播放全屏視頻，無論您是使用Drew提到的“屏幕外”視頻容器還是通過動態添加視頻標簽。

Answer 3

我認為你的問題是試圖強制非用戶調用全屏，這是行不通的。 用戶必須通過按鈕點擊等來調用全屏請求。等待視頻加載然后進入全屏是不一樣的。

@Drew Baker這是我昨晚做全屏的帖子： http ： //johncblandii.com/2011/07/html5-video-fullscreen.html 。

Answer 4

我也一直在研究這個問題。 嘗試通過單擊按鈕使視頻以全屏模式播放。

我可能做錯了，但這就是我如何讓它為我工作（在ipad air，iphone 5，galaxy 3，nexus 7 ......除了ipad 2之外的一切，視頻不會全屏，但是它會玩）

要播放視頻，您必須讓用戶直接點擊某些內容。 每次我使用JQUERY時，它都無法在iOS設備上運行。 我認為iOS對於遠離直接點擊非常敏感所以，你將onclick處理程序直接放在你希望它們點擊的項目上，如下所示：

<div onclick='openAndPlay(event);' id='video_layover' ></div>

function openAndPlay(event) { 

    myvideo.play();
    myvideo.webkitEnterFullscreen();

    return false;
}

我發現訂單很重要。 首先是播放，然后是全屏請求。 嘗試一下，看看它是否適合你。 可能沒有必要返回false。