在悬停搜索栏上显示视频帧的时间 [英] Showing time of the video frame on hover over seek bar
问题描述
我正在尝试显示html5视频的搜索栏悬停的时间.(类似于youtube的操作方式).我尝试在视频上使用timeupdate事件，如下所示，但看起来还有更多内容.
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>
我确实尝试理解了多个帖子，但没有找到解决方案.我是否需要使用onmouseover事件?当用户将鼠标放在滑块上时，如何计算视频帧的时间?
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?
推荐答案
我将制作一个自定义控件，如下所示:使用div和 video.duration 控件的宽度来计算新时间.
I would make a custom controls something like this:
Using the width of the controls div and video.duration to calculate the new time.
希望这会有所帮助！
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 ，您会看到
If you look at the code: e.clientX / controls.clientWidth * video.duration you will see that
-
e.clientX是鼠标在控件矩形上的当前x位置. -
controls.clientWidth是控件矩形的总宽度. -
video.duration是视频的总时间.
e.clientXis the current x position of your mouse on the controls rectangle.controls.clientWidthis the total width of the controls rectangle.video.durationis the total time of the video.
所以，如果我将鼠标放在矩形的末端.我会得到100％的视频时长.一开始我会得到0％.如果我将鼠标恰好放在中间的位置，那么我会得到恰好在视频中间的时间.
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.
使用 video.currentTime ，我可以更改视频的当前时间，以便帧恰好是该时间的正确帧.
with video.currentTime I can change the current time of the video so that the frame is exactly the right frame of the time.
这篇关于在悬停搜索栏上显示视频帧的时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
