如何使用java脚本只播放当前时间大于开始时间的视频

How can I play only those videos where current time is greater than start time using java script?

本文关键字：时间 大于 开始 开始时 的视频 java 何使用 脚本 播放      更新时间：2023-09-26

无法检索和播放视频

<video id="media-video" width="600" height="300" src="http://localhost/CastingGallery/upload/2/php.mp4">        
<source class="" src="http://localhost/CastingGallery/upload/2/marimatrubhasha.mp4" id="videosource" type="video/mp4" startat="00:00:00" endat="00:04:07" name="Gujarati Bhasha" description="This is Gujarati Video">                  
<source class="active" src="http://localhost/CastingGallery/upload/2/php.mp4" id="videosource" type="video/mp4" startat="00:04:07" endat="00:19:06" name="PHP Video" description="This is PHP Video">
</video>

我只想获取当前时间大于视频开始时间的视频

<script>
$(document).ready(function(){
    var mediaPlayer = document.getElementById('media-video');
    var videoSource = mediaPlayer.getElementsByTagName('source');   
    var d=new Date();
    var hh=d.getHours();
    var mm=d.getMinutes();
    var ss=d.getSeconds();
    var currentTime=hh+':'+mm+':'+ss
    console.log('current time is '+currentTime);
    var a=currentTime.split(':');       
    var getStartTime=document.getElementById('videosource').getAttribute('startat');        
    if(currentTime >= getStartTime)
    {   
        var a=currentTime.split(':');
        var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);           
        mediaPlayer.currentTime=seconds;        
        mediaPlayer.play();
    }       
    }); 
   </script>

您需要遍历所有source元素并比较startat属性。

还要注意，您不应该有多个具有相同value 的id属性

试试这个：

$(document).ready(function() {
  var mediaPlayer = document.getElementById('media-video');
  var videoSource = mediaPlayer.getElementsByTagName('source');
  var d = new Date();
  var hh = d.getHours();
  var mm = d.getMinutes();
  var ss = d.getSeconds();
  var currentTime = hh + ':' + mm + ':' + ss;
  var a = currentTime.split(':');
  var getStartTime = document.getElementById('videosource').getAttribute('startat');
  Array.prototype.forEach.call(videoSource, function(elem) {
    var getStartTime = elem.getAttribute('startat');
    if (currentTime >= getStartTime) {
      alert(elem.getAttribute('name'));
      var a = currentTime.split(':');
      var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
      mediaPlayer.currentTime = seconds;
      mediaPlayer.play();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<video id="media-video" width="600" height="300" src="http://localhost/CastingGallery/upload/2/php.mp4">
  <source class="" src="http://localhost/CastingGallery/upload/2/marimatrubhasha.mp4" id="videosource" type="video/mp4" startat="00:00:00" endat="00:04:07" name="Gujarati Bhasha" description="This is Gujarati Video">
    <source class="active" src="http://localhost/CastingGallery/upload/2/php.mp4" id="videosource" type="video/mp4" startat="00:04:07" endat="00:19:06" name="PHP Video" description="This is PHP Video">
</video>

Fiddle here

相关文章：