草庐IT

javascript - 检测移动 Safari 何时因第二个视频开始而停止播放视频

coder 2024-07-20 原文

移动版 Safari 只允许您 play one audio or video stream at a time .

Multiple Simultaneous Audio or Video Streams

Currently, all devices running iOS are limited to playback of a single audio or video stream at any time. Playing more than one video—side by side, partly overlapping, or completely overlaid—is not currently supported on iOS devices.

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

不幸的是 <video>当视频像这样被迫停止时，元素似乎不会触发“结束”或“暂停”事件。

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

我似乎找不到与“强制停止”相对应的任何其他事件。 ( See Apple events for HTMLMediaElement )

我必须自己做这个并添加一个.playing吗？为我的视频上课并在播放第二个视频时检查它？如果我控制页面上的每个视频，这是可行的，但一旦我将 YouTube 视频也放在那里，它就会变得更加复杂。有没有更好的解决方案

最佳答案

这个解决方案感觉有点老套，但如果 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 的这个限制移动浏览器。

关于javascript - 检测移动 Safari 何时因第二个视频开始而停止播放视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23591893/

javascript何时videocodesectionhtml5-videomobile-safari

有关javascript - 检测移动 Safari 何时因第二个视频开始而停止播放视频的更多相关文章

  1. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  2. Observability：从零开始创建 Java 微服务并监控它 （二） - 2

    这篇文章是继上一篇文章“Observability：从零开始创建Java微服务并监控它（一）”的续篇。在上一篇文章中，我们讲述了如何创建一个Javaweb应用，并使用Filebeat来收集应用所生成的日志。在今天的文章中，我来详述如何收集应用的指标，使用APM来监控应用并监督web服务的在线情况。源码可以在地址 https://github.com/liu-xiao-guo/java_observability 进行下载。摄入指标指标被视为可以随时更改的时间点值。当前请求的数量可以改变任何毫秒。你可能有1000个请求的峰值，然后一切都回到一个请求。这也意味着这些指标可能不准确，你还想提取最小/

  3. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  4. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  5. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  6. ruby-on-rails - Sphinx - 何时对字段使用 'has' 和 'indexes' - 2

    我几天前在我的ruby​​onrails2.3.2上安装了Sphinx和Thinking-Sphinx，基本搜索效果很好。这意味着，没有任何条件。现在，我想用一些条件过滤搜索。我有公告模型，索引如下所示:define_indexdoindexestitle,:as=>:title,:sortable=>trueindexesdescription,:as=>:description,:sortable=>trueend也许我错了，但我注意到只有当我将:sortable=>true语法添加到这些属性时，我才能将它们用作搜索条件。否则它找不到任何东西。现在，我还在使用acts_as_tag

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby - 检测由 RSpec、Ruby 运行的代码 - 2

    我想知道我的代码是否在rspec下运行。这可能吗？原因是我正在加载一些错误记录器，这些记录器在测试期间会被故意错误(expect{x}.toraise_error)弄得乱七八糟。我查看了我的ENV变量，没有(明显的)测试环境变量的迹象。 最佳答案 在spec_helper.rb的开头添加:ENV['RACK_ENV']='test'现在您可以在代码中检查RACK_ENV是否经过测试。 关于ruby-检测由RSpec、Ruby运行的代码，我们在StackOverflow上找到一个类似的问题

  9. ruby-on-rails - Ruby/Rails 中的夏令时开始和结束日期 - 2

    我正在开发一个Rails应用程序，我需要在其中找到给定特定偏移量或时区的夏令时开始和结束日期。我基本上在我的数据库中保存了从用户浏览器接收到的时区偏移量(“+3”，“-5”)，我想在它出现时修改它由于夏令时的变化。我知道Time实例变量有dst?和isdst方法，如果存储在它们中的日期在夏令时与否。>Time.new.isdst=>true但是使用它来查找夏令时的开始和结束日期会占用太多资源，而且我还必须为我拥有的每个时区偏移量执行此操作。我想知道更好的方法。 最佳答案 好的，基于你所说的和@dhouty'sanswer:您希望能够

  10. ruby - 使用 Ruby Daemons gem 检测停止 - 2

    我正在使用rubydaemongem。想知道如何向停止操作添加一些额外的步骤？希望我能检测到停止被调用，并向其添加一些额外的代码。任何人都知道我如何才能做到这一点？ 最佳答案 查看守护程序gem代码，它似乎没有用于此目的的明显扩展点。但是，我想知道(在守护进程中)您是否可以捕获守护进程在发生“停止”时发送的KILL/TERM信号...？trap("TERM")do#executeyourextracodehereend或者你可以安装一个at_exit钩子(Hook):-at_exitdo#executeyourextracodehe

随机推荐