Question

I have a fairly complex project in the works that requires a custom volume slider to control an HTML5 video element. I’ve boiled the volume control down to a very simple example and I see no reason why it should not be working. I would love any insight regarding the following code:

jQuery:

<script>
$(function() {
    $('#volume').change(function () {
        newvolume = $('#volume').attr("value") / 100;
        $('#video').attr("volume", newvolume);
        console.log($('#video').attr("volume"));
    });
});
</script>

HTML:

<video id="video" controls="controls">
    <source src="http://dev.domain.com/media/16514.m4v">
</video>

<input id="volume" type="range" min="0" max="100" value="100" />

It should be noted that every aspect of this appears to work except an audible change in volume on the video clip. Even the console.log result is returning the correct value (0 through 1.00) I have also tried the strictly Javascript version of this, i.e. videoElement.volume = newvolume

If it’s significant, I am testing in Safari 5.1.2.

Answer 1

Instead of $('#video').attr("volume", newvolume);, try this:

$('#video')[0].volume = newvolume;

If memory serves, volume is not an attribute of video in HTML5, it is only accesible via the DOM element itself.