Попытка сделать элементы управления видео поверх видео

Я работаю над заданием, где нам нужно создать сайт с тремя видео с использованием HTML5. Вот что у меня есть на данный момент: http://jumpshare.com/v/hVQnbW?b=47ZPmk

Я знаком с тем, как создавать воспроизведение/паузу и другие функции видеоплеера. Однако я не знаю, как лучше всего использовать элементы управления на видео.

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

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

#video div{
       opacity: 0;
}

#video div:hover {
       opacity: 0.6;
}

Да это не имеет смысла. Это просто делает навигацию непрозрачной, если я навожу ее, но я хочу, чтобы она была, если я навожу видео:/

Это всего лишь предположение и моя первоначальная интуиция, но, честно говоря, я не знаю, как правильно это сделать.


javascript html css html5-video
person Batman    schedule 08.02.2013    source источник
comment
вы можете либо сделать элемент управления div того же размера, что и проигрыватель, поэтому наведение курсора в любом месте изменит непрозрачность, или отследить событие наведения мыши (jQuery) на элементе видео, чтобы программно активировать видимость элементов управления.   -  person Offbeatmammal    schedule 08.02.2013

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны создать элемент-обертку, который будет обертывать как элемент видео, так и элементы управления.

<div id="vid-container">
    <video src="video.mp4"></video>
    <div id="controls">... control stuff goes here ...</div>
</div>

<style>
    #vid-container {
        position: relative;
        width: 400px; // Make this the width of the video
    }

    // Place the controls to be at the bottom of the video, and on top, and invisible
    #controls {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        opacity: 0;
    }

    // Make the controls show when the video container is hovered
    #vid-container:hover #controls {
        opacity: 0.6;
    }
</style>
person Kizer    schedule 08.02.2013
comment
Что делать, если содержимое является гибким. Как мне настроить элементы управления по мере изменения размера видео. Например, видео моего сайта станет меньше по мере уменьшения окна. Но текущие правила сохраняют элементы управления того же размера. - person Batman; 09.02.2013
comment
Вы можете использовать JavaScript, чтобы держать его в форме. Когда я буду на своем рабочем столе, я обновлю ответ, чтобы дать короткий фрагмент JavaScript, который может помочь вам в этом. - person Kizer; 09.02.2013
comment
И наоборот, вы можете установить ширину видео на 100% и настроить ширину контейнера при изменении размера окна. Видео всегда будет занимать ширину контейнера, а контейнер — высоту видео. - person Kizer; 09.02.2013
comment
Я думаю, что у меня есть все элементы управления с точки зрения гибкости. ЗА ИСКЛЮЧЕНИЕМ индикатора ПРОГРЕСС. Размер задается в Javascript, и я не знаю, как его настроить с помощью javascript. - person Batman; 09.02.2013
comment
Вот что у меня есть на данный момент: jsfiddle.net/J7gFU Кроме того, что я упомянул выше. У меня все еще есть некоторые проблемы с повтором (выбор воспроизведения после завершения видео) и поиском в видео. Я почти на 100% уверен, что обе эти проблемы связаны с атрибутом currentTime, который я вообще не могу заставить работать. - person Batman; 09.02.2013

arrow_upward
4
arrow_downward

Рабочий пример на jsFiddle.

Что-то вроде этого должно помочь:

HTML:

<div class="video">
    <video width="640" height="360">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <div class="controls">
        <span class="pause">pause</span>
    </div>
</div>

CSS:

.video {
    position: relative;
}
.controls {
    display: none;
    background: #000;
    opacity: .7;
    color: #fff;
    font-size: .9em;
    position: absolute;
    bottom: .9em;
    left: 0;
    line-height: 2em;
    z-index: 3;
}
.controls span {
    background: #222;
    padding: 1em 1em;
    cursor: pointer;
}

JavaScript:

var $video = $(".video"),
    $controls = $video.find(".controls");

$video.hover(
    function () {
        $controls.fadeIn();
    },
    function () {
        $controls.fadeOut();
    }
);
person Jeff Miller    schedule 08.02.2013