HTML5 Video Volume

I'm cur开发者_如何学编程rently working on an HTML5 video player, I have it working fully everywhere, except on the iPad. Basically, I can control everything, except the sound, I have a mute button, it works fine on Google Chrome, Firefox 3.6 and Safari on Mac OS, but on the iPad no matter what value I put in video.volume, there is no change happening.

Did anybody get it working properly?

Here's my HTML code:

<video src="video_url" width="608" height="476" autobuffer="autobuffer" id="html5-player" preload>
   Your browser doesn't support HTML5.
</video

And here's the Javascript:

var muted = false;
$j('.player-mute').click(function(){
    if(muted) {
        videoPlayer.volume = 1;
        muted = false;
    } else {
        videoPlayer.volume = 0;
        muted = true;
    }
});

The volume property on the iOS devices is read-only according to Apple's documentation:

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

If you read the iPad html5 video documentation it says that only the user of the device can start video, and change volume.

As @dobrin said, the volume property is read only on IOS for the video.

However, you could use the muted property, this allow you to mute or unmute video, most of the time, this will respond to the problem.

So, you can't set a specific volume between 0 and 1 but you can set the volume either to 0 or 1, then Apple assume that you will use the physical buttons for setting the volume.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted

var muted = false;
$j('.player-mute').click(function(){
if(muted) {
    videoPlayer.volume(1);
    muted = false;
} else {
    videoPlayer.volume(0);
    muted = true;
}
});

use like function