• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1749
  • Last Modified:

dynamically change embedded google video in javascript

So I'm embedding google video on my site.  However I want to have navigation on the page that changes what video is displayed to the user and I want it to be done dynamically.
So here is how google tells me to embed a video on my page
<embed id="myVideo" style="width:100%;height:500px;" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=-563808319704458028&hl=en" flashvars="&subtitle=on"> </embed>
                        
(note I added the id myself)
and what I want to do is when a link is clicked change the src of the embedded video so that when you hit play it plays the new video.  Preferably I'd also like to change the image being cast on the video to that of the new video.
<a href="#" onclick="changeVideo('http://video.google.com/videoplay?docid=-2004785759717366066&hl=en')">Colbert</a>  
      
where changeVideo is a javascript function somewhere that takes in the new src.
function changeVideo(videoURL){
      document.embeds['myVideo'].src = videoURL;      
}

I've tried a lot of different things but I can't find anything that will work... does anybody have any ideas?
 
0
ICPooreman
Asked:
ICPooreman
  • 5
  • 2
1 Solution
 
basicinstinctCommented:
0
 
basicinstinctCommented:
here ya go, i did it for you:

<html>
<head>
<script type="text/javascript">
function changeVideo(videoURL)
{      
      var movie = videoURL;
      if(movie.length > 0)
      {
            var player = document.getElementById('player');
            var kids = player.childNodes;
            for(var i=0; i<kids.length; i++)
            {
                  if(kids[i].nodeType ==1)
                  {
                        player.removeChild(kids[i]);
                  }
            }
            var newPlayer = buildEmbed(movie);
            player.appendChild(newPlayer);
      }
}
function buildEmbed(movie)
{
      var embd = document.createElement('embed');
      embd.src = movie;
      embd.type = "application/x-shockwave-flash";
      embd.flashvars="&subtitle=on"
      embd.style.width = "100%";
      embd.style.height = "500px";
      return embd;
}
</script>
</head>
<body>
<form name="foo">
      <input type="text" name="newurl"/><br/>
      <input type="button" value="Load Movie" onclick="changeVideo(this.form.newurl.value);"/>
</form>
<div id="player">
</div>
</body>
</html>
0
 
basicinstinctCommented:
to test it type this:

http://video.google.com/googleplayer.swf?docId=-563808319704458028&hl=en

in the text box and click "Load Movie"
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ICPooremanAuthor Commented:
Ok thanks for that...

I'm testing it now... at first glance there appears to be something wrong with it.  It loads fine the one video I had embedded on my page before.  But if I attempt it with the URL of a video I've never viewed before it just takes me to a blank white screen.

Let me keep looking at it though.
0
 
basicinstinctCommented:
there's a problem with the url you posted, not the code...

to prove this just hard code the url... it doesn't work:

<embed id="myVideo" style="width:100%;height:500px;" type="application/x-shockwave-flash" src="http://video.google.com/videoplay?docid=-2004785759717366066&hl=en" flashvars="&subtitle=on"> </embed>
0
 
ICPooremanAuthor Commented:
wait I figured it out why it wasn't working for me... for the other videos I was just grabbing the link from the top of the page which is different from the embed URL... Thanks alot this really is great.
0
 
basicinstinctCommented:
you're welcome
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now