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 に添付された 1 つのビデオ要素だけから始めます。あるビデオから別のビデオに切り替えるときは、現在のビデオをフェード アウトし、終了したらそれを削除して 2 番目のビデオを追加できます。Apple は、これを行う方法についていくつかの詳細とコード サンプルを提供しています。

理論的には、キャンバス内のビデオ フレームのスナップショットを取得し、それをビデオに交換してキャンバスをフェードアウトできるはずですが、iOS はキャンバス内のビデオ フレームのキャプチャもサポートしていません。

これらおよびその他の非標準の動作については、この記事で詳しく説明しています。

于 2012-09-15T07:06:49.130 に答える