Il problema è dovuto al fatto che iPhone e dispositivi Apple in generale hanno una politica stringente di risparmio energetico (visto chissà cosa combinano già in background), pertanto ignorano beatamente il tuo “autoplay” sul tag video HTML5.
Come aggirare il problema?
Bisogna “agganciarsi” ad un’azione dell’utente per far partire il video, altrimenti non c’è trippa per felini.
Come si fa? Via Javascript ovviamente, ecco uno snippet:
jQuery(document).ready(function(){
// definisco l'attributo playing per capire se il video sta già andando o no
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
});
// alle azioni quali click, touchstart e scroll faccio partire il video se non sta girando
jQuery('body').on('click touchstart scroll', function () {
document.querySelectorAll('video').foreach( function(videoElement){
if (videoElement.playing) {
// video is already playing so do nothing
}
else {
// video is not playing
// so play video now
videoElement.play();
}
});
});
});
Diciamoci un poco di cose:
- La genialata di definire un attributo “playing” non è mia, ma di tale Shakti Singh Cheema
- Questo snippet fa partire tutti i video della pagina
- Ho mischiato javascript puro e jquery, ma tutto si può scrivere in entrambi i modi
Sentiti libero di fare del codice quello che vuoi e di segnalare eventuali problemi nei commenti.
Spero di essere stato utile.