5568 sujets

Sémantique web et HTML

[Résolu] Vidéo HTML5 et iPad

Bonjour,j'ai un problème avec une vidéo en HTML5, vous pouvez voir sur ce site.
Tout fonctionne très bien avec les ordinateurs, cependant la vidéo ne fonctionne pas sur iOs (je test avec iPad et iPod Touch) et je n'arrive pas à comprendre pourquoi.
J'ai un encodage en H.264, j'ai le bon MimeType, j'ai ajouter Addtype dans mon .htaccess.

Voici mon code utilisé

<video autoplay poster="video/index.files/cirque.jpg" width="1600" height="780" >
        <source src="cirque.mp4" type="video/mp4" />
        <source src="video/index.files/cirque.webm" type="video/webm" />
        <source src="video/index.files/cirque.ogv" type="video/ogg" />
            <object type="application/x-shockwave-flash" data="video/index.files/flashfox.swf" width="1600" height="780" style="position:relative;z-index:10;">
                <param name="movie" value="video/index.files/flashfox.swf" />
                <param name="wmode" value="opaque">
                <param name="allowFullScreen" value="true" />
                <param name="flashVars" value="autoplay=true&amp;controls=false&amp;loop=false&amp;src=cirque.mp4" />
                 <embed src="video/index.files/flashfox.swf" width="1600" height="780" style="position:relative;z-index:10;"  flashVars="autoplay=true&amp;controls=true&amp;loop=true&amp;poster=video/index.files/cirque.png&amp;src=video/cirque.mp4"	allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
                <img alt="sortie-finale003" src="video/index.files/cirque.png" style="position:absolute;left:0;z-index:10;" width="1600" height="780" title="Video playback is not supported by your browser" />
            </object>

        </video>


J'ai essayé d'épurer mon code en enlevant certaines partie (ex : flash), rien n'a changé.
La vidéo est assez grande (1600 x 784), mais j'ai essayé de la réduire et rien n'a changé.

Version de iOs sur iPod : 5.1.1
Version iOs sur iPad1 : 4.2.1

Mon client a rapporté le même problème sur iPad (aucune idée de la version).

Merci d'avance pour votre aide et vos conseils.
Modifié par Tiger356 (13 Aug 2012 - 20:55)
Ça fonctionne sur iPhone 4S (5.1.1) mais la vidéo ne fonctionne pas en arrière plan, faut toucher pour la lancer (mais là elle passe en plein écran). J'ai pas mon iPad avec moi, désolé.

Plusieurs choses:

1. Ton fichier est énormé (plus de 5 Mg), tu peux faire un fichier de résolution plus faible (640 px max de large) et l'afficher à la même taille, de toute façon cette vidéo artistique est floue, ça ne se verra même pas. Miro Media encoder est gratuit et dispose de presets pour le web.
2. Tu peux utiliser des media-queries sur les éléments sources, mais je ne connais pas l'implémentation dans les navigateurs.
3. Tu peux aussi utiliser l'attribut preload (mais là les utilisateurs en 3G vont te maudire).
4. Le son par défaut est une mauvaise idée (heureusement que je suis seul dans le bureau aujourd'hui).
5. Essaye avec un player de type video.js, il serait capable de gérer le preload et la lecture automatique.
6. Pour faire patienter ou en dernier recours, un gif animé c'est pas mal non plus si il n'est pas trop gros. Je ne sais pas si on peut les utiliser en «poster».

P.S. : ton viewport est mauvais, il faut utiliser des virgules comme séparateur par des points-virgules (Safari râle).
Modifié par Patidou (14 Aug 2012 - 13:55)
Merci pour tes conseils, mais je suis toujours bloqué.
- J'ai réduit la taille de mon fichier
- Pour le son, c'est client... je cherche juste a finir ce project
- Videojs ne change rien
- Le gif animé??? Smiley biggol Smiley eek Smiley bawling Smiley rolleyes Smiley whattha Smiley nimp

Ça fonctionne sur iPod Touch

Mais toujours rien sur iPad.

Pour l'autoplay sur iOs, videojs ne fonctionnait qu'avec la version 3 de iOs. Si mon client chiale, je vais lui dire d’appeler Apple parce que c'est hors de mon contrôle.
Je viens de voir que si j'accède directement au vidéo avec le iPad, ça fonctionne, donc je vais revoir mon code.
Mon problème n'est pas d'avoir un background plein écran, mais d'avoir une vidéo qui fonctionne sur iPad.
Je ne trouve toujours pas de solutions malgré mes nombreux tests...
Je viens de trouver, Apple = prochain Microsoft des normes W3C

Ce code fonctionne : 


<video src="ipad.mp4" controls width="1600" height="780"></video>


Maintenant comment je fais pour tout faire fonctionner? C'est à dire sur tous les autres navigateurs?

Je vois que je dois ordonner d'avoir les controls puisque autoplay n'est pas pris en charge, mais ça fait chier sur tout....
Si vous avez des idées, je suis preneur Smiley lol
La solution: une redirection pour ceux qui sont sur ipad avec le code à la Pomme!


<script type="text/javascript"> // <![CDATA[
	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://cirqueimaginarium.com/ipad.php";
	} // ]]>
</script>
Sujet clos
Aller à