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

为你想要的东西存在多种解决方案，我做了一个如何做的例子

简单的方法就是让第二个视频在第二个视频播放时隐藏起来。

另一种方式与第一种方式类似，但是当用户点击图像时，您使用图像来表示视频1，因此视频2启动，并在用户点击时隐藏图像。

像你一样尝试的其他解决方案更复杂，因为如果你试图用其他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);
}});

HTML5视频：点击播放按钮，播放另一个视频

1 个答案: