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>
Related
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>
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 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.
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>
I want to play some YouTube video in my Metro app. I embed YouTube video in my app using YouTube Iframe API(Link). Then I meet a serious problem of memory leak. If I embed a YouTube video and then remove it, the memory will increase about 5MB and nerver decrease any more. Demo code is here:
default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframeTest</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- iframeTest references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body style ="">
<button id="remove" style="display:block; float:left;">remove a video</button>
<button id="add" style="display:block; float:left;">add a video</button>
</body>
</html>
default.js fragment:
document.getElementById("remove").addEventListener("click", function () {
var ifrs = document.querySelectorAll('div');
if (ifrs.length > 0) {
document.body.removeChild(ifrs[ifrs.length - 1]);
}
});
document.getElementById("add").addEventListener("click", function(){
var testYoutubeDiv = document.createElement('div');
testYoutubeDiv.style.cssFloat = 'left';
testYoutubeDiv.style.width = '400px';
testYoutubeDiv.style.height = '300px';
MSApp.execUnsafeLocalFunction(function () {
testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>";
});
document.body.appendChild(testYoutubeDiv);
});
Then, I write a similar .html file and test it in IE10.0 and Chrome. I find IE10.0 also has memory leak problem but chrome has not. And the memory leak problem in IE10.0 is less serious than in Metro App.
test html code was here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframeTest</title>
<script type = "text/javascript">
function load() {
document.getElementById("remove").addEventListener("click", function () {
var ifrs = document.querySelectorAll('div');
if (ifrs.length > 0) {
document.body.removeChild(ifrs[ifrs.length - 1]);
}
});
document.getElementById("add").addEventListener("click", function () {
var testYoutubeDiv = document.createElement('div');
testYoutubeDiv.style.cssFloat = 'left';
testYoutubeDiv.style.width = '400px';
testYoutubeDiv.style.height = '300px';
testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>";
document.body.appendChild(testYoutubeDiv);
});
}
</script>
</head>
<body onload ="load()">
<button id="remove" style="display:block; float:right;">remove a video</button>
<button id="add" style="display:block; float:right;">add a video</button>
</body>
</html>
I notice that IE(and maybe Metro App) does not use WebKit Engine to deal with javascript code. Is there any way to reduce memory leak in Metro App?
Create an iframe in html file
<iframe id="ifr_video"></iframe>
And then add a source to that iframe using javascript, while adding source find the id of YouTube URL by spliting, for example if the YouTube URL is http://www.youtube.com/watch?v=ZnehCBoYLbc, the ID is ZnehCBoYLbc, then define the source like the following for finding ID and adding source
var Url_splits = Youtube_Video_url.split("/");
var Url_length = Url_splits.length;
var Ytube_id = Url_splits[(Url_length - 1)];
document.getElementById("ifr_video").src = "http://www.youtube.com/embed/" + Ytube_id;
In HTML
<video id="VideoSource" style="border:1px solid black;" controls="controls" ></video>
<iframe class="youtube-player" id="ifr_video" type="text/html" width=100% height=100% allowfullscreen frameborder="0"></iframe>
In JS (inside ready function)
id("VideoSource").msPlayToSource.connection.addEventListener("statechanged", playToSrcStateChangeHandler);
function playToSrcStateChangeHandler(eventIn) {
var states = Windows.Media.PlayTo.PlayToConnectionState;
if (eventIn.currentState === states.disconnected) {
WinJS.log && WinJS.log("PlayTo connection state: Disconnected", "sample", "status");
} else if (eventIn.currentState === states.connected) {
WinJS.log && WinJS.log("PlayTo connection state: Connected", "sample", "status");
} else if (eventIn.currentState === states.rendering) {
WinJS.log && WinJS.log("PlayTo connection state: Rendering", "sample", "status");
}
}
Video_Path = "http://www.youtube.com/embed/" + new_id;
//new_id is the Youtube video id For example,..
in http://www.youtube.com/watch?v=ZnehCBoYLbc , id is ZnehCBoYLbc
function playYouTubeVideo(Video_Path) {
document.getElementById("ifr_video").src = Video_Path;
id("VideoSource").style.display='none';
}
function playWebContent(Video_Path) {
document.getElementById("ifr_video").style.display = 'none';
var localVideo = id("VideoSource");
var videoStabilization = Windows.Media.VideoEffects.videoStabilization;
localVideo.src = Video_Path;
localVideo.play();
}
Reference: http://code.msdn.microsoft.com/windowsapps/Media-PlayTo-Sample-fedcb0f9