我有一个本地视频,需要在模态窗口中显示,该视频当前卡在标题的后面。我试图弄乱索引,但无济于事,并陷入困境。我的目标是在页面自动加载后让我的视频在模式窗口中自动播放,并且如果用户单击我的徽标,可以选择再次播放。我真的是新手,但是我认为这会带来很好的影响。 This当前是我的网站。欢迎任何帮助。
<div class="ol-Introvid" data-toggle="modal" data-target="#mymvid">
<img src="images/Logo_white.png">
</div>
<div id="mymvid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body"
style=" width:100%;">
<div style=" width: 350px; height: 315;" src="images/video/Alpha League Trailer.mp4"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
首先,您必须使用<video>
标记而不是<div>
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
发布问题的解决方法
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Subscribe our Newsletter</h4>
</div>
<div class="modal-body" style=" width:100%;">
<video id="player" width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</body>
<div id="button" style="display:none">
<button id="play">
Play again
</button>
</div>
如下添加所需的jquery
和boostrap
链接,我已使用Jquery
完成您的问题
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
要在页面加载时播放视频,请使用$(document).ready(function()
$(document).ready(function() {
$("#myModal").modal('show');
$('#player')[0].play();
});
几秒钟后使用setTimeout
功能关闭模态
setTimeout(function(){
$("#myModal").modal('hide');
document.getElementById("button").style.display = "block";
}, 3000);
然后打开模态并单击按钮播放视频
$(document).on('click','#play',function(){
$("#myModal").modal('show');
$('#player')[0].play();
});