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

Posted 2023-05-07

【中文标题】切换到另一个视频时如何使视频停止播放？

【英文标题】：How to make the video to stop playing when changing to another video?

【发布时间】：2021-09-13 18:01:59

【问题描述】：

在我的网站中，我有一个视频播放器和一些视频，当我播放另一个视频时，我无法让视频停止。如果可以用 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" ></video>
            <video src="video2.mp4" controls class="v2" ></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>

【问题讨论】：

我认为有一个onplay事件。您可以收听并暂停所有其他视频。 ***.com/questions/5958132/…

事实是我猜这是一个模态。我的是一个 div，里面有视频。

【参考方案1】：

这可以用javascript实现...

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

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

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

【讨论】：

不，伙计，它没有用。我切换到另一个视频，第一个视频仍在播放。甚至当我播放另一个时，它仍在播放@Harsh