SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple video on one page? Can't figure it out.

    I'm trying to put multiple videos on one page. I tried to give each one an individual id but failed miserably. Also how on earth do I assign a image to each player. My example works with one player only and falls back to HTML5 video with no problems . If I decided on five videos per page, how do I apply an id to each one as well as a different image per player. Here is what I have so far:

    Code:
    <script type="text/javascript" src="video/swfobject.js"></script> 
    <script type="text/javascript"> 
    var flashvars = {}; 
    flashvars.src = "http://www.mysite.com.mp4"; 
    flashvars.controlBarMode = "floating"; 
    flashvars.poster = "http://mysite.com/imageonplayer.png"; 
    var params = {}; 
    params.allowfullscreen = "true"; 
    params.allowscriptaccess = "always"; 
    
    
    var attributes = {}; 
    attributes.id = "videoDiv"; 
    attributes.name = "myDynamicContent"; 
    
    
    swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", "487", "275", "10.1.0","expressInstall.swf", flashvars, params, attributes); 
    </script> 
    </head>
    Code:
    <div id="videoDiv"> 
    <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> 
    <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> 
    <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> 
    </video> 
    </div>
    I tried to assign an id like this but again it didn't work for me:
    Code:
    <script type="text/javascript"> 
    swfobject.registerObject("videoDiv1", "10.1.0"); 
    swfobject.registerObject("videoDiv2", "10.1.0"); 
    swfobject.registerObject("videoDiv3", "10.1.0"); 
    swfobject.registerObject("videoDiv4", "10.1.0"); 
    </script>
    Any help is appreciated.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Is the HTML you posted the full code as you have registered 4 objects but only one <div> element exists in the source?

    If it's just your example code that's fine as i just wanted to make sure, the easiest way to create 5 separate video elements on the page would be to setup an array with the video URL, the initial image that appears onload and any other relevant information such as the width/height of the video. See the below example:

    http://jsbin.com/afacox/edit#preview

    Of course this doesn't include all the elements but it's just a general insight into how you can achieve what you need to do, more or less the base is there so all you really need to do once the element has been created is run the swfobject code (inside the loop) and it should work fine. If it's confusing at all that's fine as my explanations can be sketchy at times so I'll do my best to run you through it step by step if needed.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First I would like to thank you for taking the time out to help me. You'll have to forgive me for not catching on, it took me two weeks to figure out what I've posted above. I tried to get it to work but my knowledge of Javascript is minimal at best. Let me see if I follow:
    Code:
    <script type="text/javascript" src="video/swfobject.js"></script> 
    <script type="text/javascript"> 
    var flashvars = {}; 
    flashvars.src = "http://www.mysite.com.mp4"; 
    flashvars.controlBarMode = "floating"; 
    flashvars.poster = "http://path-to-image.com/myimage.png"; 
    var params = {}; 
    params.allowfullscreen = "true"; 
    params.allowscriptaccess = "always"; 
    
    var attributes = {}; 
    attributes.id = "videoDiv"; 
    attributes.name = "myDynamicContent"; 
    
    swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", "487", "275", "10.1.0","expressInstall.swf", flashvars, params, attributes); 
    </script>
    
    <script type="text/javascript">
    window.onload = function() {
      var videos = [
        { // Video 1
          url : 'http://www.path-to-video.com/myvideo.mp4',
          img : 'http://www.path-to-image.com/myimage.jpg',
          vid : 'myVideo_1'
        },
        { // Video 2
          url : 'http://www.path-to-video.com/myvideo.mp4',
          img : 'http://www.path-to-image.com/myimage.jpg',
          vid : 'myVideo_2'
        },
        { // Video 3
          url : 'http://www.path-to-video.com/myvideo.mp4',
          img : 'http://www.path-to-image.com/myimage.jpg',
          vid : 'myVideo_3'
        },
        { // Video 4
          url : 'http://www.path-to-video.com/myvideo.mp4',
          img : 'http://www.path-to-image.com/myimage.jpg',
          vid : 'myVideo_4'
        }
      ];
      
      var ele = document.getElementById('videos');
      
      for (var i in videos) {
        var e = document.createElement('div');
        e.innerHTML = videos[i].vid;
        ele.appendChild(e);
      }
    };
    </script>
    </head>

    Code:
    <div id="videoDiv"> 
    <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> 
    <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> 
    <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> 
    </video> 
    </div>
    
    <div id="myVideo_1"> 
    <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> 
    <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> 
    <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> 
    </video> 
    </div>
    
    <div id="myVideo_2"> 
    <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> 
    <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> 
    <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> 
    </video> 
    </div>
    
    <div id="myVideo_3"> 
    <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> 
    <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> 
    <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> 
    </video> 
    </div>
    
    <div id="myVideo_4"> 
    <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> 
    <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> 
    <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> 
    </video> 
    </div>
    Is that correct in its execution?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Basically the code in the JSBin was an example, to achieve what you need to do see the updated link below which contains everything you should need.

    http://jsbin.com/afacox/4/edit#source

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SgtLegend you are truly well versed at what you do. You are amazing and I can not thank you enough for helping out a complete stranger (me) with his problem. There's not many people like you on the forums and I just thank you for being so kind and generous with your time. It might not have been a big deal to anyone else but its a big deal to me.

    I just have to figure out how to put titles for each video in the code. I think its a good thing I have a long weekend ahead of me.


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
  •