Question

我的网站上正在加载全屏BG视频，与用户单击播放按钮以打开模式时要播放的视频相同。当页面加载在后台播放模态视频（iframe）时，我的问题是正确的。我不想这样。我要页面加载> BG视频静音>用户单击播放>打开模式>播放视频并在关闭时停止播放。我尝试使用autoplay = 0，如果将其定向到youtube src视频，该视频有效，但该视频位于我的项目文件夹中。

 <!-- banner -->
<section class="vid">
 <div class="video-container">
   <video class="bg-video" autoplay muted loop>
     <source src="video/americandream.mp4" type="video/mp4">
     Your browser is not supported
  </video>
</div>
  <div class="container-fluid banner">
    <div class="row">
    <div class="col-lg-12 motto text-white">
        <h1 class="banner-heading">
         <span class="overlay-heading">We Believe <br> People Make<br> The Difference</span>
          </h1>
          <div class="d-flex align-items-center mt-4">
            <a class="btn btn-primary btn-demo-top btn-wide demo mb-2 mr-md-2" href="demo.html">Book a Demo</a>

            <a href="#" class="launch-modal media align-items-center u-media-player" data-modal-id="modal-video">
              <span class="d-flex mr-2 ml-3">
                <span class="u-media-player__icon u-media-player__icon--success">
                  <span class="fa fa-play u-media-player__icon-inner"></span>
                </span>
              </span>
              <span class="media-body text-white  u-media-player__icon--success">
                Play Video
              </span>

            </a>
          </div>

                </div>
            </div>
            </div>
      </section>
  <!-- end of Banner -->


  <!-- MODAL -->
  <div class="modal fade" id="modal-video" tabindex="-1" role="dialog" 
   aria-labelledby="modal-video-label">
    <div class="modal-dialog modal-lg" 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>
        </div>
        <div class="modal-body">
            <div class="modal-video">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" 
            src="video/americandream.mp4"       webkitallowfullscreen- 
 two mozallowfullscreen- 
             two allowfullscreen-two></iframe>
                </div>
               </div>
            </div>
          </div>
       </div>
   </div>
   <!--END MODAL -->

Answer 1

不确定是否需要使用iframe播放视频文件，但是假设您不是本示例，则使用<video>标签应具有您所描述的功能。

$('.launch-modal').click(function() {
  $('.modal').fadeIn(200, function() {
  	$('#sample-video').get(0).play()
  });
});

$('.close').click(function() {
  $('.modal').fadeOut(100, function() {
  	$('#sample-video').get(0).pause();
  });
});

.bg-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.banner {
  position: relative;
  background-color: #fff;
  text-align: center;
  padding: 20px;
  margin: 250px 50px 0px;
}

.modal {
  display: none;
  position: fixed;
  width: 33.3%;
  left: 33.3%;
  top: 200px;
}


.modal video {
  max-width: 100%;
  max-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- banner -->
<section class="vid">
  <div class="video-container">
    <video class="bg-video" autoplay muted loop>
     <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
     Your browser is not supported
  </video>
  </div>
  <div class="container-fluid banner">
    <div class="row">
      <div class="col-lg-12 motto text-white">
        <h1 class="banner-heading">
          <span class="overlay-heading">We Believe <br> People Make<br> The Difference</span>
        </h1>
        <div class="d-flex align-items-center mt-4">
          <a class="btn btn-primary btn-demo-top btn-wide demo mb-2 mr-md-2" href="demo.html">Book a Demo</a>

          <a href="#" class="launch-modal media align-items-center u-media-player" data-modal-id="modal-video">
              <span class="d-flex mr-2 ml-3">
                <span class="u-media-player__icon u-media-player__icon--success">
                  <span class="fa fa-play u-media-player__icon-inner"></span>
                </span>
              </span>
              <span class="media-body text-white  u-media-player__icon--success">
                Play Video
              </span>

            </a>
        </div>

      </div>
    </div>
  </div>
</section>
<!-- end of Banner -->


<!-- MODAL -->
<div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
  <div class="modal-dialog modal-lg" 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>
      </div>
      <div class="modal-body">
        <div class="modal-video">
          <div class="embed-responsive embed-responsive-16by9">
            <video id="sample-video">
     <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
     Your browser is not supported
  </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--END MODAL -->

在页面加载时引导4模态播放iframe？

1 个答案: