Javascript onloadedmetadata event not firing on iOS devices

我當前項目的一部分涉及通過HTML5的本機視頻標記加載外部視頻，然後使用Javascript調整它們的大小以達到DOM的寬度&。Javascript onloadedmetadata event not firing on iOS devices

我的代碼似乎在桌面瀏覽器上完美工作，但是當我在我的ipad上加載我的項目時，視頻不會調整大小，因爲onloadedmetadata事件不會被觸發。

這裏是一個小的代碼示例抄錄問題：

function init() { 
    var video = document.getElementById('viddy'); 
    video.addEventListener('loadedmetadata', function(e){ 
     var dimensions = [video.videoWidth, video.videoHeight]; 
     alert(dimensions); 
    }); 
} 

document.addEventListener("DOMContentLoaded", init, false); 


<video id="viddy" autoplay> 
    <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' /> 
    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" /> 
</video>

http://jsfiddle.net/AUSNu/213/

我甚至試過編碼了使用jQuery的解決方案，在關閉的機會，該事件可能觸發，但它仍然沒有。

$('#viddy').on('loadedmetadata', function() { 
    alert('test'); 
});

我甚至在我的ipad上通過safari啓用遠程調試，但在控制檯中仍然沒有輸出。

是否有任何解決方法呢？我無法在網絡/文檔中找到關於此的更多信息。

來源

2014-01-17 Joel Murphy

更新：jsfiddle也適用於Android。這是iOS中的錯誤嗎？ –

不幸的是，沒有辦法解決這個問題。移動Safari不會下載視頻文件的任何部分，直到獲得用戶交互（即某種觸摸事件），甚至不需要知道尺寸的標題。

在您的具體示例中，您需要在視頻上啓用控件，以便用戶可以開始播放。（或者你可以編寫自己的代碼來啓動它，但它必須由觸摸或點擊事件觸發）。一旦它開始播放，加載的元數據甚至會觸發，並且你可以做你想做的事情。

我建議讀其他人的答案，其他人試圖做幾乎相同的事情。它會與工作鏈接一起更詳細地討論問題。此外，它還解決了縮放可能會遇到的視頻的另一個問題。

Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width

來源

2014-01-17 19:45:15 brianchirls

嗯，這是相當令人失望 - 我希望蘋果會給用戶選擇，以決定他們是否想要視頻自動加載或不。呃，好吧。謝謝你的回答:) –

同意。或者至少下載元數據。這不是很多。特別是如果你通過WiFi連接。 – brianchirls

Javascript onloadedmetadata event not firing on iOS devices

回答

相關問題