模态打开时在Bootstrap模态窗口中自动播放视频 [英] Autoplay video in Bootstrap modal window on modal opening

问题描述

我有一个Bootstrap 3.3.7模态窗口，其中包含使用HTML5视频标签的视频，例如

I have a Bootstrap 3.3.7 modal window which contains a video using the HTML5 video tag, e.g.

<video controls autoplay>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

麻烦在于，当我的网页加载时，视频开始播放(即使由于关闭了模态而无法看到"它，音频也可以播放).

The trouble with this is that when my web page loads, the video starts playing (even though it cannot be "seen" since the modal is closed, the audio also plays).

我知道 autoplay 标签正在执行此操作.但是，加载模式后如何才能自动播放视频?并在模态关闭时停止?

I understand that the autoplay tag is doing this. But how can I get the video to autoplay when the modal is loaded? And stop when the modal is closed?

推荐答案

您可以使用 shown.bs.modal 和 hidden.bs.modal 事件来运行一些事件显示/隐藏模式时的JavaScript代码:

You can use the shown.bs.modal and hidden.bs.modal events to run some javascript code when the modal is shown/hidden:

$('#myModal').on('shown.bs.modal', function () {
  $('#video1')[0].play();
})
$('#myModal').on('hidden.bs.modal', function () {
  $('#video1')[0].pause();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
          <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
          Your browser doesn't support HTML5 video tag.
        </video>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

这篇关于模态打开时在Bootstrap模态窗口中自动播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！