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

Question

我在这里使用引导模式，当我使用 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

Answer 1

因为如果你使用 iframe 插入本地视频，像 Chrome 这样的浏览器会创建如下元素：

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

它将添加属性autoplay。

所以你可以处理它的一种方法是从文档准备好的元素中删除 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;
    });
});

因为 iframe 的 src 中的 url 应该返回一个 HTML。