代码之家 › 专栏 › 技术社区 › Husna

如何在页面刷新时停止boostrap模式视频自动播放

bootstrap-modal twitter-bootstrap-3 iframe video

Husna · 技术社区 · 6 年前

我使用的是bootstrap模式,这里的代码在我使用URL时运行良好。但当我试图播放本地目录下的视频时。我使用时的示例 <iframe width="1280" height="720" id="sampleVideo" src="assets/sample.mp4" frameborder="0" allowfullscreen></iframe> 它不能正常工作。问题是每当页面刷新视频自动播放之前,单击播放视频按钮。 HTML5 video tag 另外,问题是引导模型不起作用。还有 ?rel=0

$(document).ready(function() {
  $(".modal").modal('hide');
  var url = $("#sampleVideo").attr('src');

  $(".modal").on('hide.bs.modal', function() {
    $("#sampleVideo").attr('src', '');
  });

  $(".modal").on('show.bs.modal', function() {
    $("#sampleVideo").attr('src', url);
  });
});

.teaser {
  background-size: cover;
  position: relative;
}

.teaser .modal-dialog {
  max-width: 100%;
}

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

.teaser iframe {
  height: 100vh;
  width: 100%;
}

.teaser .modal-body {
  padding: 0;
  margin: 0;
}

.teaser .close {
  color: white;
  position: absolute;
  /* background: blue !important; */
  border: 0;
  top: 0;
  z-index: 99999;
  right: 3%;
  float: none;
  opacity: 1;
  font-size: 40px;
  font-weight: 400;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="teaser container-fluid">
  <a href="#videoStory" class="videoBtnbutton more mt-4 d-block" role="button" data-toggle="modal" data-target="#modal-fullscreen">Play Video</a>
  <div class="modal modal-fullscreen fade" id="modal-fullscreen" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body" id="yt-player">
          <iframe width="1280" height="720" id="sampleVideo" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

这里的工作代码 codepen link here

1 回复 | 直到 6 年前

Alan haha 6 年前

因为如果使用iframe插入本地视频,像Chrome这样的浏览器将创建如下元素:

<video controls autoplay name="media">
    <source src="assets/sample.mp4" type="video/mp4">
</video>

它将添加属性 autoplay

所以你能处理的一个方法是 自动播放 文档就绪时元素的属性:

$(document).ready(function(){
    $("#sampleVideo").contents().find('video').prop("autoplay", false);
});

但您可能会遇到一个问题,视频播放之前,文件准备。一种缓解的方法是重置视频进度:

$(document).ready(function(){
    var elem = $("#sampleVideo").contents().find('video')[0];
    elem.autoplay = false;
    elem.pause();
    elem.currentTime = 0;
});

要重新打开模式,还可以为iframe onload添加事件处理程序:

$('#sampleVideo').on('load', function() {
    var elem = $("#sampleVideo").contents().find('video')[0];
    elem.autoplay = false;
    elem.pause();
    elem.currentTime = 0;
});

但我认为真正的解决方法是 video 本地资源的标记:

<div class="modal-body" id="yt-player">
    <video controls name="media">
        <source src="assets/sample.mp4" type="video/mp4">
    </video>
</div>

$(document).ready(function(){
    $(".modal").modal('hide');
    var url = $("#sampleVideo").attr('src');

    $(".modal").on('hide.bs.modal', function(){
        var elem = $("#sampleVideo")[0];
        elem.pause();
        elem.currentTime = 0;
    });

    $(".modal").on('show.bs.modal', function(){
        var elem = $("#sampleVideo")[0];
        elem.pause();
        elem.currentTime = 0;
    });
});

因为url在 src