Question

我有点麻烦我正在为html5视频播放器制作自己的控件。我有一切正常工作，但我希望我的滑块有拇指左侧的指定颜色和拇指右侧的不同颜色。我在这里看到了另一个例子，几乎是用jquery做的，但我只能让它工作onclick而不是自动跟视频一起进行。我是javascript的新手，可以帮助实现这一点。

<script>
    var 
        vid, 
        playbtn,
        mutebtn,
        fullscreenbtn,
        seekslider,
        volumeslider,
        curtimetext,
        durtimetext;

    function intializePlayer(){
        //Set object references
        vid = document.getElementById("my_player");
        playbtn = document.getElementById("playpausebtn");
        mutebtn = document.getElementById("mutebtn");
        fullscreenbtn = document.getElementById("fullscreenbtn");
        seekslider = document.getElementById("seekslider");
        volumeslider = document.getElementById("volumeslider");
        curtimetext = document.getElementById("curtimetext");
        durtimetext = document.getElementById("durtimetext");
        //Add event listeners
        playbtn.addEventListener("click",playPause,false);
        mutebtn.addEventListener("click",vidmute,false);
        fullscreenbtn.addEventListener("click",toggleFullScreen,false);
        seekslider.addEventListener("change",vidSeek,false);
        volumeslider.addEventListener("change",setvolume,false);
        vid.addEventListener("timeupdate",seektimeupdate,false);
    }

    window.onload = intializePlayer;

        function playPause(){
            if(vid.paused){
                vid.play();
                playbtn.style.background = "url(images/pause.png)";
            } else {
                vid.pause();
                playbtn.style.background = "url(images/play.png)";
            }
        }   
        function vidSeek(){
            var seekto = vid.duration * (seekslider.value / 100);
            vid.currentTime = seekto;


        }
        function seektimeupdate() {
            var nt = vid.currentTime * (100 / vid.duration);
            seekslider.value = nt;
            var curmins = Math.floor(vid.currentTime / 60);
            var cursecs = Math.floor(vid.currentTime - curmins * 60);
            var durmins = Math.floor(vid.duration / 60);
            var dursecs = Math.floor(vid.duration - durmins * 60);

            if(cursecs < 10){ cursecs = "0"+cursecs; }
            if(dursecs < 10){ dursecs = "0"+dursecs; }
            if(curmins < 10){ curmins = "0"+curmins; }
            if(durmins < 10){ durmins = "0"+durmins; }

            curtimetext.innerHTML = curmins+":"+cursecs;
            durtimetext.innerHTML = durmins+":"+dursecs;
        }
        function vidmute(){
            if(vid.muted){
                vid.muted = false;
                mutebtn.style.background = "url(images/volume.png)";
                volumeslider.value = 100;
            } else {
                vid.muted = true;
                mutebtn.style.background = "url(images/mute.png)";
                volumeslider.value = 0;
            }
        }   
        function setvolume(){
            vid.volume = volumeslider.value / 100;
        }
        function toggleFullScreen(){
            if(vid.requestFullScreen){
                vid.requestFullScreen();
            } else if(vid.webkitRequestFullScreen){
                vid.webkitRequestFullScreen();
            } else if(vid.mozRequestFullScreen){
                vid.mozRequestFullScreen();
            }

    }
</script>

Answer 1

我认为你要做的就是每秒更新一次“seektimeupdate”功能。为此，您可以使用名为“setInterval”的东西。代码看起来像这样。

var updateBar = setInterval(function(){
//You put the code you want to perform here
seektimeupdate();
},1000)

“1000”的含义是每次触发代码之间的延迟（以毫秒为单位）。您可以将“setInterval”视为for循环，它以设定的速率执行其代码，由最后的数字指定。很抱歉，如果我误解了您的问题，如果您想要更多关于“setInterval”功能的帮助，请参阅W3学校的文档here

编辑：假设您可以以秒为单位获取电影的持续时间，以秒为单位获取电影的当前时间，此代码可以正常工作。您可能遇到的唯一问题是更改滑块，具体取决于用户如何移动滑块或者是否暂停电影。我建议使用变量来缓冲函数。（注意）：只需用你在评论中给我的jsFiddle链接替换jQuery。

    var movie = {
    //duration of movie, in seconds
duration:1000,
    //current time in movie, in seconds
currentTime:0
    }

    var update = setInterval(function(){
movie.currentTime += 1;
var val = movie.currentTime/movie.duration;

$("#range").css('background-image',
            '-webkit-gradient(linear, left top, right top, '
            + 'color-stop(' + val + ', #94A14E), '
            + 'color-stop(' + val + ', #C5C5C5)'
            + ')'
            );
    },1000);

javascript进度条和滑块

1 个答案: