草庐IT

ios - 在 iOS Safari 中同时播放两个 HTML5 视频

coder 2024-01-15 原文

我正在开发一个显示动画原理图的网络应用程序。

我有一个功能，允许用户在原理图的 2D 视频和实际系统的 3D 视频之间切换。这在 Chrome、IE 和 Firefox 上运行良好。它不适用于运行 9.3.1 的 iPad 上的 iOS。这两个视频都由相同的自定义视频控件控制并同时播放，2D 视频在“前面”(z-index=1)，3D 隐藏在它后面(z-index=0)。当按下 3D 开关时，它只是将 3D 视频更改为 z-index=2。所以这里没有什么疯狂的事情，只是一个 CSS 技巧。此外，当我使用我的 Mac 检查控制台时，它不会抛出任何错误。

这是播放原理图的页面的 HTML:

<!-- Establishes the wrapper for all of the content and the angular controller that will control the content -->
<div id="player">
    <video id="vid" onload="logDimensions()" ng-hide="twoDhidden" >
        <source ng-src="{{selected.vidPath}}">
        <track id="trk" ng-src="{{selected.track}}" kind="chapters" default> A browser with <a href="http://www.jwplayer.com/html5/">HTML5 text track support</a> is required.
    </video>
    <video id="vid3D" ng-src="{{selected.vidPath3D}}" ng-hide="threeDhidden">
    </video>
    <span id="videoTime">{{currentTime | timeFilter}} / {{totalTime | timeFilter}}</span>
</div>
<div id="buttons">
    <div id="videoOptions" class="fixed-action-btn vertical click-to-toggle">
        <a class="btn-floating btn-touch blueIcon">
            <i class="medium material-icons">more_vert</i>
        </a>
        <ul>
            <li><a id="flankSpeed" class="btn-floating btn-touch" ng-class="flankClass"><i class="large material-icons ">fast_forward</i></a></li>
            <li><a id="halfSpeed" class="btn-floating btn-touch" ng-class="halfClass"><i class="large material-icons ">slow_motion_video</i></a></li>
            <li><a id="instructorBtn" title="Instructor" class="btn-floating btn-touch blueIcon"><i class="large material-icons ">supervisor_account</i></a></li>
        </ul>
    </div>
    <div id="play" class="fixed-action-btn vertical click-to-toggle">
        <a class="btn-floating btn-touch blueIcon">
            <i title="Play" id="playIcon" class="material-icons">play_arrow</i>
            <!-- <i id="pauseIcon" class="large material-icons hidden">pause_circle_filled</i> -->
        </a>
        <!--  <button id="instructorBtn" title="Instructor"> INSTR </button> -->
    </div>
    <div id="videoControls">
        <svg id="draw_here" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <line id="play_bar" x1="0%" y1="12" x2="100%" y2="12" /></line>
            <div id="containment-wrapper">
                <span id="dragMe"></span>
            </div>
            <div id="progress"></div>
        </svg>

    </div>
    <div id="threeDSwitch" class="switch">
        <label>
            2D
            <input id="threeDToggle" type="checkbox" class="default">
            <span for="threeDToggle" ng-click="toggle3D()" class="lever"></span> 3D
        </label>
    </div>
</div>

我搜索了这个问题的答案，但我在 iOS 和 HTML 上找到的所有内容都来自 2010-2013/4。有没有其他人遇到过同时播放两个视频的问题？有修复/解决方法吗？

最佳答案

简短回答:iOS 10 添加的新功能可能对您来说已经足够了。如果没有，似乎很快就会真正支持多个同步视频。

在 iOS 10 中，您可以在视频上自动播放或调用 play() 而无需用户交互，只要视频没有声音即可。并且开始播放视频不再强制其进入全屏播放: https://webkit.org/blog/6784/new-video-policies-for-ios/

但是您仍然不能同时播放多个视频，但是那个补丁刚刚登陆。所以它在路上: https://bugs.webkit.org/show_bug.cgi?id=162366

您能否通过在启动一个视频时暂停另一个视频来让您的示例在 iOS 10 上运行？毕竟，您不会同时显示它们。您可以通过在每次用户切换时同步它们的 currentTime 属性来使它们保持同步。

关于ios - 在 iOS Safari 中同时播放两个 HTML5 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36652614/

SafariHTML534gtltioshtmlhtml5-videomobile-safari

有关ios - 在 iOS Safari 中同时播放两个 HTML5 视频的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  8. ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2

    我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  9. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  10. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

随机推荐