为iOS5点击启动多个html5-video

Question

我正在处理单击元素时播放不同视频的页面.虽然它在计算机上运行得很漂亮,但iOS设备却没有.问题是当点击元素(在这种情况下是一个按钮)时,它会显示视频但不会开始播放,因为它应该如此.脚本是

$(document).ready(function(){
$('#video_1, #video_2').hide();

      $('.icon_1').click(function(){
            $('#video_2').fadeOut(function(){
            $('#video_1').fadeIn();
            });
      });

      $('.icon_2').click(function(){
            $('#video_1').fadeOut(function(){
            $('#video_2').fadeIn();
            });
        });

$('.icon_1').click(function(){

            $('.video_2').get(0).pause();
            $('.video_2').get(0).currentTime = 0;
            $('.video_1').get(0).play();

        });

$('.icon_2').click(function(){
            $('.video_1').get(0).pause();
            $('.video_1').get(0).currentTime = 0;
            $('.video_2').get(0).play();

        });
          });

和HTML是

<button><div class="icon_1" id="mediaplayer" onclick="play">cadillac</div></button>
<button><div class="icon_2" id="mediaplayer2" onclick="play">nike</div></button>

<div id="video_1">
<video class="video_1" width="50%" height="50%"  controls poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" >    
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
</video>
</div>

<div id="video_2">
<video class="video_2" width="50%" height="50%"  controls poster="images/BKG_JohnGT.png">
<source src="images/01.mp4" type="video/mp4" />
</video>
?</div>

任何人都可以给我一个可以让这种情况发生的功能,那会很棒

Answer 1

iOS 不支持页面中同时出现多个视频元素。它甚至不会给您错误消息 - 它只会显示海报图像（或第一帧），然后无法播放，正如您所描述的那样。

不幸的是，您无法进行真正的交叉淡入淡出，但您可以接近。从仅附加到 DOM 的一个视频元素开始。从一个视频切换到另一个视频时，您可以淡出当前视频，完成后将其删除并添加第二个视频。Apple 提供了一些有关如何执行此操作的详细信息和代码示例。

理论上，您应该能够在画布中抓取视频帧的快照，并将其替换为视频并使画布淡出，但 iOS 也不支持在画布中捕获视频帧。

本文对这些行为和其他一些非标准行为进行了很好的描述。