javascript - 如何让视频在暂停时淡出 - 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');