Problems creating custom volume controls for HTML5 video

Question

I have a rather complicated project at work that requires a custom volume slider to control an HTML5 video element. I pushed the volume control down to a very simple example, and I see no reason why it should not work. I would like to know about 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 seems to work, except for an audible change in the volume of the video clip. Even the result of console.log returns the correct value (from 0 to 1.00). I also tried a strictly Javascript version of this, i.e. videoElement.volume = newvolume

If this is important, I am testing Safari 5.1.2.

Answer 1

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

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

If memory is used, volume not a video attribute in HTML5, it is available only through the DOM element itself.