Попытка сделать видеоконтроль ontop видео

Question

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

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

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

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

#video div{ 
     opacity: 0; 
} 

#video div:hover { 
     opacity: 0.6; 
} 

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

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

Answer 1

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

<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> 

Answer 2

Working example on 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(); 
    } 
);