文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在html5视频播放器中添加seek滑块？

问如何在html5视频播放器中添加seek滑块？
EN

Stack Overflow用户

提问于 2020-05-03 08:12:54

回答 1查看 1.7K关注 0票数 0

我正在尝试创建一个自定义视频播放器，我已经设法添加一个搜索栏，现在我想添加一个搜索滑块到我的搜索栏(视频进度条)，意思是，我想要这样的东西。

，

由于上面来自Netflix用户的图像可以将红色圆圈向后滑动并强制执行，因此我希望在我的自定义播放器中也是如此

这是我到目前为止所拥有的。

Jsfiddle：demo

HTML

<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>

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()

Css

#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;}

我需要做什么才能实现我想要的？

javascript

html

jquery

css

html5-video

Stack Overflow用户

回答已采纳

发布于 2020-05-03 08:37:17

试试这样的东西。

#custom-seekbar span.hover:after{
  content: '■';
  display:block;
  position: absolute;
  background-color: red;
  color: red;
  top: 0;
  right: 0;
}

$("#custom-seekbar").hover(function(){
    $(this).find("span").addClass("hover");
}, function(){
    $(this).find("span").removeClass("hover");
})

var sliderCanMove = false;

$("#custom-seekbar").on("mousedown", function(){
    sliderCanMove = true;

});

$(window).on("mousemove", function(e){
    if(sliderCanMove){
        var offset = $("#custom-seekbar").offset();
            var left = ((e.clientX + offset.left));
            var totalWidth = $("#custom-seekbar").width();
            var percentage = ( left / totalWidth );
            var vidTime = vid.duration * percentage;
            vid.currentTime = vidTime;
    }
});

$(window).on("mouseup", function(){
    sliderCanMove = false;
});

更新的fiddle here.

票数 1

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61568028

复制

相似问题

问如何在html5视频播放器中添加seek滑块？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html5视频播放器中添加seek滑块？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html5视频播放器中添加seek滑块？
EN