Hi I'am using a html5 video player i want to get a time duration of each video in my playlist array.
Below is the code i'am using but it shows the NaN in console.
Please Help Me...Thank's for all in advanced.
$.each(self._playlist.videos_array, function(key ) {
if(1) {
self.dummy_video = $("<video />");
console.log(self._playlist.videos_array[key].Levels[0].mp4);
self.dummy_video.attr('src', self._playlist.videos_array[key].Levels[0].mp4);
//self.dummy_video.load();
//self.dummy_video[0].play();
//self.dummy_video[0].pause();
var video = self.dummy_video.get(0);
console.log(video.duration);
}
});
There are two ways of fixing this:
Using setInterval: Problem retrieving HTML5 video duration
Using events: current/duration time of html5 video?
From W3C#mediaevents:
The event loadedmetadata's description:
The user agent has just determined the duration and dimensions of the media resource and the text tracks are ready.
You can listen to that event, and until then, the duration of the video is NaN.
Demo below:
$(function() {
var video = $("<video>");
video[0].addEventListener("loadedmetadata", function() {
// Here you will get a valid duration now.
console.log("Video duration now: " + video[0].duration);
});
video.attr("controls", "controls").attr("src", "https://avvimeo-a.akamaihd.net/68093/485/101309641.mp4?token2=1436525964_a8966f84e4a514fdb7a406a9ee6f1e30&aksessionid=6475e4121b60d4cf");
video.appendTo($("#playblock"));
// Here's the position of your console.log, it'll put NaN here.
console.log("Video duration now: " + video[0].duration);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="playblock"></div>
Related
I have been trying to change the video playback quality/resolution of an iframe embedded video from YouTube using YouTube IFrame API by simply calling player.setPlaybackQuality("hd720") in the middle of playback.
According to YouTube: https://developers.google.com/youtube/iframe_api_reference#setPlaybackQuality
"The function causes the video to reload at its current position in the new quality."
BUT, the quality of the video is changing only when the current playback time reaches the end point of the buffered old quality stream. So, how can I force the player to buffer the video at the new resolution at that very moment and start showing it from exactly that 'current duration' of the video just as it happens inside YouTube?
By the way, I'm using pre-defined iframe tag in the html with all the parameters in the embed URL, like so:
<iframe id="genesis" src="https://www.youtube.com/embed/EZgTo1kKSsg?enablejsapi=1&controls=0&showinfo=0&iv_load_policy=3&modestbranding=1&rel=0&fs=1" frameborder="0"></iframe>
And creating the player, like so:
$.getScript("https://www.youtube.com/player_api");
function onYouTubeIframeAPIReady() {
player = new YT.Player('genesis', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onPlaybackQualityChange': onQualityChange
}
});
}
function onQualityChange(){
console.log('Now playing at ' + player.getPlaybackQuality());
// Though it returns "hd720" within a few moments after hitting
// setPlaybackQuality("hd720"), actual playback quality remains the older one.
}
$(document).on('click', '.play', function(){
player.playVideo();
});
$(document).on('click', '#res_change_while_playing', function(){
player.setPlaybackQuality($(this).data("id")); // data-id="hd720"
});
Please help!
Thanks.
You can use seek function to re-buffer the video after you call setPlaybackQuality function
function onQualityChange(){
player.setPlaybackQuality("small")
player.seekTo(60) // or set to CurrentTime using player.getCurrentTime()
}
if this code doesnt work, you must stop the video first, then set the video quality, then seek to your time
I am trying to get video duration in HTML5 with out playing video or before playing video to show on video thumb as you seen on you tube or any other video sites.
Any help will be really appreciate.
Thanks in Advance.
For HTML5 you should be able to use the video tag's duration property, once the file's metadata is loaded. See this answer for a good way to do it:
Retrieving HTML5 video duration separately from the file
To quote the anwser by Mikushi:
myVideoPlayer.addEventListener('loadedmetadata', function() {
console.log(videoPlayer.duration);
});
By listening for the 'loadedmetadata' event you will ensure the duration value has been loaded.
More details on the loadedmetadata can be found here: http://www.w3schools.com/tags/av_event_loadedmetadata.asp
EDIT
As per #lucas-vasques 's comment, instead of the loadmetadata event, you could use durationchange which the MDN Media Events list describes as ...
The metadata has loaded or changed, indicating a change in duration of
the media. This is sent, for example, when the media has loaded
enough that the duration is known.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function getDuration() {
var s = document.getElementById('a');
alert(s.duration)
}
</script>
</head>
<body>
<div>
<video src="2.mp4" id="a" controls="controls"></video>
<button onclick="getDuration()">get duration</button>
</div>
</body>
</html>
There is a special event triggered on video elements called "loadedmetadata". Once this one is triggered, properties such as duration are available on the video element.
Here's an exhaustive list of all HTML5 video events : http://www.w3.org/2010/05/video/mediaevents.html
// Assume "video" is the video node
var i = setInterval(function() {
if(video.readyState > 0) {
var minutes = parseInt(video.duration / 60, 10);
var seconds = video.duration % 60;
// (Put the minutes and seconds in the display)
clearInterval(i);
}
}, 200);
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.
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.