Как есть видео утрачен во время паузы - HTML

Question

Так что я только учусь веб-дизайн, и сейчас я работаю над встраивание видео с требованиями:

• Первоначально был утрачен (затемненные).
• Наведите курсор мыши на непринужденное/яркое изображение.
• Когда видео воспроизводится, не исчезайте.

Надеюсь, это имеет смысл. У меня есть первые две части, которые работают нормально, однако, когда я не могу понять, как я избегаю, это становится темным, когда он играет.

Кусок моего HTML является:

<div class="paused"> 
    <video class="video" id="video1" width="720" onclick="playPause(0)" loop> 
     <source src="video.webm" type="video/webm"> 
     Your browser does not support HTML5 video. 
    </video> 
</div> 
<script> 
    var videos = [document.getElementById("video1"), document.getElementById("video2")]; 

    function playPause(num) { 
     if (videos[num].paused) { 
      videos[num].play(); } 
     else { 
      videos[num].pause(); } 
    } 

и мой CSS является:

div.paused { 
    display: inline-block; 
    background: black; 
    padding: 0; 
} 

div.paused video { 
    display: block; 
    opacity: 0.4; 

    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 

div.paused:hover video { 
    opacity: 1;  
} 

Answer 1

Вам нужно переключить класс «приостановил» на ваш содержащий div. Вы можете сделать это в конце вашей playPause функции с этим:

videos[num].parentElement.classList.toggle('paused'); 

Это родной DOM только с новой поддержкой браузера (для classList); вы можете сделать то же самое в jQuery, например:

$(videos[num]).parent().toggleClass('paused'); 

Answer 2

Заканчивать Media Events для видео. В основном, вы слушаете разные события, связанные с видео, поэтому в вашем случае вы можете сделать что-то вроде этого.

var v = document.getElementsByTagName("video")[0]; 
v.addEventListener("play", function() { 
    document.querySelector(".paused").removeAttribute('class'); 
}, true); 

Так что, когда начинается воспроизведение видео, он удалит класс, то вы можете добавить еще один слушатель для pause, чтобы добавить класс обратно. Я рекомендую вам просмотреть страницу MDN, так как существует множество способов взаимодействия с ней.