YouTube嵌入在iPad上：當通過JavaScript啓動時，永久性緩衝區API

我有一些問題讓YouTube嵌入工作。YouTube嵌入在iPad上：當通過JavaScript啓動時，永久性緩衝區API

我正在使用YouTube API來加載視頻。在加載的視頻之上，我有一個自定義控件<div>（透明），只有一個播放按鈕（一個<img>）。這樣做是爲了將默認的YouTube播放器隱藏在播放按鈕的後面，該播放按鈕與網站上的其他設計一起使用。

的<div>覆蓋整個加載的iFrame，因此玩家本身無法點擊 - 我用的<div> click事件開始，而不是視頻：iPhone上

// Inside onYouTubePlayerAPIReady(): 
var player = new YT.Player(playerId, { 
    height: height, 
    width: '100%', 
    videoId: videoId, 
    playerVars: { 
    html5: '1', 
    controls: '0', 
    rel: '0', 
    showinfo: '0', 
    modestbranding: '1', 
    theme: 'light', 
    color: 'white', 
    wmode: 'transparent', 
    suggestedQuality: "large" 
    } 
}); 

$(".youtube-player-controls").bind("click", function(e){ 
    if (!player || !player.getPlayerState) return false; 
    if (player.getPlayerState() == YT.PlayerState.PLAYING) player.pauseVideo(); 
    else player.playVideo(); 
    return false; 
});

工作正常，但在iPad上（和Android似乎）視頻切換到視頻的第一幀，但然後停頓在緩衝狀態（通過player.getPlayerState()檢查）。

我試着開始與視頻這player.loadVideoById()不工作或者（同樣的錯誤）。

如果我刪除了覆蓋控制<div>，從而允許用戶實際點擊它工作正常的視頻。

有關如何使用JavaScript API播放視頻的任何建議？

編輯：

我改變嵌入代碼一點點，即我添加了html5=1如Force HTML5 youtube video說明。這會將嵌入式iFrame的內容更改爲使用HTML5播放器，但不能解決問題。

我試了一下，看是否在http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html描述它可以工作。

來源

2012-11-08 Woodgnome

我似乎也遇到這個問題爲好。視頻不斷在iPad上甚至iPhone 4上加載。 – mr1031011

對我來說，它實際上在iPhone 4上的工作原理。還沒有能夠測試iPhone 5. – Woodgnome

我有同樣的問題。在我的情況下，它似乎與控件上的重疊無關，因爲我的按鈕位於視頻背後。視頻加載，開始緩衝並粘貼在黑屏上。 –

蘋果不允許標籤通過腳本加載在iOS（防止使用，而在移動網絡上不必要的帶寬）。幾個Android版本顯示相同的行爲。

您將獲得用戶首先通過點擊視頻本身發起視頻 - 之後，你就可以控制通過API將視頻作爲桌面設備上。

來源

2012-11-08 11:02:32

這隻適用於預加載/自動播放，如http://developer.apple中所述。com/library/safari /＃documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html，並且可以使用Javascript onclick事件繞過。但是，這是針對嵌入HTML5音頻/視頻而描述的，因此它可能並不完全適用於YouTube嵌入（請不要忘記，單擊自定義播放按鈕時會發生* *）。 – Woodgnome

儘管HTML5

-1

目前我們只是在做檢查的player.playVideo發送前（）;功能。這並不理想，但它會一直運行，直到我們從Google獲得更好的API級別修正。在您使用點擊功能

var isiPad = navigator.userAgent.match(/iPad/i) != null;

然後：

在嵌入腳本的頂部設置您的VAR

if (!isiPad) { 
player.playVideo(); 
}

來源

2013-08-20 00:13:23 btburton42

不播放視頻不是一個很好的解決方案。 – mikemaccana

@mikemaccana解決方案是將不同的事件路由到ipad。所以，在我們的例子中，我們允許點擊事件刪除海報框架，並通過支持瀏覽器的JS啓動視頻。對於像iPad這樣的東西，我們只需點擊移除海報框架，用戶就會再次點擊以啓動視頻。這當然不是完美的，但它的工作原理。 – btburton42

@jabberlope我不是很喜歡檢測設備。另外，我在幾種不同的移動設備上看到了這一點（iPad 3rd Gen，iPod 5th Gen，Moto X）。有沒有辦法檢測playVideo（）函數或支持不正常工作的部分？ 'if（！canPlayViaJS）{player.playVideo（）; }' –

YouTube嵌入在iPad上：當通過JavaScript啓動時，永久性緩衝區API

回答

相關問題