在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屬性來保持它們同步。