We Keep Coding

Queuing YouTube Videos

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"]
});

Control start position and duration of play in HTML5 video

We have a video (13 minutes long) which we would like to control using HTML5. We want to be able to let our users control and select the parts of the video they want to play. Preferably this control would be through 2 input fields. They would input start time (in seconds) in first box and input duration to play (in seconds) in second box. For example, they might want to start the video 10 seconds in and play for 15 seconds. Any suggestions or guidance on the Javascript needed to do this?
Note: I have found the following:
Start HTML5 video at a particular position when loading?
But it addresses only starting at a particular time, and nothing with playing the video for a specified length of time.

You could use the timeupdate event listener.
Save the start time and duration time to variable after loadedmetadata event.
// Set video element to variable
var video = document.getElementById('player1');
var videoStartTime = 0;
var durationTime = 0;
video.addEventListener('loadedmetadata', function() {
videoStartTime = 2;
durationTime = 4;
this.currentTime = videoStartTime;
}, false);
If current time is greater than start time plus duration, pauses the video.
video.addEventListener('timeupdate', function() {
if(this.currentTime > videoStartTime + durationTime){
this.pause();
}
});

If you are able to set start time and end time of video while setting the video url.
you can specify the start and end time in the url itself like
src="future technology_n.mp4#t=20,50"
it will play from 20th second to 50th second.

There are a lot of nuances to using the javascript solution proposed by Paul Sham. A much easier course of action is to use the Media Fragment URI Spec. It will allow you to specify a small segment of a larger audio or video file to play. To use it simply alter the source for the file you are streaming and add #t=start,end where start is the start time in seconds and end is the end time in seconds.
For example:
var start = document.getElementById('startInput').value;
var end = document.getElementById('endInput').value;
document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end;
This will update the player to start the source video at the specified time and end at the specified time. Browser support for media fragments is also pretty good so it should work in any browser that supports HTML5.

Extend to michael hanon comments:
IE returns buffered.length = 0 and seekable.length = 0. Video doesn't play. So solution:
src="video.mp4#t=10,30"
will not works in IE. If you would like to support IE only way is to use javascript to seek video just after start from 0 second.

If video = duration stop and rewind

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);

Seek in flowplayer on page load

I want to seek a flowplayer at the page load.
I have tried:
$(document).ready(function() {
$f(0).seek(5);
});
and
$(document).ready(function() {
while(!$f(0).isLoaded()) {
$f(0).seek(5);
}
});
and
$(document).ready(function() {
$f(0).onLoad(function() {
$f(0).seek(5);
});
});
and this one gave result, for a while
$f(0).onLoad(function() {
$f(0).seek(5);
});
The last one moved the pointer to 5 seconds, and back to the start right after.
I want it to stand there.
Any suggestions?

official answer:
http://flowplayer.org/forum/3/101287#post-101528
looks like I was downvoted for just putting a link, and that is understandable as flowplayer has changed their forum URLS!
https://web.archive.org/web/20120629142246/http://flowplayer.org/forum/3/101287
Here is the OP
Found this old question on stack overflow...
http://stackoverflow.com/questions/5034858/seek-in-flowplayer-on-page-load
Wondering what the official answer is? How do you seek on load?
and the response
The onLoad event (of the player) is to early an event to seek a clip.
So you cannot seek onLoad.
You can seek once a clip is loaded and in play or pause state.
Move the seek in the onStart event of the clip - always assuming that you deploy via a streaming server.

I think in some cases it would help to pause the player, jump to the prefered position and the start again. When you have Flowplayer configured to auto buffer it will start playing and pause at the first frame. That could maybe explain the behavior you are seeing (seek to 5, jump to 0 and jump to 5 again. But I think your fix using the load event pretty well solves it, I've used a similar trick to wait for duration to become available.

Solved it!
Used
$f(0).onLoad(function() {
$f(0).seek(5);
setTimeout('$f(0).seek(5)',1000);
}
Then it seeked to 5, jumped back to zero for some reason, and seeked to 5 again.

HTML5 Playlist plays 2 videos, How about 4 or 5?

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