当当前时间和开始时间(源标记中的startat属性)匹配时,我如何播放视频
How can I play the video when current time and start time (startat attribute in source tag) is match?
在这里,我成功地检索到了开始时间(源标记中的startat属性)大于当前时间的视频。但当时间与匹配时无法播放视频
HTML
<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">
<source class="active" src="http://localhost/CastingGallery/upload/2/php.mp4" id="videosource" type="video/mp4" startat="00:19:06" endat="00:34:05" name="PHP Video" description="This is PHP Video">
<source class="active" src="http://localhost/CastingGallery/upload/2/php.mp4" id="videosource" type="video/mp4" startat="00:34:05" endat="00:49:04" 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]');
var d=new Date();
var hh=d.getHours();
var mm=d.getMinutes();
var ss=d.getSeconds();
var timeString = ((hh < 12) ? ":0" : "") + hh;
timeString += ((mm < 10) ? ":0" : ":") + mm;
timeString += ((ss < 10) ? ":0" : ":") + ss;
var currentTime=timeString;
var getStartTime = document.getElementById('videosource').getAttribute('startat');
Array.prototype.forEach.call(Startvideo, function(elem) {
var getStartTime = elem.getAttribute('startat');
console.log('start time is '+ getStartTime )
if (getStartTime >= currentTime) {
var c=elem.getAttribute('src');
mediaPlayer.src=c
var currentTimeSecond=currentTime.split(':');
var getStartTimeSecond=getStartTime.split(':');
var TimeSecondsCurrent = (+currentTimeSecond[0]) * 60 * 60 + (+currentTimeSecond[1]) * 60 + (+currentTimeSecond[2]);
var TimeSecondsGetStart= (+getStartTimeSecond[0]) * 60 * 60 + (+getStartTimeSecond[1]) * 60 + (+getStartTimeSecond[2]);
for (var i=TimeSecondsCurrent; i <= TimeSecondsGetStart; i++ ){
if(TimeSecondsGetStart == TimeSecondsCurrent){
mediaPlayer.play();
}
}
}
});
});
$(document).ready(function(){
var mediaPlayer = document.getElementById('media-video');
var videosource=document.getElementById('source');
var Startvideo = mediaPlayer.querySelectorAll('source[startat]');
var d=new Date();
var hh=d.getHours();
var mm=d.getMinutes();
var ss=d.getSeconds();
var timeString = ((hh < 12) ? ":0" : "") + hh;
timeString += ((mm < 10) ? ":0" : ":") + mm;
timeString += ((ss < 10) ? ":0" : ":") + ss;
var currentTime=timeString;
var getStartTime = document.getElementById('videosource').getAttribute('startat');
Array.prototype.forEach.call(Startvideo, function(elem) {
var getStartTime = elem.getAttribute('startat');
console.log('start time is '+ getStartTime )
if (getStartTime >= currentTime) {
var c=elem.getAttribute('src');
var currentTimeSecond=currentTime.split(':');
var getStartTimeSecond=getStartTime.split(':');
var TimeSecondsCurrent = (+currentTimeSecond[0]) * 60 * 60 + (+currentTimeSecond[1]) * 60 + (+currentTimeSecond[2]);
var TimeSecondsGetStart= (+getStartTimeSecond[0]) * 60 * 60 + (+getStartTimeSecond[1]) * 60 + (+getStartTimeSecond[2]);
var totalSeconds= TimeSecondsGetStart - TimeSecondsCurrent;
var totalmiliseconds = totalSeconds * 1000;
console.log(totalmiliseconds);
setTimeout(myfunction,totalmiliseconds);
function myfunction(){
var c=elem.getAttribute('src');
console.log(c);
mediaPlayer.src=c;
mediaPlayer.play();
}
}
});
});
相关文章:
- 输入视频文件时获取视频持续时间
- 如何从某个时间开始预加载HTML5视频
- 如何使用javascript在嵌入式youtube视频上创建可点击的时间戳链接
- 在一天中的某个时间自动在我的网站上播放视频
- 生成由文件输入在特定时间选择的视频文件的缩略图/快照
- 限制 HTML5 视频当前时间
- 如何将HTML5视频快进或快退到某个时间点
- 播放Html5视频并在特定时间点暂停
- 如何在一定时间后暂停视频?video.js
- Node Webkit从avi文件路径获取视频持续时间
- 如何在HTML视频达到特定时间标记时触发事件
- YouTube V3 API——按持续时间过滤相关视频信息,不;似乎不起作用
- 通过带有jQuery的按钮跳到HTML5视频中的特定时间
- 在确切时间停止视频
- Javascript html5 视频在特定时间添加/删除类
- 显示视频JS的视频持续时间
- 视频.JS - 一次在确切时间触发多个事件
- Internet Explorer HTML5 视频仅在一段时间后才会开始
- 如何在实际时间(如 3.00 秒)内暂停/停止视频
- Javascript函数在视频时间更新时未触发