Question

我正在尝试显示html5视频搜索栏的悬停时间。（类似于youtube的方式）。我试图在视频上使用timeupdate事件，如下所示，但看起来还有更多内容。

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

我确实尝试了解多个帖子，但没有找到解决方案。我需要使用onmouseover事件吗？当用户将鼠标放在滑块上时，如何计算视频帧的时间？

Answer 1

我会做一个这样的自定义控件：使用控件div和video.duration的宽度来计算新时间。

希望这有帮助！

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>

编辑：澄清我的答案

如果您查看代码：e.clientX / controls.clientWidth * video.duration，您会看到

e.clientX是鼠标在控件矩形上的当前x位置。
controls.clientWidth是控件矩形的总宽度。
video.duration是视频的总时间。

所以，如果我将鼠标放在矩形的末端。我会得到100％的视频时长。而在一开始我会得到0％。如果我将鼠标放在正中间，我会得到视频中间的时间。

video.currentTime我可以更改视频的当前时间，以便该帧恰好是当时正确的帧。

Answer 2

尝试使用controls属性。您将获得 YouTube 视频中出现的类似控制栏。

如果存在此属性，Gecko将提供控件以允许用户控制视频播放，包括音量，搜索和暂停/恢复播放。 https://developer.mozilla.org/pl/docs/Web/HTML/Element/video

code.pen中的示例：（等待视频加载） http://codepen.io/mikemoney/pen/QdQvXY

关于SO的示例：（等待视频加载）

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

显示悬停在搜索栏上的视频帧的时间

2 个答案: