Javascript onloadedmetadata 事件未在 iOS 设备上触发

Posted 2023-05-08

【中文标题】Javascript onloadedmetadata 事件未在 iOS 设备上触发

【英文标题】：Javascript onloadedmetadata event not firing on iOS devices

【发布时间】：2014-02-07 00:33:14

【问题描述】：

我当前项目的一部分涉及通过 html5 的本机视频标签加载外部视频，然后使用 javascript 将它们调整为 DOM 的完整高度和宽度。

我的代码似乎可以在桌面浏览器上完美运行，但是当我在 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 启用远程调试，但控制台中仍然没有输出。

有什么解决方法吗？我在网络/文档中找不到太多关于此的信息。

【问题讨论】：

更新：jsfiddle 也适用于 android。这是 ios 的错误吗？

【参考方案1】：

不幸的是，没有办法解决这个问题。移动版 Safari 在获得用户交互（即某种触摸事件）之前不会下载视频文件的任何部分，甚至不会下载标题，因为标题是了解尺寸所必需的。

在您的具体示例中，您需要启用视频控件，以便用户可以开始播放。 （或者你可以编写自己的代码来启动它，但它必须由触摸或点击事件触发。）一旦开始播放，加载的元数据甚至会触发，你可以做你想做的事。

我建议阅读其他人试图做几乎相同事情的其他答案。它与工作链接一起更详细地讨论了该问题。此外，它还解决了您可能会遇到的缩放视频的另一个问题。

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

【讨论】：

嗯，这很令人失望 - 我希望 Apple 可以让用户选择是否要自动加载视频。呃，好吧。谢谢你的回答:)

同意。或者至少下载元数据。没那么多。特别是如果您通过 wifi 连接。