Clever Geek Handbook

How to get the hover time value on an input range

my question may have been a little vague, so I explained it in detail. im trying to create a simple video player on the page. im using the input range to display the file duration and current time just like any standard player. here is my script.

<script>
        var vid, playbtn, seekslider, curtimeText, durtimeText, mutebtn, volumeslider, fullscreenbtn;
        function initializePlayer() {

            //creating global object
            vid = document.getElementById('my_video');
            playbtn = document.getElementById('playpausebtn');
            seekslider = document.getElementById('seekslider');
            curtimeText = document.getElementById('curtimeText');
            durtimeText = document.getElementById('durtimeText');
            mutebtn = document.getElementById('mutebtn');
            volumeslider = document.getElementById('volumeslider');
            fullscreenbtn = document.getElementById('fullscreenbtn');

            //creating event for objects
            playbtn.addEventListener("click", playPause, false);
            seekslider.addEventListener("change", vidSeek, false);
            vid.addEventListener("timeupdate", seektimeupdate, false);
            mutebtn.addEventListener("click", vidmute, false);
            volumeslider.addEventListener("change", setvolume, false);
            fullscreenbtn.addEventListener("click", toggleFullScreen, false);
        }

        window.onload = initializePlayer;

        function playPause() {
            if (vid.paused) {
                vid.play();
                playbtn.innerHTML = "Pause";
            } else {
                vid.pause();
                playbtn.innerHTML = "Play";
            }

        }
        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.innerHTML = "Mute";
            } else {
                vid.muted = true;
                mutebtn.innerHTML = "Unmute";
            }
        }
        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>

and my HTML code:

<div id="Video_player_box">
    <video id="my_video">
        <source src="Videos/cowhand.mp4" type="video/mp4">
        <!-- Your browser does not support HTML5 video.-->
    </video>
    <div id="Video_controls_bar">
        <button id="playpausebtn">Play</button>             
        <span id="curtimeText"></span>
        <input id="seekslider" type="range" min="0" max="100" value="0" step="0.1"> 
        <span id="durtimeText"></span>
        <button id="mutebtn">Mute</button>
        <input id="volumeslider" type="range" min="0" max="100" value="50" step="1">
        <button id="fullscreenbtn">[&nbsp;&nbsp;]</button>
    </div> 
</div>

now what i want to do is show the time at which the user points to the seekslider on a little tooltip. for example, if the video is 10 minutes long and the user is in the middle of the range (seekslider), I want a little hint to show that the user is pointing at 5:01, but I really don't know how to encode that! I would appreciate any help on how to implement this feature.

+3


source to share


4 answers


Building on Jesse's answer , as well as on this page and some of my own experiments, I took it one step further and figured out the code to get a hint to follow the mouse.

I created a Codepen for your Ali code and added a function to handle the tooltip. You can check out the full code there, but here's what I added to your original code:

In HTML, I've wrapped your container seekslider

in a container and added a popup for the tooltip:

<div id="seek-container">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="0.1" /><span id="seek-tooltip"></span>
</div>

Then with CSS , I:

  • Make sure to seek-container

    stay inline as usual with the slider.
  • Set the position to seek-tooltip

    be absolute or relative to the document (you'll see why it's a little bit), set it to invisible and give it a nice shadow just for kicks.
  • Made seek-tooltip

    visible with a white background when seek-container

    hovered.

This was the code that should have done it all:

#seek-container {
    display: inline;
}

#seek-tooltip {
    position: absolute;
    display: none;
    box-shadow: 5px 5px 8px #CCC;
}

#seek-container:hover #seek-tooltip {
    display: inline;
    background: #fff;
}


Finally, good stuff: JavaScript . Now, even though you tagged this jQuery question, I noticed that your source code does not contain any, so I decided to follow your example and not use jQuery in this answer. This is of course possible (maybe a little easier), but I wanted it to be as consistent as possible with what you already had.

Anyway, here's what I did:

  • Added another variable to the top of the list: tooltip

  • The item is stored seek-tooltip

    in this variabletooltip

  • Added an event listener mousemove

    to yours seekslider

    that called the functionsliderTooltip

  • Wrote a function sliderTooltip

    that calculated the current freeze (thanks Jesse), set the content of the tooltip to the time, set the top position of the tooltip to the slider position, and set the left position of the tooltip to that of the mouse. This is why the tooltip position is set to absolute: I use the offsetTop

    slider property to specify the desired y coordinate and the property pageX

    to capture the mouse x coordinate, both of which are relative to the document; which makes the tooltip absolutely guarantee that the tooltip and the mouse are using the same coordinates.

Here's the code:

var tooltip; //This would be at the beginning with your other definitions

//--The stuff below would be inside your window.onload function--

//Populate your tooltip variable
tooltip = document.getElementById("seek-tooltip");
 //Bind the tooltip update function to the slider mousemove event
seekslider.addEventListener("mousemove", sliderTooltip, false);

//--Done with the stuff in your window.onload--

function sliderTooltip(e) { 
    //The parameter e is the mousemove event that was fired
    //First, calculate the current hovered time (thanks Jesse)
    var hoverTime = ((e.clientX - e.target.offsetLeft) / e.target.clientWidth * parseFloat(e.target.getAttribute('max'))).toFixed(2);
    var hoverMins = Math.floor(hoverTime / 60);
    var hoverSecs = Math.floor(hoverTime - hoverMins * 60);

    //Now that we've got the time, simply populate the tooltip!
    tooltip.innerHTML = hoverMins + ":" + hoverSecs;
    //Set the "top" CSS to the top position of the slider
    tooltip.style.top = seekslider.offsetTop + "px";
    //Set the "left" CSS to our mouse position, plus 10 pixels
    //to offset it a bit to allow the user to click on the slider and not on the tooltip
    tooltip.style.left = (e.pageX + 10) + "px";

}}

If you're wondering what the jQuery version would look like, it will be close to exactly the same, except for how the tooltip is selected and its event listener added.

+3


source


Here's a simple function that should help you. It uses the event data to get all the numbers it needs and returns a value based on the slider attribute max

.



function calcSliderPos(e) {
  return ( e.clientX - e.target.offsetLeft ) / e.target.clientWidth * parseFloat(e.target.getAttribute('max'));
}

//attach to slider and fire on mousemove
document.getElementById('seekslider').addEventListener('mousemove', function(e) {
  //inject the value into the durtime span
  document.getElementById('durtimeText').innerHTML = calcSliderPos(e).toFixed(2);
});
      

        
        
        
      

    
<input id="seekslider" type="range" min="0" max="100" value="0" step="0.1"> 
<span id="durtimeText"></span>
Run code


Note that this only gives an approximate position. I believe the only way to get 100% accurate position is to select a position on the slider and get that value.

+2


source


I tried jming's answer , but a completely wrong value was given for me. After changing as shown below, my problem was resolved.

var hoverTime = (e.offsetX / e.target.clientWidth) * parseInt(e.target.getAttribute('max'),10);

This provides a more accurate timing inside the slider.

Thanks to jming for his great work.

+1


source


Hi I was working on this prompt of the current Time project and I got a script that I made myself, which actually works just amazing, is a mixture of every code I have seen for this project

 var video = $('video')[0];
 $('input').mousemove(function(e){
        var progress = $("input");
        var maxduration = video.duration;
        var position = e.pageX - progress.offset().left;
        var tooltip = $("span")[0];
        var percentage = 100 * position / progress.width();
        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }
        var min = Math.floor((percentage / 100 * video.duration) / 60);
        var sec = Math.floor((percentage / 100 * video.duration) - min * 60); 
        if(min < 10){
            min = "0" + min;
        }
        if(sec < 10){
            sec = "0" + sec;
        }
        $("span").html(min + ":" + sec); 
  //You can use this code below to align your tooltip when you have completed styling it
  /*tooltip.style.top = -progress[0].offsetTop+(-10) + "px";
         console.log(progress.offset().top);
         tooltip.style.marginLeft = (e.pageX - 25) + "px";
  //Note: You may have to edit this code according to your styling
*/
});
//Just for testing
var timeDrag = false;
$('input').on('mousedown', function(e) {
        timeDrag = true;
        video.pause();
        updatebar(e.pageX);
 });
   var updatebar = function(x) {
        var progress = $('input');

        //calculate drag position
        //and update video currenttime
        //as well as progress bar
        var maxduration = video.duration;
        var position = x - progress.offset().left;
        var percentage = 100 * position / progress.width();
        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }
        video.currentTime = maxduration * percentage / 100;
    };
 
      

        
        
        
      

    
input{
  width:400px; /*Just for demonstration that this code does not depend on width of the slider*/
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<video src="https://givemesomething.000webhostapp.com/video.mp4" height="280" width="100%" controls></video> 
<input type="range" min="0" max="100" value="0">
<span></span>
Run code


That all this will work will undoubtedly work thanks to

+1


source






More articles:


All Articles