Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Very simple multiple video player

  1. #1
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Very simple multiple video player

    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

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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/
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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.
    Last edited by bernie1227; 07-25-2012 at 09:06 AM.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #5
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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?
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  7. #7
    Join Date
    Jun 2012
    Location
    Lancashire
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    So are you saying that the first video goes to the next video, and then stops?
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,317
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    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.
    Last edited by molendijk; 07-25-2012 at 10:41 PM. Reason: Correction

  10. #10
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    The point however is that he doesn't want any controls.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •