我如何使用引导程序正确显示我的模态视频

问题描述 投票:0回答:2

我有一个本地视频,需要在模态窗口中显示,该视频当前卡在标题的后面。我试图弄乱索引,但无济于事,并陷入困境。我的目标是在页面自动加载后让我的视频在模式窗口中自动播放,并且如果用户单击我的徽标,可以选择再次播放。我真的是新手,但是我认为这会带来很好的影响。 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">&times;</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>
html css bootstrap-modal
2个回答
0
投票

首先,您必须使用<video>标记而不是<div>

   <video width="400" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
   </video>

0
投票

发布问题的解决方法

<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">&times;</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>

如下添加所需的jqueryboostrap链接,我已使用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();
});

这里是小提琴:https://jsfiddle.net/athulmathew/j1dmenxq/

© www.soinside.com 2019 - 2024. All rights reserved.