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

时间:2014-01-17 15:44:31

标签: javascript jquery ios html5 html5-video

我当前项目的一部分涉及通过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启用了远程调试,但在控制台中仍然没有输出。

这有什么变通方法吗?我在网络/文档中找不到这方面的很多信息。

1 个答案:

答案 0 :(得分:5)

不幸的是,没有办法解决这个问题。移动Safari不会下载视频文件的任何部分,直到它获得用户交互(即某种触摸事件),甚至不需要知道尺寸所需的标题。

在您的具体示例中,您需要启用视频控件,以便用户可以开始播放。 (或者您可以编写自己的代码来启动它,但必须通过触摸或单击事件触发。)一旦开始播放,loadedmetadata就会触发,您可以按照自己的意愿行事。

我建议在其他人试图做同样的事情时阅读这个其他答案。它更详细地讨论了问题以及工作链接。此外,它解决了缩放您可能遇到的视频的另一个问题。

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