View Full Version : Very simple multiple video player
ukstormer
07-23-2012, 01:21 PM
I am looking for a simple multiple video player, I have several MP4 videos in a folder that I need to play in a loop, I don't want any controls or links, this is not for a web site but for a screen in reception to promote there products.
Many Thanks
bernie1227
07-23-2012, 08:57 PM
Hiya ukstormer, if you don't mind a bit of work, here is a video player that you can adapt to have no controls. http://dev.opera.com/articles/view/simple-html5-video-flash-fallback-custom-controls/
ukstormer
07-25-2012, 07:19 AM
Hi Bernie1227, many thanks for the help, had a look and good as it is seems like a lot to strip out for what I want, I have managed to find this other script by a guy called Marcelo Duende, and it looks really simple which is what I want, this script only plays 2 videos and I have looked and played around but cannot for the life of me get it to play another video, I understand the basic theory but not how to add another video and then get it to loop, I have contacted Marcelo but have not had any reply so far, anyone able to help me out with this one?
HTML code
<!DOCTYPE html>
<html>
<head>
<title>MultipleVideo</title>
<script src="js/video.js"></script>
</head>
<body>
<video id="my_video_1" autoplay
preload="auto" width="640" height="480"
data-setup="{}">
<source id="mp4Vid" src="video/test10.mp4" type='video/mp4'>
</video>
<script src="js/videoHandlers.js"></script>
</body>
</html>
VideoHandler.js
var myVideo = _V_("my_video_1");
function onComplete(){
var myVideo1 = document.getElementsByTagName('video')[0]; // get my <video> tag
var videoPlaying = myVideo1.currentSrc; // get the file being played
myVideo1.src = 'video/test20.mp4'; // set up the new src (reels)
myVideo.load(); // load the new video
myVideo.play(); // play the new video
myVideo.removeEvent("ended", onComplete); // remove the listener
};
myVideo.addEvent("ended", onComplete); // listener handler
It uses the 'VideoJS' player 'www.videojs.com'
Many thanks
bernie1227
07-25-2012, 08:58 AM
Looks quite good. In order to play two videos or more and then loop them, here's something I think will work (I haven't tested it):
<!DOCTYPE html>
<html>
<head>
<title>MultipleVideo</title>
<script type="text/javascript">
var myVideo = _V_("my_video_1");
function onComplete(){
var myVideo1 = document.getElementsByTagName('video')[0]; // get my <video> tag
var videoPlaying = myVideo1.currentSrc; //file being played
myVideo1.src ='video/test20.mp4'; // set up the new src (reels)
myVideo.load(); // load the new video
myVideo.play(); // play the new video
myVideo.removeEvent("ended", onComplete); // remove the listener
};
myVideo.addEvent("ended", onComplete);//listenerhandler
var nextVideo = "path/of/next/video.mp4";
myVideo1.onend = function(){
myVideo1.src = nextVideo;
}
</script>
</head>
<body>
<videoid="my_video_1"autoplay
preload="auto"width="640"height="480" src
data-setup="{}" loop="loop">
<source id="mp4Vid" src="video/test10.mp4" type='video/mp4'>
</video>
<script src="js/videoHandlers.js"></script>
</body>
</html>
The parts that a red are the pieces that I have added. It's pretty self explanatory what I have done.
ukstormer
07-25-2012, 11:02 AM
Thanks for the quick response, firstly I adding loop="loop" this just makes the first video loop and does not bring the next one in, I then tried the other code in the videoHandler.js but this did nothing I'm afraid, still looking for a solution?
bernie1227
07-25-2012, 11:28 AM
how about this, this may work better:
<!DOCTYPE html>
<html>
<head>
<title>MultipleVideo</title>
<script type="text/javascript">
var myVideo = _V_("my_video_1");
function onComplete(){
var myVideo1 = document.getElementsByTagName('video')[0]; // get my <video> tag
var videoPlaying = myVideo1.currentSrc; //file being played
myVideo1.src ='video/test20.mp4'; // set up the new src (reels)
myVideo.load(); // load the new video
myVideo.play(); // play the new video
myVideo.removeEvent("ended", onComplete); // remove the listener
};
myVideo.addEvent("ended", onComplete);//listenerhandler
var nextVideo = "path/of/next/video.mp4";
myVideo1.onended = function(){
myVideo1.src = nextVideo;
myVideo1.loop = true;
}
</script>
</head>
<body>
<videoid="my_video_1"autoplay
preload="auto"width="640"height="480" src
data-setup="{}">
<source id="mp4Vid" src="video/test10.mp4" type='video/mp4'>
</video>
<script src="js/videoHandlers.js"></script>
</body>
</html>
so ive made a change that it adds the loop once it has gone onto the next video. unfortunately, that will mean that it will only loop the second video, so try this:
<!DOCTYPE html>
<html>
<head>
<title>MultipleVideo</title>
<script type="text/javascript">
var myVideo = _V_("my_video_1");
function onComplete(){
var myVideo1 = document.getElementsByTagName('video')[0]; // get my <video> tag
var videoPlaying = myVideo1.currentSrc; //file being played
myVideo1.src ='video/test20.mp4'; // set up the new src (reels)
myVideo.load(); // load the new video
myVideo.play(); // play the new video
myVideo.removeEvent("ended", onComplete); // remove the listener
};
myVideo.addEvent("ended", onComplete);//listenerhandler
var firstVideo = "path/of/first/video.mp4";
var nextVideo = "path/of/next/video.mp4";
myVideo1.onended = function(){
myVideo1.src = nextVideo;
}
if(myVideo1.src == "path/of/next/video.mp4") {
myVideo1.onended = function(){
myVideo1.src = firstVideo;
}
}
</script>
</head>
<body>
<videoid="my_video_1"autoplay
preload="auto"width="640"height="480" src
data-setup="{}">
<source id="mp4Vid" src="video/test10.mp4" type='video/mp4'>
</video>
<script src="js/videoHandlers.js"></script>
</body>
</html>
edit: just as a question, did you change the oath of the video appropriately?
ukstormer
07-25-2012, 12:53 PM
No sorry neither of them work, still just plays the 2 videos and then stops, couple of typos to get it to work like that again.
<videoid="my_video_1"autoplay changed this to video id
src data-setup="{}"> again removed the src to get going
Why would this code be outside the original code?
var firstVideo = "path/of/first/video.mp4";
var nextVideo = "path/of/next/video.mp4";
myVideo1.onended = function(){
myVideo1.src = nextVideo;
}
if(myVideo1.src == "path/of/next/video.mp4") {
myVideo1.onended = function(){
myVideo1.src = firstVideo;
}
}
Thanks again for the effort, can't be too far away from a soulution.
Regards the video, I assume when you say oath you mean the path?, yes I change this to suit.
Ukstormer
bernie1227
07-25-2012, 09:35 PM
So are you saying that the first video goes to the next video, and then stops?
molendijk
07-25-2012, 10:24 PM
There's another way to do it if you know how to upload videos to Youtube.
1.
Upload your videos to Youtube. Each of them will get a specific ID.
2.
Once you've got the video's IDs, it's a simple matter to autoplay them in sequence and in a loop. Just type an url like:
http://youtube.com/v/ID-of-first-video?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0&controls=1&modestbranding=1&loop=1&playlist=ID-of-second-video,ID-of-third-video,ID-of-fourth-video.
Here's a real world example of a sequence of 4 videos playing in a loop:
http://www.youtube.com/v/ROVy9PC8_8A?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0&controls=1&modestbranding=1&playlist=4pyqLbi2wLU,GOe670xcKhk,LB3VfxfBlnY&loop=1
Arie Molendijk.
bernie1227
07-25-2012, 10:48 PM
The point however is that he doesn't want any controls.
molendijk
07-25-2012, 10:59 PM
The point however is that he doesn't want any controls.
If you mean there's a play bar with controls, and if the person doesn't want that, he can do:
http://www.youtube.com/v/ROVy9PC8_8A?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0&controls=0&modestbranding=1&playlist=4pyqLbi2wLU,GOe670xcKhk,LB3VfxfBlnY&loop=1
(controls=0 in the url).
Arie.
bernie1227
07-26-2012, 01:04 AM
It would be more efficient to do it offline, as I'm guessing ukstormer doesn't want to use up bandwidth getting the video.
ukstormer
07-26-2012, 07:21 AM
Hi Guys,
Firstly, Bernie, yes the code simple plays both videos and then stops which is where I was originally.
Hi Molendijk, the videos are to be played locally on a screen with no connection to the internet (videos will be updated via the intranet).
Still looking for a solution.
Ukstormer
bernie1227
07-26-2012, 08:51 AM
sorry ukstormer, it appears i've been barking up the wrong tree. try this:
<!DOCTYPE html>
<html>
<head>
<title>MultipleVideo</title>
<script type="text/javascript">
var myVideo = _V_("my_video_1");
function onComplete(){
var = document.getElementsByTagName('video')[0]; // get my <video> tag
var videoPlaying = myVideo1.currentSrc; //file being played
myVideo1.src ='video/test20.mp4'; // set up the new src (reels)
myVideo.load(); // load the new video
myVideo.play(); // play the new video
myVideo.removeEvent("ended", onComplete); // remove the listener
}
myVideo.addEvent("ended", onComplete);//listenerhandler
function loop(){
if(var videoplaying == 'video/test20.mp3'){
var = document.getElementsByTagName('video')[0]; // get my <video> tag
var videoPlaying = myVideo1.currentSrc; //file being played
myVideo1.src ='video/test10.mp4'; // set up the new src (reels)
myVideo.load(); // load the new video
myVideo.play(); // play the new video
myVideo.removeEvent("ended", loop); // remove the listener
}
}
myVideo.addEvent("ended", loop);//listenerhandler
</script>
</head>
<body>
<video id="my_video_1"autoplay
preload="auto"width="640"height="480" src
data-setup="{}">
<source id="mp4Vid" src="video/test10.mp4" type='video/mp4'>
</video>
<script src="js/videoHandlers.js"></script>
</body>
</html>
molendijk
07-26-2012, 09:22 AM
Hi Molendijk, the videos are to be played locally on a screen with no connection to the internet (videos will be updated via the intranet).Ukstormer
Then try Bernie's solution or THIS (http://www.longtailvideo.com/players/jw-desktop-player/).
Arie.
ukstormer
07-26-2012, 10:21 AM
Hi Bernie,
The new code just plays the first video and then stops . . . .
Arie
Many thanks but that software is Windows based, I am using Linux and a Chrome window in full screen mode.
bernie1227
07-26-2012, 10:40 PM
Ok final try:
<!DOCTYPE html>
<html>
<head>
<title>MultipleVideo</title>
<script type="text/javascript">
var myVideo = _V_("my_video_1");
function onComplete(){
var = document.getElementsByTagName('video')[0]; // get my <video> tag
if(myVideo1.currentSrc == "video/test10.mp4"){
var nextVideo = 'video/test20.mp4';
}
else {
var nextVideo = 'video/test20.mp4';
}
var videoPlaying = myVideo1.currentSrc; //file being played
myVideo1.src = nextVideo; // set up the new src (reels)
myVideo.load(); // load the new video
myVideo.play(); // play the new video
}
myVideo.addEvent("ended", onComplete);//listenerhandler
</script>
</head>
<body>
<video id="my_video_1"autoplay
preload="auto"width="640"height="480" src
data-setup="{}">
<source id="mp4Vid" src="video/test10.mp4" type='video/mp4'>
</video>
<script src="js/videoHandlers.js"></script>
</body>
</html>
ukstormer
07-30-2012, 12:06 PM
No, afraid not, same thing as before, as it stands will not work, remove the 'src' text after the height deceleration and then first video plays and stops at the end.
ukstormer
08-29-2012, 11:30 AM
Still looking for a script to play several MP4 files back to back, saw something regards using 'video.onended' but not too sure how to implement it correctly, any help much appreciated.
marceloduende
01-04-2013, 09:21 AM
Yo, sup ukstormer, my blog is a bit buggy and I am not replying there, fortunately I found your post here when you mentioned my name. crazy hun?
So, to keep it playing is simple, create an array with all the videos you want then call it sequentially.
var arrVideos = ["vid01.mp4","vid02.mp4","vid03.mp4"];
var myIndex = 0;
var myVideo = _V_("my_video_1");
function onComplete(){
var myVideo1 = document.getElementsByTagName('video')[0]; // get my <video> tag
var videoPlaying = myVideo1.currentSrc; // get the file being played
myVideo1.src = arrVideos[myIndex]; // set up the new src (reels)
if(myIndex == arrVideos.length-1){
myIndex = 0;
}
myIndex++;
myVideo.load(); // load the new video
myVideo.play(); // play the new video
myVideo.addEvent("ended", onComplete); // listener handler
};
I didn't test it, but it should play. Let me know ninja, my email is marcelo.duende@gmail.com. Peace
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.