Расширяющийся видеоплеер, такой как CNN-сайт, предпочтительно на основе jQuery

Question

Мне интересно, знает ли кто-нибудь скрипт / плагин, основанный на jquery или каким-либо другим способом, который можно использовать для достижения эффекта, который можно найти на CNN.com. Я говорю о видео, которые представлены небольшим уменьшенным изображением, которое при нажатии расширяется до текста и воспроизводится.

Я ни в коем случае не JS-гуру, и я и Флэш не самые лучшие друзья, но я не полностью уверен.

По сути, я ищу способ щелкнуть миниатюру, развернуть SWF и остановить его, если я снова заключу контракт. что-то в этом роде.

ЛЮБЫЕ идеи, советы или идеи приветствуются!

Answer 1

Простым подходом будет замена содержимого div на Flash-видео при нажатии:

HTML

<div id="video-001">
    <img src="video-thumb.jpg" />
</div>

JQuery

$('#video-001').toggle(function() {
    $(this).html('<object whatevergoeshere...></object>');
}, function() {
   $(this).html('<img src="video-thumb.jpg" />');
});

Это простой пример, но его можно улучшить, например, вставив изображение в качестве фона div, сохранив код в кеше элемента (с .data()), добавив событие click ко всем div с определенным классом ...

Надеюсь, это поможет:)