在特定时间添加 link 视频

Question

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

<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>

Answer 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。

Answer 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>

Answer 3

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

这是另一个工作代码。

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

在特定时间添加 link 视频

Add link over video on certain time

javascript

video

time

mp4

function