时间戳

首页 > 解决方案 > Bootstrap 4 - 模态视频重新加载

javascript - Bootstrap 4 - 模态视频重新加载

问题描述

我正在使用 Bootstrap 创建一个投资组合库，单击后会弹出一个模式并播放视频。我将在这个画廊中展示一系列视频，因此每个模式都有一个唯一的#id。

我启动并运行了模态，并为指定的模态打开了正确的视频。但是，当我关闭模态并重新打开该模态时，会从另一个模态播放不同的视频。下面是一个示例：

#Modal1是一个关于体育的视频。#Modal2是一个关于天气的视频。当用户点击 时#Modal1，Sports 视频会填充在模式中。当用户单击 时#Modal2，会填充天气视频。但是，当用户关闭#Modal2并重新打开它时，会填充有关 Sports 的视频。#Modal1我已经通过添加其他模式对此进行了测试，并且它们在关闭后都会重新填充。

另外，我确信我可以压缩 JavaScript 以使其运行更流畅，但我是一个非常环保的开发人员。我的专长是运动设计，而不是开发。我需要一些帮助！

function stopVideo() {
  var $frame = $('iframe#nofocusvideo');

  // saves the current iframe source
  var vidsrc = $frame.attr('src');

  // sets the source to nothing, stopping the video
  $frame.attr('src', '');

  // sets it back to the correct link so that it reloads immediately on the next window open
  $frame.attr('src', vidsrc);
}

$('#portfolioModal1').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal2').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal3').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal4').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal5').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal6').on('hidden.bs.modal', function(e) {
  stopVideo();
})
.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto;
}


/**** Portfolio GIF Rollover States ****/

.project-rollover1 {
  background-image: url("../img/portfolio/thumbnails/01-reel.gif");
  background-size: cover;
}

.project-rollover2 {
  background-image: url("../img/portfolio/thumbnails/02-jg-wentworth.gif");
  background-size: cover;
}

.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.portfolio-modal {
  padding-right: 0px !important;
}

.portfolio-modal .modal-dialog {
  margin: 1rem;
  max-width: 100vw;
}

.portfolio-modal .modal-content {
  padding: 100px 0;
  background-image: url("../img/patterns/debut_light.png");
}

.portfolio-modal .modal-content h2 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333333;
}

.portfolio-modal .modal-content p {
  margin: 10px 0 20px;
  font-size: 16px;
}

.portfolio-modal .modal-content p.item-intro {
  font-size: 16px;
  font-style: italic;
  margin: 10px 0 20px;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.portfolio-modal .modal-content ul.list-inline {
  margin-top: 0;
  margin-bottom: 30px;
}

.portfolio-modal .modal-content img {
  margin-bottom: 30px;
}

.portfolio-modal .modal-content button {
  cursor: pointer;
}

.portfolio-modal .close-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}

.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}

.portfolio-modal .close-modal .lr {
  /* Safari and Chrome */
  z-index: 1051;
  width: 1px;
  height: 75px;
  margin-left: 35px;
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #212529;
}

.portfolio-modal .close-modal .lr .rl {
  /* Safari and Chrome */
  z-index: 1052;
  width: 1px;
  height: 75px;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #212529;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
HTML
<!-- Portfolio Grid -->
<section class="p-0 bg-light" id="portfolio">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <!-- Project 1 -->
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" data-toggle="modal" href="#portfolioModal1">
          Project1
          <div class="portfolio-box-caption project-rollover1">
          </div>
        </a>
      </div>
      <!-- Project 2 -->
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" data-toggle="modal" href="#portfolioModal2">
          Project2
          <div class="portfolio-box-caption project-rollover2">
          </div>
        </a>
      </div>
    </div>
  </div>
</section>


<!-- Portfolio Modals -->

<!-- Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <div class="modal-body">
              <!-- Project Details Go Here -->
              <h2 class="text-uppercase">2018 Reel</h2>
              <div class="container">
                <div class="row">
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="nofocusvideo" class="embed-responsive-item" src="https://player.vimeo.com/video/250633785" allowfullscreen></iframe>
                  </div>
                </div>
              </div>
              <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae,
                nostrum, reiciendis facere nemo!</p>
              <ul class="list-inline">
                <li>Date: Mid 2018</li>
                <li>Client: Austin Bonelli</li>
                <li>Category: 2D Animation</li>
              </ul>
              <button class="btn btn-primary-pink" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i>
                                Close Project
                              </button>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <div class="modal-body">
              <!-- Project Details Go Here -->
              <h2 class="text-uppercase">JG Wentworth</h2>
              <div class="container">
                <div class="row">
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="nofocusvideo" class="embed-responsive-item" src="https://player.vimeo.com/video/202987459" allowfullscreen></iframe>
                  </div>
                </div>
              </div>
              <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae,
                nostrum, reiciendis facere nemo!</p>
              <ul class="list-inline">
                <li>Date: Mid 2018</li>
                <li>Client: Austin Bonelli</li>
                <li>Category: 2D Animation</li>
              </ul>
              <button class="btn btn-primary-pink" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i>
                                Close Project
                              </button>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

标签： javascriptbootstrap-4bootstrap-modal

解决方案

我尝试使用 classes 而不是id，我注意到您有两个 iframes相同的id，这是不应该发生的，我想这是将视频源的值设置为id找到的脚本的第一个实例的值；更改此设置后，它似乎实际上按预期工作。可能需要进一步澄清；但我认为这是在正确的轨道上。

function stopVideo() {
  var $frame = this.$('iframe.nofocusvideo');

  // saves the current iframe source
  var vidsrc = $frame.attr('src');

  // sets the source to nothing, stopping the video
  $frame.attr('src', '');

  // sets it back to the correct link so that it reloads immediately on the next window open
  $frame.attr('src', vidsrc);
}

$('#portfolioModal1').on('hidden.bs.modal', function(e) {
  $('#portfolioModal1 iframe').attr("src", $("#portfolioModal1 iframe").attr("src"));
  stopVideo();
})

$('#portfolioModal2').on('hidden.bs.modal', function(e) {
  $('#portfolioModal2 iframe').attr("src", $("#portfolioModal2 iframe").attr("src"));
  stopVideo();
})

$('#portfolioModal3').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal4').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal5').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal6').on('hidden.bs.modal', function(e) {
  stopVideo();
})
.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto;
}


/**** Portfolio GIF Rollover States ****/

.project-rollover1 {
  background-image: url("../img/portfolio/thumbnails/01-reel.gif");
  background-size: cover;
}

.project-rollover2 {
  background-image: url("../img/portfolio/thumbnails/02-jg-wentworth.gif");
  background-size: cover;
}

.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.portfolio-modal {
  padding-right: 0px !important;
}

.portfolio-modal .modal-dialog {
  margin: 1rem;
  max-width: 100vw;
}

.portfolio-modal .modal-content {
  padding: 100px 0;
  background-image: url("../img/patterns/debut_light.png");
}

.portfolio-modal .modal-content h2 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333333;
}

.portfolio-modal .modal-content p {
  margin: 10px 0 20px;
  font-size: 16px;
}

.portfolio-modal .modal-content p.item-intro {
  font-size: 16px;
  font-style: italic;
  margin: 10px 0 20px;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.portfolio-modal .modal-content ul.list-inline {
  margin-top: 0;
  margin-bottom: 30px;
}

.portfolio-modal .modal-content img {
  margin-bottom: 30px;
}

.portfolio-modal .modal-content button {
  cursor: pointer;
}

.portfolio-modal .close-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}

.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}

.portfolio-modal .close-modal .lr {
  /* Safari and Chrome */
  z-index: 1051;
  width: 1px;
  height: 75px;
  margin-left: 35px;
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #212529;
}

.portfolio-modal .close-modal .lr .rl {
  /* Safari and Chrome */
  z-index: 1052;
  width: 1px;
  height: 75px;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #212529;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
HTML
<!-- Portfolio Grid -->
<section class="p-0 bg-light" id="portfolio">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <!-- Project 1 -->
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" data-toggle="modal" href="#portfolioModal1">
          Project1
          <div class="portfolio-box-caption project-rollover1">
          </div>
        </a>
      </div>
      <!-- Project 2 -->
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" data-toggle="modal" href="#portfolioModal2">
          Project2
          <div class="portfolio-box-caption project-rollover2">
          </div>
        </a>
      </div>
    </div>
  </div>
</section>


<!-- Portfolio Modals -->

<!-- Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <div class="modal-body">
              <!-- Project Details Go Here -->
              <h2 class="text-uppercase">2018 Reel</h2>
              <div class="container">
                <div class="row">
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="nofocusvideo" class="nofocusvideo embed-responsive-item" src="https://player.vimeo.com/video/250633785" allowfullscreen></iframe>
                  </div>
                </div>
              </div>
              <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae,
                nostrum, reiciendis facere nemo!</p>
              <ul class="list-inline">
                <li>Date: Mid 2018</li>
                <li>Client: Austin Bonelli</li>
                <li>Category: 2D Animation</li>
              </ul>
              <button class="btn btn-primary-pink" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i>
                                Close Project
                              </button>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <div class="modal-body">
              <!-- Project Details Go Here -->
              <h2 class="text-uppercase">JG Wentworth</h2>
              <div class="container">
                <div class="row">
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="nofocusvideo" class="nofocusvideo2 embed-responsive-item" src="https://player.vimeo.com/video/202987459" allowfullscreen></iframe>
                  </div>
                </div>
              </div>
              <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae,
                nostrum, reiciendis facere nemo!</p>
              <ul class="list-inline">
                <li>Date: Mid 2018</li>
                <li>Client: Austin Bonelli</li>
                <li>Category: 2D Animation</li>
              </ul>
              <button class="btn btn-primary-pink" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i>
                                Close Project
                              </button>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读