javascript - 使用 div 停止嵌入视频

Question

我的页面包含一个嵌入的视频，它漂浮在一个 div 动画上，右上角有一个小 X 可以关闭它，但是当我点击小 X 时它会继续播放，因为小 X 只隐藏了视频，将其发送回其原始位置，但我想在发送回时将其静音。

我已经尝试了所有组合来尝试使用 onClick 将其发送到 deleteVideo()，但没有任何效果。

<script type="text/javascript">
  function deleteVideo() {
    document.getElementById('VideoPlayer').src = '';
  }
</script>

<a class="closeX" id="closeX" onclick="deleteVideo()";></a>

我承认我在 javascript 和 jQuery 方面一无是处，我什至分不清它们的区别。

原来的样子是这样的:

<div class="dark" id="dark" style="display:none;"></div>
<div class="box" id="box">
  <a class="closeX" id="closeX" onclick="deleteVideo()";></a>
  <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/video?;start=972&amp;end=1507" frameborder="0" allowfullscreen></iframe>
  <div id="Title">Video Title</div>

  <script type="text/javascript" src="jquery-1.3.2.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#action').click(function(){
        $('#dark').fadeIn('fast',function(){
          $('#box').animate({'top':'120px'},500);
        });
      });

      $('#closeX').click(function(){
        $('#box').animate({'top':'-500px'},500,function(){
          $('#dark').fadeOut('fast');
        });
      });
    });
  </script>

我怀疑最后一点放错地方了。它位于上面的代码下方。

<script type="text/javascript">
  function deleteVideo() {
    document.getElementById('VideoPlayer').src='';
  }
</script> 

如果有人能提供帮助，我们将不胜感激。

Answer 1

您需要进行两个小的更改，然后就可以开始了:

更改 1:向您的 iframe 标记添加一个 id 属性，如下所示

<iframe width="560" **id="VideoPlayer"** height="315" src="https://www.youtube-nocookie.com/embed/video?;start=972&amp;end=1507" frameborder="0" allowfullscreen></iframe>

更改 2:更新 jquery 函数以调用

$('#closeX').click(function(){
      $('#box').animate({'top':'-500px'},500,function(){
          $('#dark').fadeOut('fast');
          deleteVideo();    // This will call the function you have defined above.
      });
});