HTML5 视频自定义附加搜索栏

Posted 2023-03-05

【中文标题】HTML5 视频自定义附加搜索栏

【英文标题】：HTML5 Video custom additional seek bar

【发布时间】：2017-06-16 15:43:08

【问题描述】：

我正在修补 html5 视频。我有一个使用香草 HTML5 <video> 标签的视频，如下所示：

<video id="video"   controls>
    <source src="video_src.mp4" type="video/mp4">
</video>

一切都好。我正在寻找的是一种在视频底部有一个额外的搜索栏的方法。搜索栏将是我拥有的代表视频的图像。通过单击图像上的任意位置，视频将移动到该点。

同样，这将与默认视频功能附带的默认进度条一起使用。默认搜索栏和自定义搜索栏必须同步，这样当一个更新时，另一个也会移动。

谁能指出我正确的方向？

谢谢！

【问题讨论】：

我个人正在努力将其概念化，但我可以想象您必须在搜索栏的宽度和单击某个位置之间映射视频总时间的划分会在你的搜索栏上计算出当前时间和分配给该扇区的时间的差异，然后将其添加到视频中。

你是对的@Crowes。我在下面实现了相同的。

【参考方案1】：

var vid = document.getElementById("video");
vid.ontimeupdate = function()
  var percentage = ( vid.currentTime / vid.duration ) * 100;
  $("#custom-seekbar span").css("width", percentage+"%");
;

$("#custom-seekbar").on("click", function(e)
    var offset = $(this).offset();
    var left = (e.pageX - offset.left);
    var totalWidth = $("#custom-seekbar").width();
    var percentage = ( left / totalWidth );
    var vidTime = vid.duration * percentage;
    vid.currentTime = vidTime;
);//click()

#custom-seekbar
  
  cursor: pointer;
  height: 10px;
  margin-bottom: 10px;
  outline: thin solid orange;
  overflow: hidden;
  position: relative;
  width: 400px;

#custom-seekbar span

  background-color: orange;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0px;


/* following rule is for hiding Stack Overflow's console  */
.as-console-wrapper display: none !important;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="custom-seekbar">
  <span></span>
</div>
<video id="video"  controls autoplay>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

【讨论】：

这太棒了。您将如何点击顶部自定义搜索栏然后更改视频的位置？目前，您只能使用默认栏进行真正的搜索。

@intl 我已经更新了我的答案以包含它。请注意，这是一个基本实现，您可能需要进行一些微调。

@MohitBhardwaj，伟大的工作老兄（y）

@MohitBhardwaj 难度刚刚升级到挑战者级别。

@noogui :D 也许您可以创建一个新问题，添加您尝试过的内容