Можем ли мы разместить элементы поверх HTML5 Video?

Question

Например, я хочу:

<video> = z-index: -1;
<div id="post"> = z-index: 0;

Я пробовал это в определенной степени ... но было бы хорошо узнать, есть ли у кого-то конкретная информация по этому поводу.Я новичок в H5 Video, и я знаю, что с Flash это возможно, но не для мобильных устройств (которые меня не волнуют, может иметь какой-то дерьмовый запасной вариант)

Спасибо за любую информацию заранее.

Answer 1

Вы можете размещать элементы поверх html5-видео, используя z-index, в точности как вы описали. Вы можете увидеть мое демо с этим jsfiddle, http://jsfiddle.net/cJJwj/3/

А вот код, который я использую в этой скрипке:

HTML

<video width="200" height="200" 
    controls="controls" 
    src="http://upload.wikimedia.org/wikipedia/commons/4/43/Eisbach_surfen_v1.ogv">
</video>
<p>paragraph</p>

CSS

video {
    position: relative;
    z-index: 0;
}
p {
    position: absolute;
    top: 50px;
    left: 50px;
    color: red;
    font-size: 2em;
    border: medium solid yellow;
    z-index: 1;
}

Я должен упомянуть, однако, что я пытался использовать z-index: -1; для видео, и элементы управления видео не работали (в бета-версии Firefox 5 и Chrome), но когда я использовал z-index: 0, элементы управления работали нормально , Я пока не знаю, почему это так.

Answer 2

Я тоже мало работал с HTML5-видео, но я знаю, что проигрыватель Vimeo HTML5, похоже, выполняет именно то, что вы просите.Они используют <div> и даже <canvas> над видео для рендеринга элементов управления воспроизведением, заголовка и других кнопок.