SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    england
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Loading videos inside a div

    Hi all,

    I have found some code that uses javascript to change the image in a div without reloading the page

    I have made a quick test page here http://www.mikecotton.com/test/

    HTML Code
    Code:
    <div id="previewPane">
    	<img src="sub1_large.jpg"/>
    </div>
    <div id="theImages">
    	<a href="" onclick="showPreview('sub1_large.jpg');return false"><img src="sub1_thumbnail.jpg"/></a>	
    	<a href="" onclick="showPreview('sub2_large.jpg');return false"><img src="sub2_thumbnail.jpg"/></a>			
    	<a href="" onclick="showPreview('sub3_large.jpg');return false"><img src="sub3_thumbnail.jpg"/></a>	
    </div>
    Javascript code
    Code:
    function showPreview(imagePath)
    {
    	var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
    	if(subImages.length==0){
    		document.getElementById('previewPane').appendChild(img);
    	}
    	else img = subImages[0];
    	img.src = imagePath;
    }
    My question is how would I do the same thing if I wanted it to work with videos instead of images.
    For example the user clicks a thumbnail image and a video would be displayed in the preview pane instead of another image?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    NJ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi baz7621,

    Any idea of how you're going to be loading the videos? As in, is it a Youtube player or some other player, or do you have your own player?

    I think probably the best way of doing it is to create a Javascript function that takes as input the URL to the video and generates the HTML code and inserts it in a div element using something like <div element>.innerHTML='HTML code' on the initial page load and every time after that. So when you want to update the div, just run the function while providing it with a new URL and that should do it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    england
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At the moment the video is in wmv but I will most prob convert it into flash.

    As for your <div element>.innerHTML='HTML code'. I dont quite understand any chance of an example?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    NJ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For a Youtube video, the code required is:

    Code:
    <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/vKn346lOcR0&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/vKn346lOcR0&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
    So you could create a function like the following for the youtube player:

    Code:
    function loadVideo(id,url){
      document.getElementById(id).innerHTML = '<object width="425" height="355"><param name="movie" value="' + url + '"></param><param name="wmode" value="transparent"></param><embed src="' + url + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>';
    }
    And you can have a div element as follows:

    Code:
    <div id="videoContainer"></div>
    And follow this up with the javascript:

    Code:
    window.onload = function(){
      loadVideo( 'videoContainer' , 'http://www.youtube.com/v/vKn346lOcR0&rel=1' );
    }
    This will load the video on the initial page load, and then if you want to change the video, call the function with a new url.

    Well, at least I think that will work


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
  •