Geek Answers Handbook

Input range slider type doesn't move in Google Chrome

I am working on a web player for video and I tested it in Chrome (Version 63.0.3239.108 (Official Build) (64-bit))and Firefox (52.5.2 (64-bit)). In Chrome, whenever I move the slider to search the video, it just goes back to the current video playback time, not the time the user wants the video to play.

Here is the function that handles this part:

function vidSeek(){
    var seekto = vid.duration * (seekbar.value / 100);
    vid.currentTime = seekto;
}

This works as expected in Firefox (however, inside firefox there is a problem with the style where it seems that the default style is superimposed on the one I'm writing, but I don't think this has anything to do with it)

Here is the html for the control panel containing the sliders:

<div id="playercontrolls">
    <button id="playpausebtn">Pause</button>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> <!-- Seek bar doesn't work-->
    <span id="curtimetext" class="white-text"></span> / <span id="durtimetext" class="white-text"></span>
    <button id="mutebtn">Mute</button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> <!-- Volume bar works-->
    <button id="fullscreenbtn">[]</button>
</div>

I also created a volume slider that seems to work in both Firefox and Chrome (except for the styling issue in Firefox)

Code for this:

function setvolume(){
    if(vid.muted && volumeslider.value != 0){
        vid.muted = false;
        mutebtn.innerHTML = "Mute";
    }
    vid.volume = volumeslider.value / 100;
}

, :

function seekTimeUpdate(){
    var nt = vid.currentTime * (100 / vid.duration);
    seekbar.value = nt;

    // update time text
    updateTime();
}

function updateTime(){
    var curmins = Math.floor(vid.currentTime / 60);
    var cursecs = Math.round(vid.currentTime - curmins * 60);
    var durmins = Math.floor(vid.duration / 60);
    var dursecs = Math.round(vid.duration - durmins * 60);

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

    curtimetext.innerHTML = curmins+":"+cursecs;
    durtimetext.innerHTML = durmins+":"+dursecs;
}

Firefox, Chrome.

CSS :

input#seekslider {
    width: 90vh;
}

input#volumeslider {
    width: 20vh;
}

input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border: #666 1px solid;
    height: 6px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFF;
    height: 15px;
    width: 15px;
    border-radius: 75%;
    cursor:pointer;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

? - ?

EDIT. javascript : https://pastebin.com/rM54vqqf

HTML- :

<div id="playerContainer" class="container z-depth-1">
            <div class="d-flex justify-content-center">
                <video id="vid" autoplay>
                    <source src= "{% static '/TestVideos/'%}{{path}}" type="video/mp4"></source>
                </video>
            </div>
            <div id="playercontrolls">
                <button id="playpausebtn" class="nokit"><i class="fa fa-pause white-text" aria-hidden="true"></i></button>
                <span class="slider"><input id="seekslider" type="range" min="0" max="100" value="0" step="0.1">    </span>
                <span id="curtimetext" class="white-text"></span> / <span id="durtimetext" class="white-text"></span>
                <button id="mutebtn" class="nokit"><i class="fa fa-volume-up white-text" aria-hidden="true"></i></button>
                <span class="slider"><input id="volumeslider" type="range" min="0" max="100" value="100" step="1"></span>
                <button id="fullscreenbtn" class="nokit"><i class="fa fa-desktop white-text" aria-hidden="true"></i> </button>
            </div>
        </div>

-, , , , , , ( ). , :

::-webkit-media-controls {
  display:none !important;
}

::-webkit-media-controls-enclosure {
  display:none !important;
}

. , CSS, - JavaScript ? CSS : https://pastebin.com/FzFjMUPH

+6
2

, ( jsfiddle ). , , .

, , , .

(var cursorCaught, onSeeking;, ​​ function vidSeek()) (function catchCursor() mousedown function freeCursor() mouseup) seekslider . , function seekTimeUpdate() : if (!cursorCaught || onSeeking) { ... }.

jsfiddle: https://jsfiddle.net/1y86r593/2/

, - , .

+4

- !

:

seekbar.addEventListener( "change", vidSeek, false);

:

seekbar.addEventListener( "input", vidSeek, false);

, ! !

EDIT: , !

( ), :

1) var javascript

var userIsUpdatingTime = false;

2) var ,

   seekbar.addEventListener("input",
    function () {
        userIsUpdatingTime = true;
    }
    ,false);

3) seekTimeUpdate var

    function seekTimeUpdate(){
        if (userIsUpdatingTime)
            return;

        var nt = vid.currentTime * (100 / vid.duration);
        seekbar.value = nt;

        // update time text
        updateTime();
    }

4) , var!

    function vidSeek(){
        var seekto = vid.duration * (seekbar.value / 100);
        vid.currentTime = seekto;
        userIsUpdatingTime = false;
    }

5) , !

: https://pastebin.com/rF7F7k23

-1

More articles:


All Articles