Vidéo QuickTime dans une page HTML

Vous cherchez une alternative à Flash pour proposer des vidéos intégrées dans votre site ?
Voici un petit guide pour celles et ceux qui souhaitent inclure des vidéos dans leurs pages HTML. Nous y verrons quels sont les formats à connaitre mais aussi comment utiliser les balises EMBED ou VIDEO (HTML 5).

Les caractéristiques suivantes fonctionnement avec la majorité des navigateurs web. Ce guide vous donne la démarche à suivre pour créer et inclure des vidéos dans les supports Apple iPhone, iPad ou iPod touch.
Formats standards supportés (par l’iPhone)
Vidéo H.264 Baseline Profile Level 3.0, jusqu’à 640 x 480 pixels à 30 fps.
Vidéo MPEG-4 Part 2 (Simple Profile).
Audio AAC-LC, jusqu’à 48 kHz.
Extensions de fichiers .mov, .mp4, .m4v, et .3gp.
Encodage des vidéos
A l’aide de QuickTime Pro,

  1. Ouvrez le fichier vidéo à convertir
  2. Choisissez Fichier > Exporter pour le web
  3. Cochez les trois formats
  4. Cliquez sur Exporter

Plusieurs fichiers sont créés, le plus important étant celui dit « de référence », un MOV très léger qui a pour but de rediriger le choix de la vidéo selon le profil de connexion.
Code HTML
Ajoutez le code HTML dans vos pages pour inclure le lien vers votre fichier de référence (créé avec QTPro précédemment).

<embed src="poster.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1" …> </embed>

La balise embed peut recevoir plusieurs paramètres dont la liste est publiée par Apple sur ce site.
Il est également possible d’utiliser la balise video HTML5.
<video poster="poster.jpg" src="movie.m4v" …> </video>

Quelques exemples :
Code embed

Code video


Sur un iPhone ou un iPod touch, la lecture se lance automatiquement le player iPhone intégré en pleine page. Sur un iPad, comme sur ordinateur, la lecture de la vidéo démarre directement dans la page avec une possibilité de passer en plein écran.
Lien vers HTML 5 Reference

Auteur: Benoit DELDICQUE

Actuellement en poste sur Strasbourg, je suis en charge de la conception et la réalisation d'applications iOS pour iPhone, iPad et iPod touch.

Articles similaires

8 commentaires

  1. Rebonjour Benoît,

    et donc… merci d’avoir validé mon post relatif à l’intégration Quicktime dans les pages HTML, spécialement sur iPhone, dans votre billet iPhone/iPod, et d’y répondre ici, directement par le biais d’un nouveau billet en bon et dûe forme, entièrement dédié donc aux vidéos Quicktime.

    Je note donc – corrigez-moi si je fais erreur s’il vous plaît – que la balise que j’ai écrite pour mon propre site et dont je vous ai donné la version dans le précédent billet, est bel et bien valide.

    Cela étant, je note des disparités : votre balise se contente en premier lieu d’implanter simplement le lien src vers l’affiche JPG cliquable, quand la mienne précise que l’autoplay = false et le controller = false aussi. Dans la même veine, vous faites simplement le lien href vers la vidéo; là où je précise à contrario du src que l’autoplay = true cette fois, tout comme le controller = true aussi. Ceci pour bien distinguer l’affiche statique inerte en JPG, de la vidéo m4v jouée ensuite.

    C’est d’ailleurs à ce niveau du format, et par là-même de son encodage, que je relève d’autres différences. Vous partez certes comme je le fais, de Quicktime Pro (dont on ne dira jamais assez la puissance et la simplicité pour un coût extrêmement modique pour ne pas dire ridicule) mais vous utilisez l’Exportation vers le Web de son menu. Et ainsi, générez au moins 3 fichiers je crois, pour un seule vidéo, sans parler du peu d’alternative de ce type de réglage. Mais c’est pire que ça me semble-t-il : je crois me souvenir que cela passe aussi par un contrôle javascript nécessitant des link rel dans le Head de la page vers le site d’Apple et ses fichier js… Donc, si Apple a un problème et/ou si l’internaute a désactivé le javascript de son Safari (mobile comme standard) : la vidéo n’aura aucune chance d’être lue…

    Or, et je parle ici pour le cas spécifique des vidéos IPHONE, et non pas pour un usage web traditionnel pour ordinateur (qui doit tenir compte des différentes plateformes d’internautes), je passe moi par le Menu « Exporter pour iPhone » qui génère un seul fichier et en m4v, soit 100% compatible iPhone et pour des poids de vidéos extrêmement raisonnable avec pour autant malgré la compression, une belle qualité de rendu. Et contrairement à nombre d’encodage de vidéos pour le web, ce système ne réduit pas la taille de la vidéo en même temps que sa qualité : le format physique de votre vidéo originale est conservé. Et ça, c’est un ajout majeur, car d’autres réglages réduisent la vidéo en un timbre-poste…

    Enfin, si certes on parle de plus en plus du HTML 5 et de ses nouvelles balises prometteuses, telle donc que celle dite simplement « vidéo », aussi efficace que déconcertante de facilité d’usage, je la déconseille pour le moment : bien trop de matériels sont à l’heure actuelle totalement incapables de la lire, et puisqu’on parle des iPhones, les mobiles en premier lieu… Je salive comme tout le monde et rêve du moment où le HTML 5 sera LE standard web mondial, et où tous les supports numériques seront en phase avec ce nouveau langage, mais je crains que ce moment-là ne soit pas encore venu. Il va falloir s’armer de patience…

    Pour autant, j’ai eu aussi de votre part, une des réponse que j’attendais : si certes mes JPG cliquables s’afficheront bien dans mes pages de site iPhone, en revanche, dès lors qu’ils seront cliqués, la vidéos se lira en plein écran de l’iPhone, directement dans son lecteur vidéo intégré, et non pas dans la page. Dommage. J’espère que Apple nous fera plus tard des iPhones capablent de lire des vidéos in situ, dans les pages HTML.

    Voilà, j’ai fait le tour de ce qui m’est venu à l’esprit le plus concrètement possible, suite à le lecture de votre billet. Merci de réagir positivement ou négativement afin de confirmer ou d’infirmer mes propos.

    Bien cordialement,
    Neum

  2. Neum,

    Pour répondre, il existe différents paramètres qui peuvent être ajoutés ou non dans la balise embed. Ces paramètres peuvent être inscrits dans n’importe quel ordre. La démarche décrite dans ce billet est celle préconisée par Apple mais il existe bien des paramètres plus élargis car la balise embed est utilisée pour d’autres plugins (Flash par exemple).
    C’est à cause de cela que le paramètre src peut être reconnu dnas votre cas.

    En ce qui concerne le HTML 5, le débat est tout juste lancé et comme vous le précisez, la balise video est encore trop peu prise en compte et « officielle » pour une utilisation systématique.

    Ravi de cet échange avec vous.
    Vous pouvez suivre les différents billets en vous abonnant au fil RSS de ce blog ou en suivant @bddq sur Twitter.

    A bientôt !

  3. Rebonjour Benoît,

    sincèrement, ravi moi aussi de ces échanges, constructifs et informatifs, et en outre, dans un bel esprit cordial. Bref, merci, c’est un plaisir.

    Cela étant, et tout aussi sincèrement, je comptais « en rester là sur le sujet » quand j’ai voulu tester moi aussi « Exporter pour le Web » du Menu Quicktime Pro, à la place de « Exporter pour l’iPhone » que j’ai utilisé. Histoire de « voir » comme on dit.

    Et là… beaucoup d’incohérences… entre ce billet-ci dans cette page, votre démonstration donc, dès lors qu’on scrupte votre code source, et le code généré automatiquement par Quicktime Pro suite à l’Export pour le Web….

    En effet, lorsqu’on exporte sa vidéo en « .mov » « pour le Web », 4 fichiers au minimum sont extraits :
    – Un « .mov » scripté vide, dit de « Référence » qui va servir de redirection vers sa vidéo compressée
    – Le m4v compressé, soit donc la vidéo web que l’on veut afficher dans sa page html.
    – Le JPG de l’image qu’on a choisi comme « Affiche » de la vidéo (via le menu « Présentation »)
    – un fichier text « Read me » qui donne littéralement TOUS LES CODES à insérer dans sa page.

    Or, ce code est composé de 2 parties :

    – La 1ère : 3 LINK REL vers 3 adresses web vers le site d’Apple pour lier sa page html à 2 fichiers Javascript + 1 lien vers un CSS externe (pour formater le lien cliquable de la vidéo) toujours vers le site d’Apple. Les 3 liens sont à mettre dans le HEAD de sa page HTML.
    (Il reste cependant que si l’on veut, on peut directement aller aux adresses des JS chez Apple, pour « Enregistrer sous » les fichiers, les insérer dans sa propre arborescence de site et actualiser les link rel de son head pour cibler vers son dossier de rangement des fichiers JS dans son propre site).
    – La 2ème partie : tout un assortiment de de Javascript, à mettre dans le BODY de sa page HTML pour créer la balise Quicktime et implanter tous les liens vers l’affiche JPG cliquable et vers les vidéos « .mov » et « m4v ».

    Au final, normalement, lorsqu’on construit sa page vidéo de la sorte, on peut voir sa vidéo s’afficher dans sa page HTML via son JPG cliquable sur lequel les javascripts de Apple et son CSS ont implanté par dessus un bouton « LIRE » sur fond arrondis façon bouton en applat noir. Il Faut alors cliquer dessus pour lancer la vidéo.

    Bref : un long cheminement pour parvenir à ses fins. J’ai alors testé cet ensemble : or ce type de balise est normalement fait pour fonctionner sur ordi comme sur mobile. MAIS CE N’EST PAS LE CAS. Le bouton CSS « lire » ne s’affiche pas sur ordi, et dès que la vidéo est lancée et jouée, il faut doubler cliquer dessus pour la rejouer à nouveau sans qu’aucun visuel cliquable vous le signale. Quand cela fonctionne en outre… Or j’ai la dernière version de Safari sur MacBook Pro Intel….

    Aussi me suis-je alors intéressé à votre code source : et là surprise : il semblerait que vous utilisiez la méthode « Export pour le Web » uniquement pour récupérer le « .mov » vide scripté pour la redirection vers le m4v compressé, car je ne vois nulle part dans votre code le moindre lien externe vers les JS de Apple, ni même vers son CSS externe… Pas plus que je ne vois l’ensemble du code javascript de la balise Quicktime, généré par donc par l’Export Web de Quicktime Pro… Vous remplacez visiblement carrément tout le code par la minimaliste balise embed iPhone…

    Du coup, lorsque je teste les 2 vidéos de votre billet ici-même, sur ordi, pas de bouton cliquable, et on retombe dans l’obligation de comprendre tout seul qu’il faut doubler-cliquer sur la vidéo pour la rejouer. PIRE : le controller n’apparaît pas une fois le film lancé… Quant à la balise vidéo HTML 5, c’est encore plus cornélien que cela : un coup elle s’affiche (mais avec les mêmes incohérences que la première), soit elle affiche un plug-in manquant…. Comprenne qui pourra…

    Vous comprendrez donc, au regard de toute ces analyses bien concrètes et testées, que j’ai repris « la plume » pour relancer votre sujet sur la Balise Quicktime… Du coup, je garde pour le moment, jusqu’à ce que mon site soit en ligne et que je puisse le tester, ma balise quicktime telle que je l’ai générée (voir le billet ipod/iphone), via le Menu « Exporter pour iPhone » de Quicktime Pro et une balise Embed détaillée via Pageot (Le FreeWare pour balise Quicktime).
    Je garde d’autant plus cette méthode que simulant le USER AGENT de l’iPhone sur Safari mac (via le Menu « Développement » de Safari), ma balise et les vidéos fonctionnent correctement, là où les vôtres bugguent…

    Cette fois, vous savez tout… Si vous avez des compléments, des explications ou des solutions à apporter, ou des commentaires tout simplement, ils sont plus que jamais… les bienvenus !!

    Bien cordialement à vous,
    Neum

  4. Benoît,

    Au lieu de vous abreuver de nouvelles remarques et de nouvelles hypothèses, j’ai re-contacté des développeurs purement Mac, experts en Quicktime, que j’ai eu déjà l’occasion de croiser ces dernières années pour différents travaux (ça remonte même au Mac PPC avant os x !).

    J’ai donc à présent la bonne balise Quicktime aussi bien pour iPhone que pour Ordi. Simple, efficace, sans bug et qui évite la manipulation de votre export avec javascript, etc… Elle est 100% garantie.

    La voici : (j’ai enlevé la syntaxe HTML pour que votre champ de saisie l’affiche. Il faut donc rajouter les flèches ouvrantes et fermantes de la balise Embed ainsi que les guillemets  »  » des mentions après les signes « égal » :

    -> DÉBUT embed
    src = dossiervideos/monaffiche.jpg
    width = 400 height = 300
    scale = tofit
    volume= 75
    href= mavideo.m4v
    target = myself
    kioskmode = true
    type = video/x-m4v
    -> FIN (slash) embed

    Voilà.

    Une précision : ici, l’affiche JPG cliquable et la Vidéo m4v SONT DANS LE MÊME DOSSIER de rangement dans l’arborescence du site. C’est à dire : dossiervideos. DONC, on marque le chemin relatif à ce dossier dans le SRC.
    Du coup, comme la vidéo est elle aussi dedans, on marque là aussi le chemin vers la vidéo en relatif dans le HREF. On ne marque donc que le nom de la vidéo, directement. Le HREF prend comme URL de référence le chemin du SRC et non celui de la page web.
    Aussi, si votre vidéo est dans un AUTRE DOSSIER que celui de votre affiche cliquable, vous devez alors CETTE FOIS MARQUER LE HREF en ABSOLU. : http etc… /monautredossier/mavideo.m4v

    Si le scale, c’est à dire la taille width et height de la vidéo supporte plusieurs modes dont celui numérique (par exemple : scale = « 1 »), préférez-lui la mention « tofit » : elle contraint le plug in Quicktime sur la machine de l’internaute à afficher la vidéo aux strictes dimensions données dans le width et le height de la balise. Vous êtes sûr et certain ainsi qu’elle ne sera jamais déformée.

    De plus : ici, la vidéo fait 400 pixels de large sur 300 pixels de haut. MAIS, le contrôleur qui va s’afficher en dessous fait quant à lui 16 pixels de haut. VOTRE JPG CLIQUABLE doit donc faire 400 pixels de large sur 316 pixels de haut.
    Ainsi, on ne verra aucun contrôleur sur le JPG et la vidéo ne se lancera pas, puisque par défaut, quicktime met l’auto-play à FALSE, c’est à dire à « faux ». Ce n’est donc qu’une fois que l’internaute aura cliqué sur le JPG, que le contrôleur apparaîtra et que votre quicktime se jouera.

    Target = « myself » est lui aussi vital : ça force la vidéo à se jouer à l’emplacement exact de votre affiche JPG cliiquable.

    Quant au kiosquemode = « true », il interdit « l’enregistrement sous » de votre vidéo. Si False ou absent, n’importe qui pourra enregistrer votre vidéo sur son disque dur. Ca n’a pas d’intérêt pour l’iPhone peut-on penser. En effet. A ceci prêt que si vous êtes sur Safari Mac, sur ordi donc, vous pouvez simuler le USER AGENT iphone. C’est à dire faire passer votre Safari Ordi pour un mobile iPhone. Et du coup, si le kiosquemode n’est pas activé, enregistrer sur votre mac la vidéo…

    Le type MIME : optez pour m4v (video/x-m4v) pour une vidéo iPhone, pour être sûr et certain de la compatibilité à 100% de votre film pour iPhone. Tant du point de vue vidéo que de celui audio.

    C’est d’ailleurs le dernier point de cette solution : pour votre formatage de vidéo pour iPhone, optez pour :
    1) : Quicktime Pro (il suffit de payer 20$ me semble-t-il pour compléter le Quicktime Player par défaut des fonctionnalités avancées de Quicktime. Ultra simple, très puissant et super stable en plus d’être ultra léger).
    2) Ceci fait : ouvrez votre vidéo originale en « .mov » de préférence. Allez dans le « Menu Fenêtre », choisissez « Propriété de Séquence », et dans la fenêtre ouverte, sélectionnez la ligne « Piste vidéo » puis l’onglet « Réglages Visuels » : vous accédez aux paramètres de dimensions de votre vidéo. C’est ici que vous pouvez modifier la taille width et height de votre film. Mettez donc les dimensions que vous voulez obtenir pour votre exportation à venir. Les paramètres sont chainés : si vous modifiez le width, Quicktime assure l’homothétie du format et modifie en fonction le height, et inversement si vous commencez à modifier d’abord le height.
    ATTENTION : pas plus de 640 pixels de large pour l’iPhone. Optez de toutes façons pour plus petit : ce sera moins lourd…. Puis fermer la fenêtre de paramètres.
    3) Une fois votre vidéo redimensionnée, choisissez « Menu Fichier » -> « Exporter » :
    Dans la fenêtre ouverte, dans le menu déroulant inférieur, choisissez : « Exporter pour iPhone ». Dans le champ de saisie supérieur de la fenêtre, donnez un titre à votre vidéo dont l’extension est devenue « .m4v »
    Vous n’avez pas la possibilité d’agir sur les options de l’export : quicktime fait tout par défaut seul. C’est ainsi que vous pouvez être sûr et certain à 100% de l’export et de sa compatibilité avec l’iPhone. Voilà pourquoi il faut d’abord soi-même changer les dimensions de sa vidéo originale si elle est trop grande : l’export m4v se fait à l’échelle 1 sur 1…
    Cliquez sur « Enregistrer » et laisser Quicktime calculer votre ré-encodage. Au bout de quelques instants, votre vidéo.m4v est prête.

    Voilà, c’est fini.

    J’ai testé une dizaine de vidéos : vrais films, animation, avec et sans audio, et de tailles différentes : de 320×240 pour les plus petites vidéos, jusqu’à 400×300 pour les grandes : le m4v fait chuter vertigineusement le poids des vidéos MAIS il permet de conserver une vraiment bonne définition d’image dans les vidéos. On serait presque tenté de dire qu’on a le beurre et l’argent du beurre. Je ne saurais donc que trop vous conseiller d’observer scrupuleusement tout le mode opératoire que je viens de donner…

    Mais maintenant, chacun est libre : faites comme il vous plaira. Mais on vous aura prévenu…

    Bien sincèrement,
    Neum

  5. Bonjour Benoit,
    Je suis toujours très friand de vos démonstrations et de vos tutos… On en ressort toujours entièrement informé. Je fait actuellement mes armes sur des appliWeb pour des sociétés partenaires (je suis infographiste) et mise à part la joute de plume que vous avez eu avec Neum (qui ne me regarde pas), je voulais vous demander comment concrètement on peut faire pour que la vidéo .mov se déclenche automatiquement en ouvrant mon site. Le site doit être développé sur iPad principalement. Vous avez donné au début un code pour insérer un .mov mais ensuite, j’ai un peu décroché pour insérer le code dans une page iWeb. Oui, je fais mes sites (pour l’instant) sur iWeb… ! Merci pour votre réponse. Pétrus

  6. Bonjour Pétrus !
    Il n’est malheureusement pas possible de lancer automatiquement une vidéo sur iPad depuis une page HTML.
    La seule solution pour lancer une vidéo est de cliquer sur un lien pointant vers le fichier MP4.

    Si vous connaissez un peu PHP, utilisez un header location pour exécuter une redirection vers la vidéo.
    Idem avec HTML et la balise meta refresh redirigeant vers votre vidéo.

    Bon code !

  7. Bonjour Benoît,

    Je cherchais comment intégrer un lecteur pour mettre à disposition mes vidéos au format .mov .m4v ou encore mp4. J’ai trouvé votre site web sur lequel j’ai récupéré le code source pour intégrer des vidéos sur mon site web et plus précisément sur cette page http://www.karimbouain.eu/a_j_auxerreIII_racing(J9_C_F_A_2_2011_2012).html

    Je suis sous environnement mac et cela fonctionne très bien mais quand je tente de le lire sur mon iPod Touch, la vidéo n’est pas lisible alors que la votre http://www.benoit-deldicque.com/blog/video-quicktime-dans-une-page-html/ fonctionne fonctionne très bien quand je la lis sur mon iPod.

    Cordialement,
    Karim.

  8. Bonjour,
    la vidéo se lit très bien sur mes appareils. Il faut cependant attendre un court instant avant qu’elle ne soit reconnue en « vidéo ».

    Cordialement, Benoit