时间戳

首页 > 解决方案 > 设计当鼠标移过视频时间线时出现的最小化图片的问题

javascript - 设计当鼠标移过视频时间线时出现的最小化图片的问题

问题描述

我正在尝试设计一个 html 视频，所以当鼠标移过视频的时间线时，我想为当前时间线位置显示视频的最小化图片，例如 youtube

所以我设计了另一个视频标签并将其隐藏

<div id="smallWindow">
  <video>
    <source src="taken.mp4" type="video/mp4">
  </video>
</div>

并且通过java脚本我制作了这个小窗口（最小化图片）当鼠标进入时间线并且当鼠标移动到时间线时出现，它设置了小窗口视频的时间

durationLineC.onmousemove = function (event) {
//durationLineC is the time line

smallWindow.style.left = event.clientX-(document.documentElement.clientWidth-videoW)/2-80+"px"

smallWindow.querySelector ( "video" ).currentTime = ((event.clientX-(document.documentElement.clientWidth-videoW*0.97)/2)/(videoW*0.96))*player.duration
}

durationLineC.onmouseover = function () {
    smallWindow.querySelector ( "video" ).style.opacity = "1"
}

durationLineC.onmouseout = function () {
    smallWindow.querySelector ( "video" ).style.opacity = "0"
}

但我注意到这种方式会使互联网超载并使互联网变慢，因为小窗口的视频在当前时间改变时正在缓冲

标签： javascripthtml

解决方案

推荐阅读