停止使用display：none设置的div中的视频声音

Question

我在videoDiv中有一个视频。 videoDiv的样式显示：无。但是，视频的音频确实开始播放。当videoDiv设置为display：none？

时，我该怎么做才能播放声音？

#videoDiv {
  width: 100%;
  height: 360px;
  position: relative;
}
#videoBlock,
#videoMessage {
  width: 100%;
  height: 360px;
  position: absolute;
  top: 0;
  left: 0;
}
.videoClick {
  text-align: center
}
.videoClick a {
  color: white;
  background-color: rgba(241, 241, 241, 0.25);
  font-size: 1.7em;
  cursor: pointer;
  cursor: hand
}

<div id="videoDiv" style="display:none">
  <div id="videoBlock">
    <video preload="preload" id="video" loop="loop">
      <source src="https://static.webshopapp.com/shops/054833/files/093143183/fotel-photography-course-tour-workshop-video-4.mp4" type="video/mp4" />
    </video>
  </div>
</div>

Answer 1

快速做到这一点的方法是：

＆＃13;

＆＃13;

$( "#videoDiv" ).click(function() {
  
  $("#video").css('display', 'block');
  
  var video = $("#video").get(0);

    if ( video.paused ) {
        video.play();
    } else {
        video.pause();
    }

  
});

＆＃13;

#videoDiv {
  width: 100%; 
  height: 360px;
  position: relative; 
  cursor: pointer;
  background: gray;
}
#videoDiv video {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="videoDiv">

    <video preload="preload" id="video"loop="loop">
      <source src="https://static.webshopapp.com/shops/054833/files/093143183/fotel-photography-course-tour-workshop-video-4.mp4" type="video/mp4"></source>
    </video>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这有效：JSFIDDLE

$('#test').on('click', function() {
var videoDiv = $('#videoDiv').toggle();

if ( videoDiv.is(':visible') ) {
    $('#video').get(0).load();
    $('#video').get(0).play();
} else {
$('#video').get(0).pause();
$('#video').get(0).unload();

}

}）;