I'm currently 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; } });
HTML5 features include native audio and video support without the need for Flash. The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.
HTML5 Video Format for Desktop and Mobile Streaming The HTML5 video format capabilities include three options to play: MP4, WebM, and Ogg. You should note that the Safari browser does not support Ogg, WebM is supported by only 58% of browsers, and MP4 is disabled by default in Firefox 24.
HTML Audio - How It WorksThe controls attribute adds audio controls, like play, pause, and volume. The <source> element allows you to specify alternative audio files which the browser may choose from.
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With