Question

我看到了许多水平音量滑块，但没有看到制作垂直音量滑块的正确方法。我只是好奇。如何为网站制作垂直音量滑块？仅当您将鼠标悬停在音量按钮上时（如在YouTube上），某些内容才会出现。

这里是指向我的网站https://newcool.win/的链接（PS f12，ctrl等已禁用。因此，如果要使用控制台，则必须在加载之前将其拉起。）（PPS如果视频不会在开始时为您加载，您必须手动按暂停按钮。这是由于chrome决定阻止自动播放的视频在Chrome 66中返回）

fas或fa-volume-up或fa-pause等的.css来自https://fontawesome.com/（如果有人不熟悉的话）

<div id="star" class="video mask overlay">
<i class="fas fa-volume-up volume-button "></i>
<i class="fas stop-button fa-pause"></i>
<div class="video-fallback"></div>
<video id="video" onloadstart="this.volume=0.2" loop="">
<source src="videos/SONG.MP4" type="video/mp4"></source>
</video>
<script>setTimeout(function(){document.getElementById("video").play();}, 3000);</script>

video mask overlay的css类只是一个黑色的覆盖层，可以阻止视频在您的眼前闪耀。

 .volume-button{
    font-size:18px;
    position:absolute;
    z-index:25;
    bottom:50px;
    left:20px;
    cursor:url(../images/cursor/red.cur),pointer;
    color:#fff;
}
 .stop-button{
    font-size:18px;
    position:absolute;
    z-index:25;
    bottom:50px;
    left:50px;
    cursor:url(../images/cursor/red.cur),pointer;
    color:#fff;
}
.video-fallback{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}
 video{
    position:fixed;
    top:50%;
    left:50%;
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    z-index:-9999;
    transform:translateX(-50%) translateY(-50%);
    background-size:cover;
    transition:1s opacity;
}

$(".video").each(function() {
        $(".stop-button").click(function() {
            $(".stop-button").toggleClass('fa-play').toggleClass('fa-pause');
            var videoBG = document.getElementById("video");
            if (videoBG.paused)
                videoBG.play();
            else
                videoBG.pause();
        });
        $(".volume-button").click(function() {
            $(".volume-button").toggleClass('fa-volume-off').toggleClass('fa-volume-up');
            $("video").prop('muted', !$("video").prop('muted'));
        });
    });

如果有什么我想念的，或者如果您需要更多信息，请告诉我，我将尽力提供。（或者您可以查看我的网站）

如何为我的网站添加垂直音量滑块？

0 个答案: