当我的当前视频完成使用Java脚本时，如何播放下一个视频？

在这里，我成功地根据当前时间播放视频，但根据当前时间无法在当前视频结束后检索下一个视频。这里source标签中的startat attribue是该视频的开始时间。当我的当前视频完成使用Java脚本时，如何播放下一个视频？

HTML

<video id="media-video" width="600" height="300">     
    <source class="active" src="marimatrubhasha.mp4" id="videosource1" type="video/mp4" startat="00:00:00" endat="00:04:07" name="Gujarati Bhasha" description="This is Gujarati Video">      
    <source class="active" src="php.mp4" id="videosource2" type="video/mp4" startat="00:04:07" endat="00:19:06" name="PHP Video 00:04:07" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource3" type="video/mp4" startat="00:19:06" endat="00:34:05" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource4" type="video/mp4" startat="00:34:05" endat="00:49:04" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="marimatrubhasha.mp4" id="videosource5" type="video/mp4" startat="00:49:04" endat="00:53:11" name="Gujarati Bhasha" description="This is Gujarati Video">      
    <source class="active" src="php.mp4" id="videosource6" type="video/mp4" startat="00:53:11" endat="01:08:10" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource7" type="video/mp4" startat="01:08:10" endat="01:23:09" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource8" type="video/mp4" startat="01:23:09" endat="01:38:08" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource9" type="video/mp4" startat="01:38:08" endat="01:53:07" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource10" type="video/mp4" startat="01:53:07" endat="02:08:06" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource11" type="video/mp4" startat="02:08:06" endat="02:23:05" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource12" type="video/mp4" startat="02:23:05" endat="02:38:04" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource13" type="video/mp4" startat="02:38:04" endat="02:53:03" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource14" type="video/mp4" startat="02:53:03" endat="03:08:02" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource15" type="video/mp4" startat="03:08:02" endat="03:23:01" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource16" type="video/mp4" startat="03:23:01" endat="03:38:00" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource17" type="video/mp4" startat="03:38:00" endat="03:52:59" name="3.38 PHP Video" description="This is PHP Video to be played on 3.38">      
    <source class="active" src="php.mp4" id="videosource18" type="video/mp4" startat="03:52:59" endat="04:07:58" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource19" type="video/mp4" startat="04:07:58" endat="04:22:57" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource20" type="video/mp4" startat="04:22:57" endat="04:37:56" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource21" type="video/mp4" startat="04:37:56" endat="04:52:55" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource22" type="video/mp4" startat="04:52:55" endat="05:07:54" name="PHP Video" description="This is PHP Video"> 
    <source class="active" src="php.mp4" id="videosource23" type="video/mp4" startat="05:07:54" endat="05:22:53" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource24" type="video/mp4" startat="05:22:53" endat="05:37:52" name="php" description="PHP Video to be played at 5.37">     
    <source class="active" src="php.mp4" id="videosource25" type="video/mp4" startat="05:37:52" endat="05:52:51" name="PHP Video to be played at 5.37" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource26" type="video/mp4" startat="05:52:51" endat="06:07:50" name="PHP Video to be played on 5.52" description="PHP Video to be played on 5.52">      
    <source class="active" src="php.mp4" id="videosource27" type="video/mp4" startat="06:07:50" endat="06:22:49" name="PHP Video to be played on 6.07" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource28" type="video/mp4" startat="06:22:49" endat="06:37:48" name="PHP Video to be played on 6.22" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource29" type="video/mp4" startat="06:37:48" endat="06:52:47" name="PHP Video to be played on 6.37" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource30" type="video/mp4" startat="06:52:47" endat="07:07:46" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource31" type="video/mp4" startat="07:07:46" endat="07:22:45" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource32" type="video/mp4" startat="07:22:45" endat="07:37:44" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource33" type="video/mp4" startat="07:37:44" endat="07:52:43" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource34" type="video/mp4" startat="07:52:43" endat="08:07:42" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource35" type="video/mp4" startat="08:07:42" endat="08:22:41" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource36" type="video/mp4" startat="08:22:41" endat="08:37:40" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource37" type="video/mp4" startat="08:37:40" endat="08:52:39" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource38" type="video/mp4" startat="08:52:39" endat="09:07:38" name="PHP Video" description="This is PHP Video">     
    <source class="active" src="php.mp4" id="videosource39" type="video/mp4" startat="09:07:38" endat="09:22:37" name="PHP Video" description="This is PHP Video">       
</video>

Java脚本

$(document).ready(function(){ 
      var mediaPlayer = document.getElementById('media-video'); 
      var videosource=document.getElementById('source'); 
      var Startvideo = mediaPlayer.querySelectorAll('source[startat]'); 
      if (mediaPlayer.paused || mediaPlayer.ended) { 
       // Change the button to be a pause button 
       changeButtonType(playPauseBtn, 'pause'); 
       // Play the media 
       //mediaPlayer.play(); 
       var d=new Date();  
       var hh=d.getHours();   
       var mm=d.getMinutes();  
       var ss=d.getSeconds(); 
       var timeString = ((hh < 10) ? "0" : "") + hh; 
       timeString += ((mm < 10) ? ":0" : ":") + mm; 
       timeString += ((ss < 10) ? ":0" : ":") + ss; 
       console.log(timeString);   
       var currentTime=timeString; 
       console.log('current time is '+currentTime);  
       Array.prototype.forEach.call(Startvideo, function(elem) {   
       var getStartTime = elem.getAttribute('startat');   
       console.log('start time is '+ getStartTime)     
        if(getStartTime <= currentTime && elem.getAttribute('endat') >= currentTime){      
        var currentTimeSecond=currentTime.split(':'); 
        var getStartTimeSecond=getStartTime.split(':');   
        var TimeSecondsCurrent = (+currentTimeSecond[0]) * 60 * 60 + (+currentTimeSecond[1]) * 60 + (+currentTimeSecond[2]); 
        console.log(TimeSecondsCurrent); 
        var TimeSecondsGetStart= (+getStartTimeSecond[0]) * 60 * 60 + (+getStartTimeSecond[1]) * 60 + (+getStartTimeSecond[2]); 
        console.log(TimeSecondsGetStart); 
        var totalSeconds= TimeSecondsCurrent - TimeSecondsGetStart;    
        console.log(totalSeconds); 
        var c=elem.getAttribute('src');   
        mediaPlayer.src = c; 
        mediaPlayer.currentTime= totalSeconds; 
        mediaPlayer.play(); 
       }  
       }); 
      }    
     });

来源

2016-01-03 Roshan Sankhe

告诉我们更多一点关于_unable检索根据当前视频的整理后的下一个视频目前time_ – Rayon

假设当前时间是8点56分12秒。在这里，我从08:50:12到08:59:12播放了视频范围的成功。但无法播放下一个视频意味着范围从08:59:12到09:12:12。 –

如何识别当前视频已完成播放？ – Rayon

下面是代码来实现这一点。

loadVideo()读取source标记的startat属性。

这些来源保存在隐藏的div内。一旦视频结束，下一个将被加载并写入video标记。

<div id="myVideoSources" style="display:none;"> 
    <source class="active" src="vid1.mp4" id="videoSource" type="video/mp4" startat="00:00:00" endat="00:04:07" name="Something" description="This is Gujarati Videol"> 
    <source class="active" src="vid2.mp4" id="videosource2" type="video/mp4" startat="00:02:50" endat="00:19:06" name="PHP Video 00:04:07" description="This is PHP Video"> 
    <source class="active" src="php.mp4" id="videosource3" type="video/mp4" startat="00:19:06" endat="00:34:05" name="PHP Video" description="This is PHP Video"> 
    <source class="active" src="php.mp4" id="videosource4" type="video/mp4" startat="00:34:05" endat="00:49:04" name="PHP Video" description="This is PHP Video"> 
    <source class="active" src="marimatrubhasha.mp4" id="videosource5" type="video/mp4" startat="00:49:04" endat="00:53:11" name="Gujarati Bhasha" description="This is Gujarati Video"> 
</div> 
<video id="media-video" width="600" height="300"></video> 
<script> 
    $(function() { 
     var sources = $("#myVideoSources source"); 
     var jVideo = $("#media-video"); 
     var currentVideoNum = 0; 
     loadNextVideo(); 

     jVideo.bind("ended", function() { 
      loadNextVideo(); 
     }); 

     function loadNextVideo() { 
      var source = $(sources.get(currentVideoNum)); 
      currentVideoNum++; 
      if(currentVideoNum >= sources.length) { 
       currentVideoNum = 0; 
      } 

      jVideo.html(""); 
      jVideo.append(source); 
      var plainVideo = jVideo.get(0); 
      plainVideo.load(); 

      plainVideo.play(); 
      plainVideo.currentTime = getStartTime(source); 
     } 

     function getStartTime(source) { 
      var time = 0; 
      try { 
       var startAtStr = source.attr("startat"); 
       time = startAtStr.split(":"); 
       time = (time[0] * 3600) + (time[1] * 60) + (time[2] * 1) 
      } catch(e) { 
       console.log(e); 
       time = 0; 
      } 
      return time; 
     } 
    }); 
</script>

来源

2016-01-03 04:15:28 11thdimension

当我的当前视频完成使用Java脚本时，如何播放下一个视频？

回答

相关问题