Search code examples
jqueryhtmlvideojquery-ui-slider

How do I create a volume slider for an HTML5 video using Jquery and Hype

I'm a complete beginner when it comes to Jquery, Javascript etc but I've managed to get a Jquery slider widget working in my page. Now I want to have that slider control the volume of a video which will be embedded as part of an animation in Tumult Hype. I know that Hype gives the video an 'element ID' that I can call from outside of Hype but I just need to know what code I should add to the Jquery Slider function to enable volume control of this video. Please Help!

Solution

  • I use this:

    $('#volSlider').slider({
        orientation: "vertical",
        value: vid1.volume,
        min: 0,
        max: 1,
        range: 'min',
        animate: true,
        step: .1,
        slide: function(e, ui) { 
            vid1.volume = ui.value;
            if(ui.value > 0) vid1.muted = false;
        }
});

    It assumes the ID of the video element is vid1.