我正在修补 HTML5 视频。我有一个使用 vanilla HTML5 工作的视频 <video>
标签,像这样:
<video id="video" width="250" height="250" controls>
<source src="video_src.mp4" type="video/mp4">
</video>
一切顺利。我正在寻找的是一种在视频底部有一个额外的搜索栏的方法。搜索栏将是我拥有的代表视频的图像。单击图像上的任意位置,视频将移动到该点。
同样,除了默认视频功能附带的默认进度条之外,这还将起作用。默认搜索栏和自定义搜索栏必须同步,这样当一个更新时,另一个也会移动。
谁能指出我正确的方向?
谢谢!
最佳答案
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" width="400" controls autoplay>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
关于javascript - HTML5 视频自定义附加搜索栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41953604/