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

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);

}

Answer 1

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

Answer 2

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

以下应该对您有用：

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 上运行良好。

Answer 3

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

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

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