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属性来使它们保持同步。

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

1 个答案: