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中的网址应返回HTML。

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

1 个答案: