时间戳

首页 > 解决方案 > 有没有办法让 HTML5 视频在视频中的特定点显示一个 div？

javascript - 有没有办法让 HTML5 视频在视频中的特定点显示一个 div？

问题描述

例如，我希望在 HTML5 视频到达某个点时出现一个弹出窗口；视频第 34 秒...

我在 div 中有弹出窗口，我只需要找到一种方法使其仅在视频达到特定时间标记后才出现。我不能只知道用户在页面上停留的时间……（这使它有点困难……！）它必须来自播放的视频。

这有可能吗？

  <video class="fs-video" preload="auto" >
    <source  class="fs-video"  src="videos/scene1_option1a.mp4"  type="video/mp4" > 
    </video>

谢谢！

标签： javascripthtmlvideopopuphtml5-video

解决方案

使用在视频进度时运行的 timeupdate 事件。但它会在每次更新时触发，以便解决维护标志并检查是否已显示弹出窗口

这是一个 6 秒的演示

var popupShown = false

var vid = document.getElementById("myVideo");
vid.addEventListener('timeupdate', function(e) {
  if ((e.target.currentTime > 6) && !popupShown) {
    $('#myModal').modal('show');
    popupShown = true;
  }
});
<!DOCTYPE html>
<html>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<body>

  <video class="fs-video" preload="auto" id="myVideo" controls>
  <source  class="fs-video"  src="https://www.w3schools.com/tags/mov_bbb.mp4"   type="video/mp4" >
</video>

  <!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Video is at 6 seconds.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</body>

</html>

推荐阅读