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

在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上正常使用。

Answer 2

尝试不使用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

HTML5 Video loadeddata事件在IOS Safari中不起作用

2 个答案: