时间戳

首页 > 解决方案 > jQuery在用户关闭视频后阻止自动播放

html - jQuery在用户关闭视频后阻止自动播放

问题描述

我正在编写一个脚本，它将弹出一个视频并按照这个示例自动播放它。一切正常，但是当用户关闭视频时，它会继续在后台播放。用户关闭视频后，如何告诉浏览器关闭自动播放？

$(document).ready(function() {
  $('#headerVideoLink').magnificPopup({
    type: 'inline'
  });
});
#headerPopup {
  width: 75%;
  margin: 0 auto;
  position: relative;
  top: 80px;
}

#headerPopup iframe {
  width: 100%;
  margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="headerPopup" class="mfp-hide">
  <iframe width="854" height="480" src="https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
</div>

标签： htmljquery

解决方案

从我的角度来看，您的问题没有直接的答案。这是人们尝试在网站上显示视频时经常遇到的情况。

执行此操作的最佳方法是使用 Bootstrap CSS 框架，因为它具有模式（弹出窗口），您可以在其中添加视频，并且无论何时关闭或打开它们，它都会显示可以触发功能的事件。

在这种情况下，您需要 jQuery 在打开和关闭 modal 时做一些事情。为了避免在用户关闭模态框时视频在后台播放，一种方法是删除srciframe 属性的内容，这将阻止 iframe 继续播放视频。然后当用户打开模式时添加链接。如果不这样做，用户可能会点击视频一次，它会正常工作，但是在 jQuery 删除视频的链接后，它将无法正常工作。

我为此目的使用的 jQuery 脚本：

$(document).ready(function(){
            
     // Save the url of the video in a variable
     var url = $("#MyVideo").attr('src');
            
     // When the modal is closed remove the url of the iframe
     $("#myModal").on('hide.bs.modal', function(){
        $("#MyVideo").attr('src', '');
     });
            
     // When the modal is opened, add the url to the iframe
     $("#myModal").on('show.bs.modal', function(){
        $("#MyVideo").attr('src', url);
     });
});

您可以在此处阅读有关 Bootstrap 模态如何工作的更多信息。事件的详细信息和解释在页面底部。

推荐阅读