将视频currentTime更改为元素鼠标单击

时间:2016-12-05 16:58:40

标签: javascript jquery html video

基本上我正在为我的视频创建一个自定义控件,我不想使用任何其他图书馆或我完全自制的视频中的任何其他来源。所以目前我正在创建视频搜索栏,当用户点击div框的特定位置时,我需要计算鼠标点击位置并将视频currentTime更改为该值。

我的剧本:

function vidseek(){
    var nt=(100/vid.duration)*vid.currentTime;
    $('.skbdur').css('width', nt+"%");
    var skbwidth=$('.skbdur').width()-5;
    $('.skbtd').css({left: skbwidth});
}

$('.sekbar').click(function(e){
    var posX = $(this).offset().left;
    var xpos=e.pageX-posX;
    var seekto=Math.floor((xpos/vid.duration)*100);
    console.log(seekto+" "+xpos + " posX "+posX+" E: "+e.pageX);
    vid.currentTime=seekto;
});

问题在于,当用户点击搜索栏位置170时,视频会跳转到152,到目前为止,我可以判断问题是在var seekto=Math.floor()行的计算中,这不是正确的计算方法用于视频计时。

控制台输出:Seekto: 153 xpos: 262.3499755859375 posX: 793.6500244140625 E: 1056

如果有人能告诉我如何正确计算鼠标位置点击以使视频跳转到该特定位置,我将非常感激。

0 个答案:

没有答案