HTML5ビデオ：再生ボタンをクリックし、別のビデオを再生

Question

再生ボタンをクリックしてビデオリンクを変更する必要があります。また、ビデオを自動再生する必要があります。

<video id="video" src="dhoni.mp4" width="320" height="240" controls> 
</video> 
<script> 
    $(document).ready(function() { 
     var video = document.getElementById('video'); 
     video.onplay = function (e) { 
      $('video').attr({'src': 'ran.mp4'}); 
      $('video')[0].play(); 
     }; 
    }); 
</script> 

Answer 1

あなたが何をしたいのためのソリューションの多くの種類が存在する、私は簡単な方法は、ちょうど秒が再生されているときに、2つの動画最初が非表示になるようであるあなたがそれを

を行う方法の例を作りました。

他の方法は最初のようですが、ユーザーが画像をクリックしたときに画像を表すために画像を使用するので、video2が開始され、ユーザーがクリックすると画像が非表示になります。

あなたが試みているような他の解決策は、ビデオのsrc属性を他のsrcに置き換えようとすると、これをロードする問題が存在するため、より複雑です。これはajax blob要求を伴い、たとえば、サーバーにホストされていないビデオを読み込もうとしているときや、Firefox、Chrome、その他のブラウザがビデオをどのようにレンダリングしているかなどのようなものがあります。

https://jsfiddle.net/5mek5ffd/27/

HTML

<video id="video1" src="http://techslides.com/demos/sample-videos/small.mp4" width="320" height="240" controls> 
     </video> 
<video id="video2" class="hidden" src="https://static.videezy.com/system/resources/previews/000/004/147/original/jelly-fish.mp4" width="320" height="240" controls=""> 
     </video> 

CSS

.hidden{ display:none } 

JS

function changeVideo(video1, video2){ 
    try { 

     // pause the video 
     jQuery(video1)[0].pause(); 
     // set the seconds to 0 
     jQuery(video1)[0].currentTime = 0; 
     // add the hidden class to the video1 
     jQuery(video1).addClass("hidden"); 
     // remove the hidden class to the video2 
     jQuery(video2).removeClass("hidden"); 
     // pause the video2 - it's necessary cause the video was ended 
     jQuery(video2)[0].pause(); 
     // set the seconds to 0 to the video 2 
     jQuery(video2)[0].currentTime = 0; 

    } catch(e){ 
     // if something goes wrong put the message on console 
     //prevent the script stop the other scripts too 
     console.log(e.message); 
     return false; 
    } 
} 

jQuery(document).ready(function($){ 
    try { 

    // if exists the video1 put it on video1 variable 
    // if exists the video2 put it on video2 variable 
    var $video1 = $('#video1').length > 0 ? jQuery('#video1') : false, 
     $video2 = $('#video2').length > 0 ? jQuery('#video2') : false; 

    // if exists the video1 and video 2 
    if($video1 && $video2){ 

     // if the #video1 is starting to play 
     $video1.on("play", function() { 
     console.log($video2[0].duration); 
     // call change video function 
     changeVideo("#video1","#video2"); 

     // the [0] represents the javascript dom object 
     // if the seconds is 0 in my video 2 then play it 
     if($video2[0].currentTime == 0) 
      $video2[0].play(); 

     }); 

     // start the video1 if the page is ready added 1 sec for delay, 
     // to not cause the impress wrong of the video 
     setTimeout(function() { 
     if($video2[0].currentTime == 0) 
      $video1[0].play(); 
     },1000); 

     // if the video was ended return to the first video 
     $video2.on("ended", function(){ 
     changeVideo("#video2","#video1"); 
     }); 
    } 

} catch(e){ 
    // if something goes wrong put the message on console 
    //prevent the script stop the other scripts too 
    console.log(e.message); 
}});