Question

I have a client that wants to be able to select from a playlist of video thumbnails and it replaces a video that is on the page already. I also need to watch loading times, so thought it would be better requesting each video if and when it’s clicked with ajax? I’m new to ajax so not really sure if this is the best option.

My page is as follows:

<div id="container">
<div id="video">
</div>
<div id="videoSelector">
</div>
</div>

The videoSelector div will have thumbnails that the user will click and the video will load into the video div.

Any help will be great

Thanks

Answer 1

You do not really need AJAX to achieve this functionality. You can do with 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 the above using class selectors, jQuery etc. But I hope this is a start.