Loading flash movies to div using ajax
I have a client who wants to be able to select from a video thumbnail playlist and it replaces a video that is already on the page. I also need to watch the load times, so I thought it would be better to request each video if and when it clicks with ajax? I am new to ajax so not sure if this is the best option.
My page looks like this:
<div id="container">
<div id="video">
</div>
<div id="videoSelector">
</div>
</div>
The videoSelector window will display the thumbnails that the user clicks, and the video will load into the video div.
Any help would be great
thank
source to share
You don't need AJAX to achieve this functionality. You can do something like:
<script>
function changeVideo(filename) {
document.getElementById('video').innerHTML = 'CODE DEPENDING ON PLAYER'+filename+'REMAINING CODE';
}
</script>
<div id="video"></div>
<div id="videoSelector">
<a href="javascript:void();" onclick="javascript:changeVideo('filename');">Thumbnail 1</a>
<a href="javascript:void();" onclick="javascript:changeVideo('filename2');">Thumbnail 2</a>
<a href="javascript:void();" onclick="javascript:changeVideo('filename3');">Thumbnail 3</a>
</div>
Something as simple as above. You can definitely improve on the above using class selector, jQuery, etc. But I hope this is the beginning.
source to share
If you are using jQuery flashembed from jQuery Tools .
If you are not into jQuery, there is a more popular tool for embedding Flash SWFObject .
Both are very easy to use and there are many examples from their site.
source to share