iOS设备上未触发Javascript onloadedmetadata事件

我当前项目的一部分涉及通过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>

我甚至在ipad上通过safari实现了远程调试，但控制台中仍然没有输出

---

有什么解决办法吗？我在web/文档中找不到关于这方面的更多信息

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

在您的特定示例中，您需要启用视频控件，以便用户可以开始播放视频。（或者您可以编写自己的代码来启动它，但必须由触摸或单击事件触发。）一旦它开始播放，loadedmetadata甚至会启动，您可以做您想做的事情

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

---

更新：JSFIDLE也可以在Android上使用。这是iOS中的一个漏洞吗？嗯，这很令人失望——我希望苹果能让用户选择是否自动加载视频。好吧。谢谢你的回答：）同意。或者至少下载元数据。没那么多。尤其是当你通过无线网络连接时。

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