Showing time of the video frame on hover over seek

I am trying to show the time on hover of seek bar of a html5 video. ( similar to how youtube does it). I have tried to use the timeupdate event on the video as below but looks like there is more to it.

        <script>
    function myFunction(event) {
        // The currentTime property 
        document.getElementById("demo").innerHTML = event.currentTime;
      var video = event;
      video.addEventListener('progress', function() {
        var bufferedEnd = video.buffered.end(video.buffered.length - 1);
        var duration =  video.duration.toFixed(1);
        alert(duration);
        if (duration > 0) {
          document.getElementById('buffered-amount').style.width = ((bufferedEnd / duration)*100) + "%";
        }
      });

      //  display the current and remaining times
    video.addEventListener("timeupdate", function () {
      //  Current time  
      var vTime = video.currentTime;
      var vLength = video.duration.toFixed(1);
      document.getElementById("curTime").textContent = vTime.toFixed(1);
      document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
    }, false);

   }
  </script>

html:

 <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
   </video>
  <div class="buffered">
   <span id="buffered-amount"></span>
  </div>
  <div class="progress">
   <span id="progress-amount"></span>
  </div>

  <p>Playback position: <span id="demo"></span></p>
  <p>Current Time: <span id="curTime"></span></p>
  <p>Remaining Time: <span id="vRemaining"></span></p>

I did try to understand multiple posts but did not find a solution. Do I need to use onmouseover event instead? How do I calculate the time of the video frame when the user positions the mouse on the slider?

标签： angularjs html5 html5-video

2条回答

你好瞎i

2楼-- · 2019-08-12 10:12

Try using controls attribute. You will get similar control bar that is present on YouTube videos.

If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback. https://developer.mozilla.org/pl/docs/Web/HTML/Element/video

Example in code.pen:(wait for video to load) http://codepen.io/mikemoney/pen/QdQvXY

Example on SO: (wait for video to load)

<video src="http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4" autoplay poster="https://i.ytimg.com/vi/1iGy1Rp93o4/maxresdefault.jpg" controls width="480">
</video>

0人赞添加讨论(0) 举报

▲ chillily

3楼-- · 2019-08-12 10:19

I would make a custom controls something like this: Using the width of the controls div and video.duration to calculate the new time.

Hope this helps!

window.onload = function(){
  controls.innerText = ''
function getNewTime(e){
		return e.clientX / controls.clientWidth * video.duration
	}
	controls.addEventListener('mousemove', function(e){
		controls.innerText = (getNewTime(e).toFixed(2))
	})
	
	controls.addEventListener('click', function(e){
		video.currentTime = getNewTime(e)
	})
    
    video.addEventListener('click', function(){
        video.play()
      }
    )
    }

body{
		margin:0;
		background:black;
	}
	#wrapper{
		display:flex;
		flex-direction:column;
	}
	#video{
		flex:1;
		height:calc(100vh - 32px);
	}
	#controls{
		height:32px;
		background:red;
		display:flex;
		justify-content:center;
		align-items:center;
	}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Custom Video Control</title>
</head>
<body>
	<div id='wrapper'>
		<video id='video' src='http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'></video>
		<div id='controls'>loading</div>
	</div>
</body>

</html>

edit: to clarify my answer

If you look at the code: e.clientX / controls.clientWidth * video.duration you will see that

e.clientX is the current x position of your mouse on the controls rectangle.
controls.clientWidth is the total width of the controls rectangle.
video.duration is the total time of the video.

so if I would put my mouse on the end of the of the rectanlge. I would get 100% of the video duration. and in the beginning I would get 0%. if I would put my mouse at exactly in the middle I would get exactly the time of the middle of the video.

with video.currentTime I can change the current time of the video so that the frame is exactly the right frame of the time.

0人赞添加讨论(0) 举报

Showing time of the video frame on hover over seek

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间