Question

当我滚动时，有没有办法显示自定义时间，如下面的myscreenshot。

示例因为这是33秒视频，在滚动时应该显示滚动下方的时间00:03
我的html5代码

<!DOCTYPE html> 
  
<html lang="en"> 
<head> 
   <meta charset="utf-8"> 
   <title>Custom HTML5 Video Player</title> 
</head> 
<body> 
  
<div id="container"> 
  
    <h1> HTML5 Video </h1> 
  
    <div id="video_container"> 
        <video controls="true"> 
            <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4"> 
            <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type="video/ogg"> 
              
            <!-- LINK TO FLASH FALLBACK PLAYER HERE. COULD BE EMBED OR OBJECT ELEMENT -->
        </video> 
    </div> 
  
</div>     
  
</body> 
</html>

Answer 1

＆＃13;

var video = document.getElementById("Video1");

function seek() {
  video.addEventListener("timeupdate", function() {
    //  Current time  
    var vTime = video.currentTime;
    var left_begin = 105; //position where you want the displayed text to begin
    var left_end = 180; // position where it is at the end
    var width = left_end - left_begin;

    $("#curTime").css({
      left:left_begin + (width * (vTime / video.duration)) + "px"
    });
    console.log( $("#curTime").offset().left);

    document.getElementById("curTime").textContent = vTime.toFixed(1);
  }, false);


}

＆＃13;

#curTime {
  left: 100px;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <video id="Video1" width="320" height="240" controls onseeking="seek()">
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>
  <div id="curTime"></div>

＆＃13;

看起来Microsoft有你的答案。向下滚动到＆＃34;我在哪里＆＃34;。那里有一个小的javascript函数，它可以获得当前时间。然后，您可以使用返回的值创建自己的元素，该元素将显示在视频下方并随之滑动。

对于搜索事件，您可以按照w3schools tutorial使用onseeking函数。

希望有所帮助。

HTML5视频在滚动条上显示自定义时间

1 个答案: