Question

我尝试使用jQuery代码通过单击关闭（X）按钮来暂停视频。但是它不起作用。请以正确的代码帮助我，该怎么做。我有以下代码。

<div class="popup__overlay">
    <div id="popupVid" class="popup">
        <a class="close">X</a>
        <br />
        <video id="framevideo" controls="controls" width="500">
            <source src="https://eocares.com/wp-content/uploads/2018/12/Website-version1.mp4" type="video/mp4" />
            <br />
        </video>
    </div>
</div>

jQuery代码：

jQuery(".close").click(function() {
    jQuery('video')[0].pause();
});

Answer 1

如果您点击此处播放和暂停视频，则只需执行以下简单代码即可：

$(document).ready(function() {
   var click = 0;
   $('video')[0].play();
   $(".close").click(function() {
    if ( parseInt(click) % 2 == 0 ) {
          $('video')[0].pause();
    } else {
        $('video')[0].play();
    }
     click++;

  });
});

希望这会有所帮助。

Answer 2

您的代码已经准备好，请检查您的代码中是否已正确调用。我已经为您更新了相同的代码，但是我应用了一些CSS样式并称为Jquery库文件。

$(".close").click(function() {
    $('video')[0].pause();
});

.popup__overlay{
      width: 600px;
    position: relative;
    margin: 0 auto;
}
.popup__overlay video{width:100%;}
.close{
      position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
    background: #e2dddd;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    padding: 7px 1px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup__overlay">
    <div id="popupVid" class="popup">
        <a class="close">X</a>
        <br />
        <video id="framevideo" controls="controls" width="500">
            <source src="https://eocares.com/wp-content/uploads/2018/12/Website-version1.mp4" type="video/mp4" />
            <br />
        </video>
    </div>
</div>

如何通过单击“关闭”按钮停止/暂停视频

2 个答案: