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/s...stom-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

PHP 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

PHP Code:


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):

Code:

<!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:

Code:

<!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:

Code:

<!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?

PHP 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...fxfBlnY&loop=1

Arie Molendijk.

**bernie1227** · 07-25-2012, 10:48 PM

The point however is that he doesn't want any controls.

Thread: Very simple multiple video player

Thread Tools

Search Thread

Very simple multiple video player

Bookmarks

Bookmarks

Posting Permissions