Web應用程序 - iPad的webkitEnterFullscreen - 編程方式去全屏視頻

http://sandbox.solutionsbydesign.com/i-screenplay/h5/Web應用程序 - iPad的webkitEnterFullscreen - 編程方式去全屏視頻

以上是一個例子，我從蘋果下載，你可以使用控制播放和全屏模式。在Safara/iPad中，它非常棒。但是我想要做的是讓用戶點擊一個鏈接並加載視頻，然後進入全屏模式。因此，例如在上面的鏈接，如果加載點完成後它進入全屏，這將是完美的。

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

來源

2011-01-13 Rezen

你有沒有想過這個？我很想知道如何做到這一點。謝謝！ –

http://sandbox.solutionsbydesign.com/i-screenplay/zepto-3.html是我製作的最終演示。因此，從我在Apple網站上閱讀的全屏視頻只能在視頻播放時觸發。我無法以編程方式全屏顯示。看來你可以用Sencha，我不確定，但我想看看他們的設置。 – Rezen

我已經能夠拿出這個最好的。

設置您的視頻標籤並使用CSS將其從屏幕上的某處放置（不能設置爲顯示：無）。我用絕對定位將它從屏幕的左上角移開。

然後用這個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(); 
});

它將在全屏出色的發揮，但是當用戶點擊「完成」退出視頻將繼續扮演關閉屏幕（所以你會聽到音頻）。

因此，我需要弄清楚如何偵聽當「完成」被觸摸時觸發的事件（我甚至不確定是否有此事件）。或者，使用the method described here並每秒運行一次以查看是否使用全屏模式。但是我沒有獲得太多的成功，不管我做什麼我都會犯錯誤。

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

來源

2011-03-07 21:52:40

您想要分別在用戶進入和退出全屏時收聽'webkitbeginfullscreen'和'webkitendfullscreen'事件。 – syaz

你有工作演示/樣本嗎？ – Rezen

我相信這會解決您的問題http://www.intheloftstudios.com/blog/detecting-html5-video-fullscreen-and-events –

我認爲你的問題是試圖強制非用戶調用全屏，這將無法正常工作。用戶必須通過點擊按鈕調用全屏請求等。等待視頻加載然後全屏顯示並不是一回事。

@德魯貝克這裏是我昨晚做了全屏的帖子：http://johncblandii.com/2011/07/html5-video-fullscreen.html。

來源

2011-07-29 17:42:23 johncblandii

祕訣是，直到視頻元數據加載完畢才能進入全屏模式。 The Apple docs狀態：

此屬性[webkitSupportsFullscreen]也是假的，如果元數據加載或等待loadedmetadata事件還沒有發射，如果文件只有音頻的「

。

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

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

有了這些，你應該能夠以編程方式在iOS上添加和播放全屏視頻，無論您是使用Drew提到的「離屏」視頻容器還是通過動態添加視頻標籤。

來源

2013-12-19 23:10:12 kiddailey

+1 - 這是唯一對我有用的東西，謝謝。 –

我也一直在處理這個問題。嘗試通過點擊按鈕讓視頻以全屏模式播放。（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; 
}

我發現的順序很重要。首先播放，然後是全屏請求。試試看，看看它是否適合你。返回錯誤可能不是必需的。

來源

2014-01-09 22:11:51

將.play（）更改爲webkitEnterFullscreen之前解決了我的問題。 –

Web應用程序 - iPad的webkitEnterFullscreen - 編程方式去全屏視頻

回答

相關問題