I like to find out the video lenght from a local file on users desktop before uploading. The "video.onload" event didn't fire (see code) so I helped myself with a setTimeout once the video is loaded. But I don't like to use the setTimeout. Is there a cleaner way?
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var output = [];
for (var i = 0, f; f = files[i]; i++) {
var video = document.getElementById('myVideo');
var obj_url = window.URL.createObjectURL(f);
video.src = obj_url;
console.log(f.name+ " " +f.type);
console.log(video.src);
video.onload = function() {
// It didn't work so I used delayedchk()
// window.URL.revokeObjectURL(this.src);
}
delayedchk();
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
function show(){
vid = document.getElementById("myVideo");
document.getElementById("laenge").innerHTML = Math.floor(vid.duration);
vid.play();
window.URL.revokeObjectURL(vid.src);
}
function delayedchk(){
var vdur = document.getElementById("myVideo").duration;
console.log(typeof vdur +' = '+vdur);
if( isNaN(vdur) ){
setTimeout(delayedchk,500);
}else{
show();
}
}
<!DOCTYPE html>
<html>
<body onload="show()">
<video id="myVideo" src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"></video>
<h1>Lenght: <span id="laenge"></span> sec.</h1>
<input type="file" id="files" name="files[]" multiple />
</body>
</html>
You can retrieve the video's duration property by listening to the loadedmetadata event:
var myVideoPlayer = document.getElementById('myVideo');
myVideoPlayer.addEventListener('loadedmetadata', function() {
document.getElementById('laenge').innerHTML = myVideoPlayer.duration;
});
<h1>Length: <span id="laenge"></span> sec.</h1>
<video id="myVideo" src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" autoplay></video>
Related
i have this code for autoplay (playlist) movie
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Movie Playlist</title>
<script>
var videoPlayer;
var video_count = 1;
window.onload = function (){
videoPlayer = document.getElementById("homevideo");
videoPlayer.addEventListener("ended", function (){
video_count++;
if (video_count == 6) video_count = 1;
var nextVideo = video_count+".mp4";
videoPlayer.src = nextVideo;
}, false);
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div style="width:100%;margin:0px auto;">
<video id="homevideo" width="100%" autoplay autobuffer src="1.mp4"></video>
</div>
on the code above, i have 5 .mp4 movie, but if i have more than 5 .mp4 movie, the 6.mp4, 7.mp4 and other will not be played. so, how can i dynamically set the movie count pure using html5 or javascript?
You are better off having your server provide this information.
But for your existing approach, I'm assuming your video names are in sequential order ... so 1.mp4, 2.mp4, 3.mp4, etc ... so you could keep looping through the videos while increasing the count, and once a video fails to load at a given video_count, you can know that it is the limit and loop back to the start if you wanted.
function videoExists(videoUrl){
var http = new XMLHttpRequest();
http.open('HEAD', videoUrl, false);
http.send();
return http.status != 404;
}
So, for example ...
var videoPlayer;
var video_count = 1;
var video_max = 0;
window.onload = function (){
videoPlayer = document.getElementById("homevideo");
videoPlayer.addEventListener("ended", function (){
var nextVideo = (video_count+1)+".mp4";
if(video_count <= video_max || videoExists(nextVideo)){
videoPlayer.src = nextVideo;
video_count++;
}else{
video_max = video_count;
//reset back to original video
video_count = 1;
videoPlayer.src = video_count+".mp4";
}
}, false);
}
I didn't test the code, but you should get the idea. Please let me know if you have any questions about this approach.
I made a html5 audioplayer with a limited loop function, but I can't manage to keep this functionality when I want to replace the audioplayer with buttons and adding an eventhandler to them. In this example the checkbox had to be checked and the 2nd option of the selectmenu must be selected, before the repeatfunction works. Somehow the repeat-function stops working when I add:
"document.getElementById("Play").addEventListener("click", myFunction);". If I remove it, the code works, but only when I use the html audioplayer itself.
My code:
<!DOCTYPE html>
<html>
<body>
<span style="font-family:arial; font-size:16px;"><b>Pre:</b></span>
<input id="precount" type="checkbox"><br><br>
<span style="font-family:arial; font-size:16px;"><b>Repeat:</b></span>
<select>
<option id="ok1">1x</option>
<option id="ok2">2x</option>
<option id="ok3">3x</option>
</select><br><br>
<audio id="myAudio" controls>
<source src="http://u1259p183.web0080.zxcs.nl/jQuery.mmenu-master/demo/sortablemenumobile/range_items/audio_notes/10_a.mp3">
</audio>
<script>
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function PauseSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
}
</script>
<form>
<input type="button" value="PlaySound" id="Play">
<input type="button" value="PauseSound" id="Pause">
</form>
<script>
document.getElementById("Play").addEventListener("click", function);
var loopLimit = 2;
var loopCounter = 0;
var aud = document.getElementById("myAudio");
aud.onended = function() {
if ((loopCounter < loopLimit) && (document.getElementById("ok2").selected==true) &&(document.getElementById("precount").checked==true)){
this.currentTime = 0;
this.play();
loopCounter++;
}
};
</script>
</body>
</html>
Change line with event listener, and put variable definitions before it:
var aud = document.getElementById("myAudio");
var loopLimit = 2;
var loopCounter = 0;
document.getElementById("Play").addEventListener("click", function (){
loopCounter = 0;
aud.play();
});
I tried below code written on developer.apple.com but it throw error says:
TypeError: 'undefined' is not a function (evaluating 'myVideo.canPlayType(myTypes[i])')
<!doctype html>
<html>
<head>
<title>JavaScript Fallback</title>
<script type="text/javascript">
function checkPlaylist() {
var playAny = 0;
myTypes = new Array ("video/mp4","video/ogg","video/divx");
var nonePlayable = "Your browser cannot play these movie types."
var myVideo = document.getElementsByTagName('video')[0];
for (var i = 0, len = myTypes.length; i < len; x++) {
var canPlay = myVideo.canPlayType(myTypes[i]);
if ((canPlay == "maybe") || (canPlay == "probably"))
playAny = 1;
}
if (playAny == 0)
document.getElementById("video-player").innerHTML = nonePlayable;
}
</script>
</head>
<body onload="checkPlaylist()" >
<div id="video-player" align=center>
<video controls height="200" width="400">
<source src="myMovie.m4v" type="video/mp4">
<source src="myMovie.oga" type="video/ogg">
<source src="myMovie.dvx" type="video/divx">
</video>
</div>
</body>
</html>
Check your myTypes array parameter in Safari browser with below script:
<!DOCTYPE html>
<html>
<body>
<p>Can my browser play DIVX videos? <span>
<button onclick="supportType(event,'video/divx','H.264')" type="button">Test</button>
</span></p>
<p>Can my browser play MP4 videos? <span>
<button onclick="supportType(event,'video/mp4','avc1.42E01E, mp4a.40.2')" type="button">Test</button>
</span></p>
<p>Can my browser play OGG videos? <span>
<button onclick="supportType(event,'video/ogg','theora, vorbis')" type="button">Test</button>
</span></p>
<script>
function supportType(e,vidType,codType) {
var vid = document.createElement('video');
isSupp = vid.canPlayType(vidType+';codecs="'+codType+'"');
if (isSupp == "") {
isSupp = "No";
}
e.target.parentNode.innerHTML = "Answer: " + isSupp;
}
</script>
</body>
</html>
Are you in Safari for Windows? If so that will probably fail. Safari for windows is no longer supported by Apple.
Also you have var i = 0, len = myTypes.length; i < len; x++.
The last x should be i.
I am trying to write code to play a continous loop of two videos. I have tried to do so by this code, but it has not been done. Being new to html5 and javascript need help to make required corrections.
<!doctype html>
<html><head>
<script>
var videoSource = new Array();
videoSource[0]="videfirst.mp4";
videoSource[1]="videosecond.mp4";
var videoCount = videoSource.length;
document.getElementById("myVideo").setAttribute("src",videoSource[0]);
function videoPlay(videoNum)
{
document.getElementById("myVideo").setAttribute("src",videoSource [videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener ('ended',myHandler,false);
function myHandler() {
i++;
if(i == (videoCount-1)){
i = 0;
videoPlay(i);
}
else{
videoPlay(i);
}
}
</script>
</head>
<body>
<video controls height="180" width="300" id="video" >
</video>
</body>
</html>
My requirement is i have to place N number of videos in same place and if one video ended then next video has to start like wise....
Here i have tried with four videos its not starting the second video.
Could you please help me
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
function run(){
video_count++;
if (video_count == 4) video_count = 1;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
</script>
<video id="homevideo" width="100%" autoplay onended="run()">
<source id="ss" src="video1.mp4" type='video/mp4'/>
</video>
try to remove onended-tag and add javascript event. Does it help?
videoPlayer.onended(function(e) {
run();
};
try to use it help you?
**In Head tag:**
<script type="text/javascript" language="javascript">
video_count = 1;
function run() {
video_count++;
var videoPlayer = document.getElementById("homevideo");
if (video_count == 4)
video_count = 1;
var nextVideo = "ModelVideo/1/video" + video_count + ".mp4";
videoPlayer.src = nextVideo;
videoPlayer.load();
videoPlayer.play();
};
</script>
In Body tag:
<div style="width: 30%;">
<video id="homevideo" width="100%" controls autoplay onended="run()">
<source id="ss" src="ModelVideo/1/video1.mp4" type='video/mp4'/></video>
</div>