Take snapshots of flash videos.

Question

How do I link to snapshots of embedded flash videos instead of the actual flash videos to reduce loading times of a site?

Answer 1

Yes, and in fact this is a method that is often employed. You start with an image with a play button overlay. When it's clicked, the image element is replaced with a flash element that plays the video.

Perhaps something like the following:

<script>
$(function () {
    $("img.thumbnail").click(function (e) {
        $(e.parentNode).addClass("play");
    });
});
</script>

<style>
.toggler .player { display: none; }
.toggler.play .player { display: block }
.toggler.play .thumbnail { display: none }
</style>

<div class="toggler">
    <img class="thumbnail" src="thumbnail.jpg">
    <div class="player">
        <!-- embed your player here -->
    </div>
</div>