如何在页面刷新时停止增强说唱模态视频自动播放

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>

工作代码在这里代码笔链接在这里

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;
});
});

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