Javascript Tip - Dynamically Updating the Embed object; Sort Of

I ran into another interesting scenario, in trying to reuse a window to show multiple videos, without reloading the whole window, but rather changing the specifics of the embedded video player.

Per the DOM, the Embed object cannot receive dynamic updates to it's "src" or source attribute, however (Dramatic pause...) you can cheat by regenerating the complete Embed object per video within a div tag (innerHTML), and substitute the destination as a variable. It sounds tedious, but it works and saves a visitor from suffering through several full reloads.

In the example below, I'm repopulating the div tag "video" with a newly concatenated Embed object on function call. The "videoPlay" var contains the name of the full destination and video file to be played.


<script type="text/javascript">
function playNext(videoPlay)
{
document.getElementById('video').innerHTML="<object width='425' height='344'><param name='movie' value='playersource'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><param name='wmode' value='transparent'></param><param name='flashvars' value='streamer=streamsource" + videoPlay + "'></param><embed src='playersource' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='transparent' flashvars='querystring" + videoPlay + "' width='425' height='344'></embed></object>";
}
</script>