6

我目前正在制作一个页面，用于在您单击一个元素时播放不同的视频。虽然它在计算机上运行良好，但在 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>
​&lt;/div>

任何人都可以给我一个可以使这种情况发生的功能，那就太好了

4

1 回答 1

3

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

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

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

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

于 2012-09-15T07:06:49.130 回答