Можно ли «спрятать» видео за изображением?

Question

По сути, при загрузке страницы я хочу, чтобы видео было скрыто за изображением (думаю, это можно сделать с помощью позиционирования div).

Я бы хотел, чтобы видео начало воспроизводиться, когда пользователь нажимаетна изображении видео скрыто сзади.Это должно быть возможно с небольшим количеством JavaScript / CSS.

Что я действительно спрашиваю, знает ли кто-нибудь какие-либо примеры этого или это будет возможно с некоторым расширением jQuery / Mootools ...?Я бы предпочел не использовать Flash, чтобы он работал на iPhone / iPad.

Спасибо

Answer 1

Обычно это делается при встраивании фильмов Quicktime.Это можно сделать непосредственно с видео, если вы можете установить его рамку для постера.Обычно это делается путем размещения изображения на экране в том же месте, что и видео, и переключения между ними.Код может выглядеть примерно так.

HTML

...

<embed id="video" style="display: none;">...<embed>

<img id="poster" onclick="switchToVideo()">

...

JS

function switchToVideo(){

document.getElementById('video').style.display = "block";

document.getElementById('poster').style.display = "none";

document.getElementById('video').Play();

}

Answer 2

Для того, чтобы стек мог работать с видео, вам нужно добавить переменную wmode к объекту / встраиванию Также для стека вам нужно будет использовать position: absolute на элементе, который вы хотите поместить поверх другого. Поместите их в относительный контейнер и сделайте z-индекс выше того, который должен быть выше.

Вот пример добавления wmode к видео:

<object width="400" height="300">
    <param name="movie" value="" />
    <param name="wmode" value="transparent">
    <!--[if !IE]>-->
    <embed src="" width="400" height="300" wmode="transparent" menu="false">
    <!--<![endif]-->
</object>

Answer 3

Как вы описали (я не знаю точного синтаксиса), просто поместите изображение с более высоким z-уровнем поверх всего, что вы хотите скрыть, и обработайте для него метод onClick в JavaScript.