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);
Related
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>
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.
Nothing specific, E.g:
I have a video [with controls(Pause, play, forward... ) in a tag] How would you do to: when the video is in the second 30, make a div appear, then, in the second 32, make it disappear.
Thanks :)
If you're using the HTML5 <video> element you can use the ontimeupdate event to track where the playback has got to, as in this example:
// display the current and remaining times
video.addEventListener("timeupdate", function () {
// Current time
var vTime = video.currentTime;
document.getElementById("curTime").textContent = vTime.toFixed(1);
document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);
Thanks to Microsoft for their reference
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>Video demo</title>
<script>
// ontimeupdate event handler
function update(e) {
// get the video element id so that we can retrieve the current time.
el = document.getElementById('myVideo');
// set the current time in the page
document.getElementById('timer').innerHTML = el.currentTime;
// If the current time is between 10 and 15 seconds pop-up the
// second div
if (el.currentTime > 20 && el.currentTime <=25) {
document.getElementById('popup').style.display='block';
} else {
document.getElementById('popup').style.display='none';
}
}
</script>
<style>
video {width:300px;}
</style>
</head>
<body>
<video id=myVideo ontimeupdate="update()" src="http://archive.org/download/HardDriveSpinning/HardDriveWebm.webm" autoplay>Sorry - format unsupported</video>
<div id="timer"></div>
<div id="popup" style="display:none">Boo!</div>
</body>
</html>
See it at this fiddle (Works for Firefox and Chrome. IE doesn't like the WebM video format)
You could use window.setTimeout to run a function after a specified amount of time. This won't be enough by itself if the user is able to pause the video. You'd have to tell us more about how you're displaying the video in order to get a more in-depth solution.
But perhaps more importantly, you might want to go back to square one and think again about what you're really trying to accomplish. Because it seems to me that if it seems like you need to trigger DOM manipulations based on the time index of a video, there's probably a better way to do what you really want that doesn't involve that.
I have to play a music file on HTML page which is running on android, also need to control the volume by javascript function. Can someone give me any idea?
If you are using the HTML5 <audio> element, you can control the volume using the .volume. attribute. Set it to 1.0 for max volume, and 0.0 to mute it.
For example, this script will begin playing a file, then reduce its volume to 25% after a few seconds.
<audio src="http://goo.gl/89jWZ" id="example"></audio>
<script>
var audioElement = document.getElementById("example");
audioElement.play();
setTimeout(function() {
audioElement.volume = 0.25;
}, 3000);
</script>
I am trying to prevent the default scrolling within a web app which contains an HTML5 video element on Mobile Safari. Handling document.ontouchmove and calling e.preventDefault() has been the standard way that I've found to achieve this.
This seems to work everywhere except when you touch on top of the video element, where you can start pulling the page all around as if it is going to scroll. This only seems to happen when the native video controls are forced on. If you don't include the controls attribute and load the video in a way that it can be played in-line (such as on the iPad or in a UIWebView with allowsInlineMediaPlayback set), scrolling is prevented properly. So it seems like it has something to do with the native video controls (the big play button) capturing the event.
Here is a contrived example of what I am doing:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Video Example</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
</head>
<body style="background: blue;">
<video src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v" controls></video>
<script>
window.onload = function() {
document.ontouchmove = function(e) {
e.preventDefault();
}
}
</script>
</body>
</html>
Any ideas of workarounds to completely prohibit scrolling behavior, even on the video? I've already tried handling ontouchmove directly on the video element and it doesn't work.
Thanks!
In my test, when ommiting the "controls" attribute of the video you can get the events to work. Use a custom div in top to provide custom controls
By example....
<video src="http://192.168.1.53/videoTester/Cuatro.mp4" id="player" width="100%" height="100%" x-webkit-airplay="allow" ></video>
Like you, I couldn't prevent scrolling, so as a workaround added a JS function to fire window.scrollTo(0, 1); every second which then means the user can only scroll for a certain time before the page is jumped back.
Try:
element.addEventListener('touchmove', function(event) {
// Prevent scrolling on this element
event.preventDefault();
}, false);
for just the element in question or:
window.addEventListener('touchmove', function(event) {
// Prevent scrolling on this element
event.preventDefault();
}, false);
for the whole window.
I came up with a good solution for this after running into the same issue. I got it to work by doing the following:
//Function to trigger when every half second to check if user scrolled
$(function () {
//select video player and the current time
var myPlayer = document.getElementById('VideoID');
var whereYouAt = myPlayer.currentTime;
var current;
setInterval(function () {
current = myPlayer.currentTime;
if (current > (whereYouAt + 1)) {
myPlayer.currentTime = whereYouAt; //If current 1 whole second
//Set time to before scroll.
}
else {
whereYouAt = current; //otherwise set where to current.
}
}, 500); //500 = half a second.
});
This will only work for HTML5 video and not if it triggers the mobile video player. I hope this helps and let me know if you have any questions.