检测移动Safari何时停止播放视频,因为第二个视频开始播放

Question

Mobile Safari仅允许您一次播放一个音频或视频流.

多个同步音频或视频流

目前,所有运行iOS的设备都限于随时播放单个音频或视频流.iOS设备目前不支持多个视频并排播放,部分重叠或完全覆盖.

如果您播放第二个视频,则第一个视频停止.我需要检测何时发生这种情况,以便我可以在视频旁边出现的播放按钮中淡入淡出,我也想将其重置为第一帧,因为在动画片中间留下它看起来很糟糕.

不幸的是,<video>当视频被迫像这样停止时,该元素似乎不会触发"已结束"或"暂停"事件.

 $('video').off('ended pause').on('ended paused', function ()
 {
     alert('ended');   // don't get here except when the video naturally ends
 }

我似乎无法找到任何与"强制停止"相对应的其他事件.(请参阅HTMLMediaElement的Apple事件)

我必须自己做这个并.playing在我的视频中添加一个课程并在播放第二个视频时检查它吗？如果我控制页面上的每个视频,这是可行的,但只要我在那里粘贴YouTube视频,它就变得复杂得多.更好的解决方案

Answer 1

这个解决方案感觉有点黑客，但如果 Safari 移动浏览器在视频停止时不抛出事件，那么剩下的选项就不多了 -

要检测视频是否已停止，我们首先可以确保脚本知道视频何时正在播放，因此：

var isPlaying1 = false,
    isPlaying2 = false, // if more videos an array is better to use, or reuse
    lastTime1 = 0,
    lastTime2 = 0;      // etc.

$('video1').on('playing', function() {
    isPlaying1 = true;
});

$('video1').on('ended', function() {
    isPlaying1 = false;
});

这会在视频开始时设置播放标志。也使用该ended事件，将其设置为 false，以防播放到最后或手动停止。

下一步是轮询视频播放的当前时间以查看它是否发生变化。如果没有变化，它将表明视频没有播放（并且没有被结束的事件捕获）：

function check() {

    if (isPlaying1) {
        var video = $('video1')[0];
        if (video.currentTime === lastTime1) {
            // video has stopped
            isPlaying1 = false;
            video.currentTime = lastTime1 = 0; //reset time
        }
        else {
            lastTime1 = video.currentTime;
        }
    }
}

var timerID = setInterval(check, 1000/15);  // start check

检查速率不应高于 30 fps。这是因为时间戳不会从对应于从一帧到另一帧的时间发生改变。为了安全起见，请使用已知最高帧速率示例中的一半速率（在美国，视频很少超过 30 fps，在欧洲，视频很少超过 25 fps）。如果您知道视频将以较低的速率播放，则此处的值应为最低速率。通常也可以降低它以减少负载。

要停止检查，只需调用：

clearInterval(timerID); // timerID is in global scope

您可能会遇到结束事件和检查之间的竞争条件（因为两者都会创建异步行为）。是否重要取决于你如何处理这两种情况。

如前所述，它感觉“hackish”，我还没有对其进行测试（只是理论上，因为我目前无法为其设置完整的测试环境），但希望它能帮助您解决 Safari 移动浏览器的这一限制。