HTML5 视频加载数据事件在 IOS Safari 中不起作用

Posted 2023-05-07

【中文标题】HTML5 视频加载数据事件在 IOS Safari 中不起作用

【英文标题】：HTML5 Video loadeddata event does not work in IOS Safari

【发布时间】：2016-01-22 20:51:47

【问题描述】：

我正在尝试在视频加载第一帧后触发事件。我使用的代码在我测试过的桌面浏览器中有效，但在 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);

【问题讨论】：

我的猜测是您没有从 click 或 touchend 事件处理程序调用 loadvideo

那么有什么方法可以模仿吗？由于视频不会显示在屏幕上（仅显示缩略图），因此用户无法启动

AFAIK，只要用户点击任意位置（不一定非要点击视频），就可以加载视频

【参考方案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 上似乎可以正常工作。

【讨论】：

但是自动播放不会让总是播放视频吗？

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

【参考方案2】：

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

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

vid.src = vidsource;
...

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

【讨论】：

适用于桌面浏览器，但不适用于移动 safari 浏览器。我正在制作一个移动网络应用程序，因此它在移动 Safari 浏览器上运行至关重要

尝试检查您的视频 mime 类型，也许 brouser 无法理解。该视频可在 iPhone 上播放 - <video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>- 更多信息请点击此处developer.apple.com/library/safari/documentation/…

它们是直接来自个人相机胶卷的视频。用户上传它们。所以它们是 100% 兼容的

这可能是因为 Apple 已禁用所有事件，直到用户实际播放视频？

真的，我不知道，不过你可以试试看，一切皆有可能

【参考方案3】：

将preload="metadata" 添加到视频标签，然后监听loadedmetadata 事件。它也适用于 IOS Safari

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。