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

我正在尝试显示 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>

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

我会做一个自定义控件，如下所示：使用控件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我可以更改视频的当前时间，使帧恰好是时间的正确帧。

尝试使用 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>

相关内容

最新更新

热门标签：