时间戳

首页 > 解决方案 > 切换到另一个视频时如何使视频停止播放？

javascript - 切换到另一个视频时如何使视频停止播放？

问题描述

在我的网站上，我有一个视频播放器和一些视频，当我播放另一个视频时，我无法让视频停止。如果可以用 CSS 来做会很好，但如果不能，那我怎么能用我的代码在我的页面中用 JS 来做呢？...... ..................................................... ..................................................... ..................................................... .....................

<div class="videos">
        <div class="vids">
            <input type="radio" name="video-slide" id="vid1" checked>
            <input type="radio" name="video-slide" id="vid2">

            <video src="video1.mp4" controls class="v1" alt="vid1"></video>
            <video src="video2.mp4" controls class="v2" alt="vid2"></video>
            <div class="dots">
                <label for="vid1" id="btn1"></label>
                <label for="vid2" id="btn2"></label>
            </div>
        </div>
</div>

<style>
.videos{
    background-color: coral;
    width: 60%;
    position: relative;
    margin: 0 auto;
}
.vids{
    background-color: cornflowerblue;
    width: 80%;
    display: flex;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
}
.vids video{
    width: 100%;
    height: 380px;
}
.vids input{
    display: none;
}
.dots{
    display: flex;
    justify-content: center;
    width: 80%;
    position: absolute;
    bottom: 0;
}
.dots label{
    height: 12px;
    width: 12px;
    background-color: darkslategray;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 8px;
}
.dots label:hover{
    background-color: gray;
}
#vid1:checked ~ .v1{
    margin-left: 0;
}
#vid2:checked ~ .v2{
    margin-left: -100%;
}
#vid1:checked ~ .dots #btn1{
    background-color: white;
}
#vid2:checked ~ .dots #btn2{
    background-color: white;
}
</style>

标签： javascripthtmlcss

解决方案

这可以用Javascript实现...

<script>
var vid1 = document.getElementById("vid1");
document.getElementById("vid1").addEventListener("blur", pauseVid);

function pauseVid() 
   {
        vid1.pause();
   }
</script>

所以在这里我们添加了一个 onblur 事件监听器，当该元素（视频）的焦点丢失时，它将调用一个函数来暂停视频......您也可以对其他视频 ID 使用相同的代码......让我知道它是否有效（：

推荐阅读