两个HTML5视频在iOS Safari中同时播放 [英] Two HTML5 Videos Playing Simultaneously in iOS Safari

问题描述

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

I am developing a web app that displays animated schematics.

我有一项功能，允许用户在原理图的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检查控制台时，它不会抛出任何错误。

I have a feature that allows the user to switch between a 2D video of the schematic and a 3D video of the actual system. This works fine on Chrome, IE, and Firefox. It does not work on iOS on an iPad running 9.3.1. The two video are both controlled by the same custom video controls and play at the same time, the 2D video is in "front" (z-index=1) and the 3D is hidden behind it (z-index=0). When the 3D switch is hit it simply changes the 3D video to z-index=2. So nothing crazy going on here just a CSS trick. Also, it doesn't throw any errors when I inspect the console using my Mac.

这是我播放原理图的页面的HTML：

This is my HTML for the page that plays the schematics:

<!-- 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。有没有其他人遇到同时播放两个视频的问题？是否有修复/解决方法？

I have searched for answers to this question but everything I find on iOS and HTML is from 2010-2013/4. Has anyone else run into this issue of playing two videos simultaneously? Is there a fix/workaround?

推荐答案

简短回答：iOS 10添加了可能足够的新功能。如果没有，似乎对多个同步视频的真正支持即将到来。

Short answer: iOS 10 added new capabilities that may be enough for you. And if not, it seems that true support for multiple simultaneous videos is coming soon.

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

In iOS 10, you can autoplay or call play() on a video without requiring user interaction, as long as it doesn't have sound. And starting the video no longer forces it into fullscreen playback: https://webkit.org/blog/6784/new-video-policies-for-ios/

但是你还是不能玩多个同时播放视频，但该补丁刚落地。所以它就在路上：
https://bugs.webkit.org/ show_bug.cgi？id = 162366

However you still can't play multiple videos simultaneously, but that patch just landed. So it's on the way: https://bugs.webkit.org/show_bug.cgi?id=162366

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

Can you get your example working on iOS 10 by pausing one video when you start the other? You don't show them both at the same time, after all. You could keep them in sync by syncing up their currentTime properties each time the user switches.

这篇关于两个HTML5视频在iOS Safari中同时播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！