Question

我使用切换功能来显示和隐藏内容，效果很好，我唯一的问题是，当我放置视频时视频会继续播放，即使它被隐藏了，有没有办法隐藏在视频隐藏时播放视频

$(document).ready(function(){
    $("button").click(function(){             
        $("p").toggle();
    });
});



 <button>Toggle</button>

  <p>the video is displayed here</p>

Answer 1

你可以这样做：

$(document).ready(function(){
$("button").click(function(){
    $("p").toggle();
    if (document.getElementById('myVideo').paused) 
      document.getElementById('myVideo').play();
    else 
      document.getElementById('myVideo').pause();
});
});

如果视频暂停，请播放，如果正在播放，请暂停点击。

Answer 2

我认为您希望使用p检查您的包装$("p").is(":visible")元素是否可见。

如果可见，请使用document.getElementById("yourVideoId").pause()暂停视频，明显将"yourVideoId"替换为id标记<video>属性中的内容。然后，在您执行此操作后，您可以在.toggle()元素上调用p。

如果它不可见，并且用户点击你的切换按钮，我会想象你只想显示视频，而不是继续播放它，因为这可能对用户有点刺耳。但是，如果您确实需要该功能，只需在下面的示例中的document.getElementById("video").play()块中添加else。

以下是演示功能的工作示例：

$(document).ready(function() {
    $("button").click(function() {
        var p = $("p");
        if (p.is(":visible")) {
          document.getElementById("video").pause();
          $(this).text("Show");
        } else {
          $(this).text("Hide");
        }
        p.toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<video id="video" controls width="40%"> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</p>
<button>Hide</button>

在视频上添加width="40%"，使其适合摘录窗口。

在jQuery中切换函数

2 个答案: