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

Question

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

我有一个功能，允许用户在原理图的 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。有没有其他人遇到过同时播放两个视频的问题？有修复/解决方法吗？

Answer 1

简短回答: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 属性来使它们保持同步。