在iOS Safari中同时播放两个HTML5video
我正在开发一个显示animation原理图的Web应用程序。
我有一个function,允许用户在原理图的2Dvideo和实际系统的3Dvideo之间切换。 这适用于Chrome,IE和Firefox。 它在运行9.3.1的iPad上无法在iOS上运行。 这两个video都由相同的自定义video控件控制,并同时播放,2Dvideo处于“前”(z-index = 1),3D隐藏在它后面(z-index = 0)。 当3D开关被击中时,只需将3Dvideo更改为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>
我已经search了这个问题的答案,但是我在iOS和HTML上find的所有内容都是从2010-2013 / 4开始的。 有没有人遇到这个问题同时播放两个video? 有没有修复/解决方法?
简短的回答:iOS 10添加了新function,可能已经足够了。 如果不是,似乎真正支持多个同步video即将推出。
在iOS 10中,只要没有声音,您就可以在video中自动播放或调用play(),而无需用户进行交互。 而开始播放video不再强制播放全屏: https : //webkit.org/blog/6784/new-video-policies-for-ios/
但是,您仍然无法同时播放多个video,但该补丁只是降落了。 所以它的方式: https : //bugs.webkit.org/show_bug.cgi?id = 162366
你可以通过在启动另一个video时暂停一个video来获得iOS 10的示例吗? 毕竟,你们不能同时把它们展示出来。 每次用户切换时,都可以通过同步它们的currentTime属性来保持同步。