`I have a video slider in my page all videos are in < video > tag in different .
So if i play 1 video and try to play other video both the video are playing same time i neeed to pause or stop the last video and when i play the second or any other video on the same screen. There should be only 1 video play at a time . Like if video 1 is playing when play video 2 video 1 should be pause/stop
$('video').on('click', function(e) {
let vids = $.makeArray($(this).siblings('video'));
vids.forEach(vid => {
vid.pause();
vid.classList.remove('active');
});
$(this).toggleClass('active');
if ($(this).is('.active')) {
this.play();
} else {
this.pause();
}
});
i tried this but when i click 1st video its not playing and acive class toggle working. Its not working like how i expected video not pause or active class not removing if i press other video `
So, I need to autoplay couple of videos with same class on page load. That is fine.
Then, when videos starts playing, when they reach for 1 second, I need them to stop automatically. The other part is what I need.
<video playsinline muted loop class="video">
<source src="video-source">
</video>
let videos = document.querySelectorAll('.video');
window.addEventListener('DOMContentLoaded', () => {
videos.forEach(el => {
el.play();
});
});
I have tried doing something like this, get currentTime and then make an IF statement but no luck. It always console loggs 0.
function myFunction() {
videos.forEach(el => {
console.log(el.currentTime);
if(el.currentTime = 5) {
el.pause();
}
});
}
Thanks!
The issue you will have with your current attempt is that it only runs once, you need to have a way of checking your logic at intervals so that you can continuously check the time lapsed.
You could potentially look at using the timeupdate video event, this runs repeatedly whilst a video is playing.
After the video ends i want it to be played again, but this time from a different start time. I have added a video ended event handler :
video.addEventListener('ended', handleVideoEnd);
And my handleVideoEnd looks like this:
function handleVideoEnd(e) {
if (currentVideo.loop) {
var video = document.getElementById('video');
video.currentTime = 1;
video.play();
}
}
Unfortunately when i use that code my video becomes corrupted for a couple of seconds resulting in that effect: http://screenshot.sh/m1UaF580NNx8B
This problem, however does not appear if i set the currentTime to 0.
I'm using webm video and testing it in chrome currently. Did anyone have a similar issue when seeking a video part?
How could make him appearing alert on the 5th second of a video HTML5 excluding the buffer loading time? I tried with currentTime but I can not display anything ...
<video id="video1"><source src="url" type="video/mp4" /></video>
Thank you very much in advance
I think that using a setInterval or setTimeout is a bad idea because user can, for example, pause the video, or if the video is buffering, ... so it's not a accurate manner to do what you are looking for.
Instead of that, you can use the timeupdate event to verify the currentTime of your video, like this :
$(function(){
var video = $('#video1')[0], current_time = 0, alert_showed = false;
video.addEventListener('timeupdate', function(){
current_time = Math.floor(video.currentTime);
if(current_time == 5 && !alert_showed){
alert_showed = true;
alert('text here : ' + current_time);
}
})
})
You can see a working example of this code here.
Hope that can help.
I am attempting to build a video sequencer that is capable of playing back a list of video URLs seamlessly in series. There cannot be a gap between the videos; the playback needs to be as close to frame-accurate as possible.
Attempt #1
I used a fairly obvious and straightforward approach, similar to that mentioned in this thread.
HTML 5 video or audio playlist
The issue with this approach was that each time one video ended and the subsequent video was specified as the new source, that new video still needed to load, resulting in a potentially long gap. If it is possible to force all the videos to preload even before they are named in video.src, this approach could still potentially work.
Attempt #2
I rewrote the script so each video in the list would result in a separate video element being created, but not attached to the document (using createElement). Then as each video ended, I removed the previous node and appended the next element.
Code executed on page load:
for (i in timelinePlay)
if (timelinePlay[i] != null)
{
var element = document.createElement('video');
element.id = 'video1-' + (i);
element.src = timelinePlay[i]['URL'];
element.preload = 'load';
video1Array[i] = element;
}
Code for video 'ended' event:
videoElement.addEventListener("ended", function (event) {
if (this.currentTime > 0)
{
if (player.hasChildNodes())
while (player.childNodes.length > 0)
player.removeChild(player.firstChild);
player = document.getElementById('canvas-player');
player.appendChild(video1Array[timelineCurrent]);
nextVideo = document.getElementById('video1-' + timelineCurrent);
nextVideo.play();
timelineCurrent++;
}
}, false);
(Note that these code examples are partial and somewhat simplified. Also, I do realize that my use of Objects as Associative Arrays is not best practice)
The result of this modification was MUCH closer, because the videos were now loaded by the time they were required to play, but there was still a short and inconsistent gap between the videos.
Attempt #3
I replaced the 'ended' event listener with a 'timeupdate' listener, beginning as follows:
nextVideo.addEventListener("timeupdate", function (event)
{
if (this.currentTime > (this.duration - 0.1) && this.currentTime > 1)
{
this.removeEventListener("timeupdate", function () { return; }, false);
('this.currentTime > 1' is simply to ensure that the previous video actually plays)
My hope was that the gap between videos was close enough to being consistent that starting the next video an arbitrary 0.1 seconds before the previous video ended would correct the gap to an acceptable extent. The result was that the timing was indeed better, but it was skipping videos. I attribute the skipped videos to misfiring of the 'timeupdate' event, but I could be mistaken.
Other alternative options I had also considered:
SMIL Script (seems to be obsolete, and would likely have the same syncing issues anyway)
ffmpeg on the backend to concatenate the videos (my host will not allow shell scripts)
FYI I am developing for Safari 5.0.3 at the moment
I had a similar problem that I managed to solve now thanks to your hints. The result is a possibly dynamic list of video elements that may be played back one after another without gaps.
Instead of a native Video Tag I use jwplayer on several video elements.
On startup all elements begin to play one second, are paused and rewound to zero.
Then one by another is played and made visible with display: block.
<ul class="playlist">
<li>
<video class="playlist" id="vid01" poster="img/preview.jpg">
<source src="vid/v01.mp4" type="video/mp4">
</video>
</li>
<li>
<video class="playlist" id="vid02" poster="img/preview.jpg">
<source src="vid/v02.mp4" type="video/mp4">
</video>
</li>
<li>
<video class="playlist" id="vid03" poster="img/preview.jpg">
<source src="vid/v03.mp4" type="video/mp4">
</video>
</li>
<li>
<video class="playlist" id="vid04" poster="img/preview.jpg">
<source src="vid/v04.mp4" type="video/mp4">
</video>
</li>
</ul>
On added to stage, 'preload' the video one or two seconds:
(Excerpt)
var isPrebuffering = false,
isSeeking = false;
$player = jwplayer(videoId).setup({
width: '800px',
height: '450px',
autoplay: false,
modes: [
{ type: 'html5' }
],
events: {
onReady: function(e) {
prebuffer();
},
// There is a quirk in jwplayer that makes it impossible to pause at the
// new position directly after seeking. So we have to work around that.
onTime: function(e) {
if((e.position > 1.0 && isPrebuffering) || isSeeking) {
finishPrebuffering();
}
}
}
});
function prebuffer() {
isPrebuffering = true;
$player.setMute(true);
$player.play();
};
function finishPrebuffering() {
if(isPrebuffering) {
isPrebuffering = false;
isSeeking = true;
$player.seek(0);
}
if($player.getPosition() === 0) {
isSeeking = false;
$player.pause();
$player.setMute(false);
}
};
The mediaElement interface of HTML5 can be quite confusing sometimes between preload, load and buffered.
But have you tried to put an event on your video to detect for example 3 seconds before the end of your video ?
Then in ajax try to load the next video in a new div.
On the ended event of your video you could switch the div, so your next video will be enough loaded to be played.
And so on for the next videos.
http://www.w3.org/TR/html5/video.html#media-elements
You might be able to do so with http://popcornjs.org/. They provide js hooks, on a frame by frame level into the video using html5 video tag. There are a lot of events etc.