заменить изображение на видео

Question

Привет. Я пытаюсь изменить веб-страницу, чтобы она загружалась быстрее. Поскольку у меня есть несколько видео (blip.tv, но я могу изменить его на youtube, если это поможет), мне было интересно, можно ли загрузить изображение там, где должно быть видео, и по щелчку заменить изображение на видео и начать воспроизведение (без перезагрузки вся страница). Я думаю, что видел это раньше, но больше нигде не могу его найти! сейчас я использую код для встраивания:

<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>

Спасибо

Answer 1

Быстро и грязно: вы можете просто установить код встраивания как глобальную переменную где-то:

<script type="text/javascript">
    var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>'
</script>

Затем поместите изображение в div контейнера и замените внутренний HTML-код контейнера:

<div id="videocontainer">
    <img src="yourimage.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="500" width="600" />
</div>

Answer 2

Есть проект кода Google под названием SWFObject, который идеально подходит для того, что вам нужно. Это кросс-браузерная библиотека javascript для загрузки флэш-памяти, и вы можете использовать ее для замены изображения на флэш-видео, когда кто-то нажимает на изображение, например.