在特定时间在视频上添加链接答案

【问题标题】：Add link over video on certain time在特定时间在视频上添加链接
【发布时间】：2017-08-16 01:04:36
【问题描述】：

我想在特定时间（例如，在 6 秒到 12 秒之间）在视频上添加链接。目前，我正在获取视频当前时间，但我想做类似的事情：如果视频在第 6 秒和第 12 秒之间播放，请显示此链接。这是我的代码：

<div id="video_container">
    <video id="myVideo" controls>
     <source src="video.mp4" type="video/mp4">
    </video>
</div>

<div>Video current time: <p id="demo">0</p></div>

<div id="overlay">This is HTML overlay on top of the video! </div>


<script>
    var vid = document.getElementById("myVideo");
    vid.ontimeupdate = function() {myFunction()};

    function myFunction() {
    // Display the current position of the video in a <p> element with id="demo"
        document.getElementById("demo").innerHTML = vid.currentTime;
    }

    //This piece of code is where I'm trying to display the link
    //**EDITED**
    var overlay = document.getElementById('overlay');

    var video   = document.getElementById('myVideo');

    video.addEventListener('progress', function() {
      var show = video.currentTime >= 5 && video.currentTime < 10;
        overlay.style.visibility= show ? 'visible' : 'visible';
    }, false);

</script>

【问题讨论】：

参考此链接jsfiddle.net/carmijoon/pZbkX
谢谢。你的回答很有帮助（我已经用你刚刚给我的代码编辑了我的帖子），但似乎代码试图在 5 到 10 秒之间显示“覆盖”，但这不起作用。知道为什么吗？

标签： javascript function video time mp4

【解决方案1】：

您可以创建一个元素并将其放置在视频上，然后在超出视频所需范围时删除该元素。但是，如果您使用类似 this one (igVideoPlayer) 的控件会更容易。

该控件具有您可以配置的横幅和商业广告，并且可以免费使用（开源）。

我对您的代码进行了更改：

var overlay = document.getElementById('overlay');
overlay.style.visibility = "hidden";

var video   = document.getElementById('myVideo');

video.addEventListener('progress', function() {
  var show = video.currentTime >= 5 && video.currentTime < 10;
    overlay.style.visibility= show ? 'visible' : 'hidden';
}, false);

它在your fiddle 中对我有用。

【讨论】：

Richardson 同时给了我同样的想法。我编辑了我的帖子，但似乎代码试图在 5 到 10 秒之间显示“覆盖”，但这不起作用......你知道为什么吗？
这是它目前的工作方式：jsfiddle.net/carmijoon/pZbkX 它一直在显示“覆盖”，而不仅仅是在某些秒之间......
@patie 我对您的代码进行了一些更改并更新了我的答案。
感谢您帮助我。恐怕现在没有显示“覆盖”。我已经创建了这个 codepen，因此您可以查看问题并在需要时修改代码

【解决方案2】：

这是工作代码

    <!DOCTYPE html>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">










  <script type="text/javascript" src="/js/lib/dummy.js"></script>








    <link rel="stylesheet" type="text/css" href="/css/result-light.css">




  <style type="text/css">
      #overlay {
  position: absolute; 
  top: 100px; 
  color: #FFF; 
  text-align: center;
  font-size: 20px;
  background-color: rgba(221, 221, 221, 0.3);
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}

#v {
  z-index: 1;
}
  </style>

  <title>Overlay HTML over video player</title>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
  var overlay= document.getElementById('overlay');
  var video= document.getElementById('v');
  video.ontimeupdate = function() {myFunction()};


    function myFunction() {

        var show = video.currentTime>=5 && video.currentTime<10;
        console.log(video.currentTime + ' >> ' + show)
        if(show) {
            $('#overlay').show();
        } else {
            $('#overlay').hide();
        }
    }


}//]]> 

</script>


</head>

<body>
    <video id="v" controls="">
    <source id="webm" src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">

    <p>Your user agent does not support the HTML5 Video element.</p>


  </video>
  <div id="overlay" style='display: none;'>This is HTML overlay on top of the video! </div>






</body></html>

【讨论】：

抱歉昨天无法回答！
非常感谢！这很有帮助

【解决方案3】：

你使用了错误的事件，你应该改用timeupdate。

这是另一个工作代码。

https://jsfiddle.net/miglpuc/ntx4fpb5/

【讨论】：