当我的当前视频使用java脚本完成时,我如何播放下一个视频
How can I play the next video when my current video is finish using java script?
这里我成功地根据当前时间播放了视频,但在根据当前时间完成当前视频后无法检索下一个视频。这里,源标签中的startat attribue是该视频的开始时间。
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();
}
});
}
});
下面是实现这一目标的代码。
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>
相关文章:
- jQuery:在for循环中运行youtube视频,播放最后一个视频
- html视频javascript播放方法在移动Safari中不起作用
- 视频(自动播放)通过javascript隐藏,但已经在页面加载时启动
- 有没有一种方法可以检测Flash视频何时播放完毕
- 如何使用javascript更改YouTube视频的播放器设置
- 整页.js - 在背景视频循环播放时向右移动幻灯片
- 关闭后,引导模式弹出窗口上的视频继续播放音频
- Safari HTML 5 视频无法播放
- 触摸设备中的视频JS播放器覆盖按钮
- 在页面的 ajax 加载部分上初始化视频.js播放器
- HTML5 视频 - 开始播放后无法加载资源错误
- 让HTML5视频在播放后自行重置为开始
- 如何在移动设备上更改HTML5视频的播放速度
- 是否有JS功能可以使Brightcove智能播放器视频开始播放
- 检测 HTML 视频自动播放防护
- Facebook喜欢视频自动播放和暂停
- 视频.js播放器在释放并重新初始化后无法播放
- 使用 Youtube JS API 控制多个 Youtube 视频的播放(同时播放)
- 在 Twitter 引导中禁用视频自动播放,并在模式关闭时停止视频
- 使用自定义控件制作HTML5视频/音频播放列表播放器