fregante / iphone-inline-video

📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)
https://npm.im/iphone-inline-video
MIT License
2.05k stars 297 forks source link

Muting video #41

Closed arunshan closed 8 years ago

arunshan commented 8 years ago

Hi @bfred-it Setting muted=true does not work on the iPhone. Also unable to adjust volume on the video. Is this a limitation?

FYI, there is an audio track in the video.

fregante commented 8 years ago

It's a limitation of iOS in general, you cannot control the volume of <audio> nor <video>

It's probably possible to change the volume of an audio element through the Web Audio API but I was not able to successfully combine these two:

http://webaudioapi.com/samples/audio-tag/ http://webaudioapi.com/samples/volume/

If someone were able to do it, it would definitely be wrapped into a more generic audio-volume-polyfill that could be used anywhere.

So far my code was:


// create the audio context
var context = new (window.AudioContext || window.webkitAudioContext)();

// create the audio element
var audio = document.createElement( 'audio' );
audio.src = 'https://rawgit.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4';
audio.crossOrigin = 'anonymous'

// create the volume changer
var gainNode = context.createGain();
gainNode.gain.value = 0.1; // set the volume

// connect the audio element and the volume to the context
var audioSource = context.createMediaElementSource( audio );
audioSource.connect( context.destination );
gainNode.connect( context.destination );

// play the audio element on user interaction
document.body.ontouchstart = audio.play.bind( audio )