HTML5视频在IOS Safari中无法触发loadeddata事件

Question

我试图在视频加载第一帧后触发事件。我使用的代码在我测试过的桌面浏览器中有效，但在IOS上的移动Safari中不起作用。这段代码是否有些功能在移动Safari上不支持，或者是否有其他解决方案可以实现我想要的效果？

function loadvideo (vidsource){

var vid = document.createElement('video');
vid.src = vidsource;

alert("Video about to load"); //This works fine in mobile safari
vid.addEventListener('loadeddata', function() {
alert("Video Loaded!"); //This does not display in mobile safari
//Will do something else here
}, false);

}

- M9A

---

我的猜测是你没有从点击或touchend事件处理程序中调用loadvideo函数。 - Gio

那么我能模仿这个吗？由于视频不会在屏幕上显示（只有缩略图），因此用户无法启动。 - M9A

据我所知，只要用户在任何地方点击（不一定是点击视频），就可以加载视频。 - Gio

Answer 1

在iOS上，视频似乎除非用户点击播放或添加了自动播放属性（实际上并没有自动播放），否则不会被加载。

以下内容应该适用于您：

var vid = document.createElement('video');
if (/iPad|iPhone|iPod/.test(navigator.userAgent))
    vid.autoplay = true;
vid.addEventListener('loadeddata', function() {[...]}, false);
vid.src = videosource;

或者，您可以监听progress事件，而不是loadeddata事件，在iOS Safari上似乎可以正常工作。

- Suhaas Prasad

---

但是自动播放不会一直播放视频吗？ - Aessandro

不确定自动播放部分，但“progress”事件确实在任何地方都有效。您可以添加{ once: true }而不是false来获取第一帧。 - Fabian von Ellerts

Answer 2

在视频标签中添加preload="metadata"，然后监听loadedmetadata事件。这也适用于iOS Safari。

- Oleksandr Tkach

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 3

在这种情况下尽量不要使用addEventListener，而是使用较旧的on样式，并在设置事件监听器之后设置src：

...
vid.onloadeddata = function () {
    alert("Video Loaded!");
    // do something
}
vid.src = vidsource;
...

如果在EventTarget处理事件时添加了EventListener，则它不会被当前操作触发，但可能在事件流的后续阶段（如冒泡阶段）中触发。- 了解更多 - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

- Andrew Evt

---

在桌面浏览器上可以运行，但在移动Safari浏览器上无法运行。我正在制作一个移动Web应用程序，因此在移动Safari浏览器上运行是至关重要的。 - M9A

尝试检查您的视频MIME类型，可能浏览器无法理解它。此视频将在iPhone上运行- <video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>- 更多信息请参见https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html - Andrew Evt

它们是直接从用户相机胶卷中上传的视频。用户上传它们，因此它们是100％兼容的。 - M9A

这可能是因为苹果禁用了所有事件，直到用户实际播放视频才能启用。 - M9A

真的，我不知道，但你可以尝试检查一下，所有事情都有可能。 - Andrew Evt