Je construis un simple concept de concept pour un site Web spécifique à l'iPad qui utiliserait des transitions vidéo pour apporter des utilisateurs de la section à la section. Aux fins de la preuve de concept, chaque "section" n'est qu'une image avec une zone de texte de contenu semitransparent positionnée au-dessus de celle-ci. Il n'y a que 2 sections, "home" et "contact", et ils ont une vidéo de transition en sandwich entre elles via Z-indexation. L'idée de la preuve de concept est que cliquer sur la section "Accueil" la fait disparaître, suivie de la lecture de la vidéo de transition, qui (à la fin) disparaît pour révéler la section "Contact". Tout fonctionne bien avec cette version de la démo sur l'iPad et sur Safari pour Windows et OS X. Voici le JS:
<div id="main-container">
<div id="home-copy">
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<p>Donec blandit pharetra luctus. Nam at porttitor odio. Nullam sem orci, venenatis sed pharetra eget, commodo rhoncus quam. Ut euismod vehicula bibendum. Curabitur in magna ante, id fringilla lacus. Nullam id elit eget lacus feugiat porta. Nulla vitae orci vehicula risus sagittis egestas quis sed justo.</p>
</div>
<div id="home">
<img src="images/home.jpg" width="1152" height="720" />
</div>
<video id="transition" src="video/home_to_contact_lo_res.mp4" preload width="1152" height="720"></video>
<div id="contact">
<img src="images/contact.jpg" width="1152" height="720" />
</div>
</div>
5 Réponses :
Je ne connais pas la réponse exacte à votre question, mais avez-vous essayé JQTouch?
Je vais vérifier s'il y a un coup de feu d'événement Onerror, exemple de code ici -
http://www.w3.org/tr/html5/video.htmlled/a >
Et lisez également sur les codecs vidéo ici pour voir si plus d'informations doivent être incluses -
http://diveintohtml5.ep.io/video.html
(Vérifiez également que le bogue IPAD mentionné ne concerne pas votre problème)
Sur une note de côté: Découvrez également du lien ci-dessus ( DiveintoHTML5.org/Video.html ) Comment Ce gars a codé la vidéo dans trois formats + flash (!) Pour vous assurer qu'il fonctionne pour n'importe quel navigateur ou appareil.
L'URL Diveinto a changé en Diveintohtml5.ep.io
La réponse d'AMPT sur Insertion de la vidéo HTML5 à l'aide de JavaScript pour iPad travaillé pour moi. Il semble qu'il y ait un bug avec des vidéos mobiles Safari + ajouté de manière dynamique via JS.
$(document).ready(function() {
Je ne sais pas si vous avez eu ce travail, mais j'ai lu quelque part que l'iPad n'entraînera pas automatiquement aucun clips vidéo, en raison de l'appelle qui ne voulait pas que les gens devaient payer pour regarder des vidéos, ils ne veulent pas vraiment regarder (sur les données plans).