Two HTML5 Videos Playing Simultaneously in iOS Safari - ios

Question

I am developing a web app that displays animated schematics.
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.
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 HTML5 text track support 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>
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?

Answer 1

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.
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/
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
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.