I'm using vide to play a video background on my website. I want to play one video then a second video before looping back to the first video again. Can / has this be done using vide. If so has anyone got any code
Kind regards
Jordan
run the second video when first one is ended
video.onended = function(e) {
//run the second vidio
}
Related
I have a webpage with three small html5 videos. When this part of the page loads the first video plays, then when it ends the second video plays, and when the second ends then the third plays. I did this with addEventListener for 'ended'. My code looks like this:
//first video
var player1=document.getElementById('firstVideo');
player1.addEventListener('ended',vidHandlerLow,false);
//second video
var player2=document.getElementById('secondVideo');
player2.addEventListener('ended',vidHandlerMedium,false);
//third video
var player3=document.getElementById('thirdVideo');
player3.addEventListener('ended',vidHandlerHigh,false);
player1.play();
function vidHandlerLow() {
player1.pause();
player2.play();
}
function vidHandlerMedium() {
player2.pause();
player3.play();
}
function vidHandlerHigh() {
player3.pause();
}
The issue I'm having is that i'm trying to play a single video on hover without triggering the ended event which will play the rest. I have tried:
onmouseover="this.removeEventListener('ended'); this.play();"
But the ended event is still triggered. If I hover over video1 then video1 will play then two and three when only the hovered video should play. Any suggestions how to play a single video without my video ended events from running?
Since I only need the videos to autoplay once I was able to remove the event listeners in the functions I call on 'ended' like this:
function vidHandlerLow() {
player1.pause();
player1.removeEventListener('ended', vidHandlerLow);
player2.play();
}
I want to know how to add selected YouTube videos to a temporary playlist / playing queue?
I have an option where user have to select what all videos to be included in the playing queue.
Click on the ADD icon (black background box) and that selected video will be displayed in the purple background and it also has to be included in the playlist/Queue.
I am able to add the videos in the purple box but unable to add them in the queue.
I tried using this code
player.cuePlaylist({
list: ["83uA6kS_6LE", "RVYU9Be2RtA", "DkQRcjKTqiU", "5NUZtQRgLSQ"] //array of videos ID
});
After that when currently playing video ends I tried to play next video using
function onPlayerStateChange(event) {
if(event.data==0){ //when video ends event.data becomes 0
player.nextVideo();
}
But it neither do anything nor shows any error in the console.
I even tried replacing player.nextVideo(); with player.playVideo(); then instead of starting next video it re-plays the current one.
I tried looking for it in the YouTube documentation but couldn't find anything
https://developers.google.com/youtube/js_api_reference#Queueing_Functions
EDIT 1
TRIED with
cueVideoById(); loadVideoById();
But not working.
I would really appreciate if you guys can provide me an answer or a way to reach the correct audience for this question.
I think the issue is that you have a typo in your call to cuePlaylist. The argument is "playlist" and not "list". Try this:
player.cuePlaylist({
playlist: ["83uA6kS_6LE", "RVYU9Be2RtA", "DkQRcjKTqiU", "5NUZtQRgLSQ"]
});
I'm trying to make a kisok application to show some slides and play 2 videos from a menu using reveal.js. it is all working well and looks great apart from the video playback.
Im using a <video> tag inside the <section> as the data-background-video="something.mp4" didn't seem to restart on slide change either.
If i'm navigating out of the playing video slide and then returning to it, the video resumes where it left off and doesn't restart at the beginning as I require like even though autoplay is set to true.
I have tried to write something that does this with javascript using the api on Reveal.addEventListener after naming the <section> with data-state="something" and it works.. well kind of.. it works successfully for the first video only, well, then only for a while then it seems to break all video playback. the second video plays once then will not restart and i then can not control it via the console either.
here is the relevant html:
<!--*********************************************************Video 1 Page-->
<section id="rene_vid_page" data-state="video1_show" data-transition="fade-in fade-out" data-background="img/Backdrop.svg">
<h1 class="page_title">My page title</h1>
<video id="rene_vidplayer" data-autoplay data-src="Videos/full_edit_portrait.mp4" ></video>
<!--*********************************************************End Of Video 1 Page-->
<!--*********************************************************Video 2 Page-->
<section id="conc_vid_page" data-state="video2_show" data-transition="fade-in fade-out" data-background-color="#c8c8c8">
<h1 class="page_title">My page title</h1>
<video id="conc_vidplayer" data-autoplay data-src="Videos/2 Conclusions.mp4" ></video>
</section>
<!--*********************************************************End Of Video 2 Page-->
Here is the javascript i have cobbled together,
this also advances to the next slide when the video is finished and that bit works..
<script>
var video = document.getElementById("rene_vidplayer");
video.onended = function (e) {
console.log("video_ended slide advance");
Reveal.next();
};
Reveal.addEventListener('video1_show', function (e) {
// Called when "video1_show" slide is made visible
console.log('"rene video show has been called"');
video.currentTime = 0;
console.log('"videotime set to 0"');
video.play();
console.log('"video set to play"');
});
var video2 = document.getElementById("conc_vidplayer");
video2.onended = function (e) {
console.log("video2_ended slide advance");
Reveal.next();
};
Reveal.addEventListener('video2_show', function (e) {
// Called when "video2_show" slide is made visible
console.log('"video2_show has been called"');
video2.currentTime = 0;
console.log('"videotime set to 0"');
video2.play();
console.log('"video2 set to play"')
});
</script>
I can see in the console that the logs i have put in are working in the right places but the video stops behaving :( the second video will run from video2.play() in the console but only if the first one hasn't finished or the second one been played already.
You can tell that my js coding is not great at the moment and there are probably so many errors, and ultimately a much better way of doing this.
Any help or advice is greatly appreciated as it is desperately needed for a show next week!!
Ok, so i got this to work by adding a video.load() and video2.load() into the respective Reveal.addEventListener sections. Not sure if there are any problems associated with doing it this way or whether there is a better way?
However this is now working fine! :)
I'm making a HTML5 video player. I want it so that when the movie stops the play these executes
video.pause();
video.currentTime=0;
document.getElementById('message').innerHTML="Finished";
I tried this but it didn't work
function rewsi() {
var video = document.getElementsByTagName('video')[0];
if (video.currentTime==video.duration) {
video.pause();
video.currentTime=0;
document.getElementById('message').innerHTML="Finished";
}
}
Anyone got a solution for this problem?
Problem = My lack of knowledge in JavaScript
Looking at the following question and asnwer:
HTML5 <video> callbacks?
I would assign a callback to be executed when the video has actually ended like so:
var Media = document.getElementsByTagName('video')[0];
var Message = document.getElementById('message');
Media.bind('ended',function(){
Message.innerHTML = "The media file has completed";
});
You also stated that when the media 'stops' you want to pause the video, can you describe your motives for doing that ?
The next on the agenda is the video resetting as such, looks like you want to set the position of the media to the start if the media stops, you must first make sure that your determining that the video has not been paused, as you do not want to reset the position if the user has gone to make a cup of coffee.
If you only want to set the media position when the movie has actually ended then this would be pointless (unless you have a valid reason to do so), the reason it would be pointless is that when the user clicks play after it has ended, the default action html5 media player takes is to set the position to 0.
The above solution should work out exactly right for you.
i will recommend using Kaltura HTML5 Video Library to help you manage the media player.
First, you can check if the video has ended by simply putting a condition on video.ended. Then you can set the time with this.currentTime(0);
I'm able to get two videos to play sequentially, (and without pause!) with this code from Apple, (see section 2-4)...
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
...Yet completely lost as to how to play a 3rd or 5th video. Trouble is I'm a Javascript noob :-(, so if you figure this out please share as much of your code as possible.
The first video's ended => Start second video
The second video's ended => Start third video
The third video's ended => Start fourth video
The fourth video's ended => Start first video
It's just redefining the ended event handler nonstop...
You could also use a variable starting at 0. increment it each time and set SRC to i%video_count
var i = 0;
var sources = ["http://www.a.com/blargh.m4v", "http://www.b.com/blargh.m4v"];
videoElement.addEventListener('ended', function(){
videoElement.src = sources[(++i)%sources.length];
videoElement.load();
videoElement.play();
}, false);
...The above code assumes the video is already playing onload, like your example