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

Question

我正在开发一个显示动画原理图的Web应用程序.

我有一个功能,允许用户在原理图的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属性来使它们保持同步.