我当前项目的一部分涉及通过 HTML5 的 native 视频标签加载外部视频,然后使用 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 启用了远程调试,但控制台仍然没有输出。
有什么解决方法吗?我在网上/文档中找不到太多关于此的信息。
最佳答案
不幸的是,真的没有办法解决这个问题。在获得用户交互(即某种触摸事件)之前,Mobile Safari 不会下载视频文件的任何部分,甚至不会下载需要知道尺寸的标题。
在您的具体示例中,您需要启用视频控件,以便用户可以开始播放。 (或者您可以编写自己的代码来启动它,但它必须由触摸或点击事件触发。)一旦它开始播放,加载的元数据甚至会触发,您可以做您想做的事。
我建议阅读其他人试图做几乎相同的事情的其他答案。它更详细地讨论了这个问题以及一个工作链接。此外,它还解决了您可能会遇到的另一个与缩放视频有关的问题。
Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
关于Javascript onloadedmetadata 事件未在 iOS 设备上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21189958/