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

查看Media Events视频。基本上，您会收听与视频相关的不同事件，因此在您的情况下，您可以执行类似的操作。

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

因此，当视频开始播放时，它将删除该类，然后您可以为pause添加另一个侦听器以重新添加该类。我鼓励您查看MDN页面，因为有许多不同的方式可以与它进行交互。

Answer 2

您需要切换包含div的“已暂停”类。您可以在playPause函数的末尾执行此操作：

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

这是原生DOM，只有较新的浏览器支持（classList）;你可以在jQuery中做同样的事情，如：

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

如何暂停视频 - HTML

2 个答案: