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.
      });
});

使用div停止嵌入的视频

1 个答案: