La balise <video> chez Dailymotion
Par Laurentj le jeudi, mai 28 2009, 12:13 - Technologies Web - Lien permanent
L'adoption du format Ogg Theora fait son chemin : DailyMotion viennent d'annoncer sur leur blog (et via un communiqué de presse) qu'ils vont prendre en charge la balise <video> de HTML5, en particulier avec Firefox 3.5 qui sortira dans quelques jours en RC.
Ils ont ouvert un site en test diffusant les vidéos au format Ogg Theora, openvideo.dailymotion.com à visiter avec Firefox 3.5. Ils ont également fait une page de démonstration montrant les possibilités de l'utilisation de la balise <video>, conjointement avec les autres technologies web comme javascript, css, svg etc...
Qu'un site majeur dans la diffusion de vidéos sur Internet utilise ces technologies, promet un bel avenir à Theora. Bien que les encodeurs actuels pour Theora soient de moins bonne qualité que pour le H264 par exemple, un travail est en cours (sponsorisé notamment par Mozilla), pour les améliorer, tant au niveau de la qualité de l'image, que la taille des fichiers. Voir par exemple une de ces améliorations faite au début du mois.
Pour rappel, Ogg Theora est un format libre et ouvert pour stocker de la vidéo. Pour en savoir plus sur la balise <video>, vous pouvez lire un de mes billets précédents sur le sujet.
Go Theora ! Go !
Commentaires
C'est sympa mais c'est dommage qu'ils ont mis un sniffer pour rendre cette page Firefox-3.5-only. Safari gère aussi la balise <video>, il suffit sur Mac d'ajouter le codec OGG pour quicktime.
Et j'espère aussi que les navigateurs offriront une option plein écran pour les vidéos. :-)
@ombre: "il suffit sur Mac", seulement pour ceux qui connaissent. L'utilisateur normal n'en a rien à battre des problèmes de codec, et il ne veut pas en entendre parler, et il a bien raison.
Safari n'a qu'à embarquer Theora par défaut, il est tout à fait libre de le faire.. Mais pour une histoire purement politique/marketing, il ne le fera pas.
Tout à fait d'accord avec toi Laurentj.
Ça n'empêche que Dailymotion ne devrait pas faire du browser sniffing mais plutôt regarder les fonctionnalités du navigateur. Je trouve ça toujours dommage de ne pas utiliser les technos de fallback pour démontrer les nouvelles fonctionnalités. Ça permettrait justement de montrer qu'on peut fournir la meilleure expérience aux gens qui ont un navigateur adapté tout en laissant l'accès à tous.
Laurent,
Je suis tout à fait d'accord avec toi sur le point de vue de l'utilisateur et sur le fait que Safari (OSX?) devrait embarquer un codec OGG. D'après ce que j'ai lu, c'est un problème de brevet logiciel : Apple a peur de se prendre un procès (troll partern) car OGG ne serait pas protégé juridiquement.
@rik:
>Ça n'empêche que Dailymotion ne devrait pas faire du browser sniffing mais plutôt regarder les fonctionnalités du navigateur
Sincèrement, je ne vois pas comment faire pour savoir si on peut fournir du ogg ou autre codec, à part sniffer le browser (et donc en déduire le possible support ou pas...)
Notons toutefois que la balise video permet d'indiquer plusieurs format de fichier, mais le souci est :
1) pas sûr que cette fonctionnalité soit implémentée sur tout les navigateurs supportant <video>
1) cela obligerait DailyMotion à enregistrer leurs videos en quicktime, wm, ogg etc.. ça leur coûterait cher en stockage et en temps de calcul. Mais peut être qu'à l'avenir...
<video src="file.ogg"><!-- fallback --><embed src="player.swf" data="file.flv" /></video>
Par exemple ?
Ce n'est pas un problème d'encodage qui a limité la sortie du site openvideo.dailymotion.com à Firefox 3.5. C'est le fait que le player video en HTML 5 avait des bugs avec Safari (WebKit pour être plus précis). On espère corriger les problèmes bientôt. L'objectif c'est d'être compatible avec tous les navigateurs qui supportent la balise video : http://blog.dailymotion.com/fr/inde...
@Rik : bah non, parce que Safari connait la balise video, donc va l'interpreter et ignorer le fallback. et le problème ici, c'est que Ogg, il ne connait pas (si tu n'a pas installé le codec). Donc aucune vidéo.
@laurentj Pas sûr, faudrait que je fasse des tests mais j'ai le codec donc relou de désinstaller.
Il me semble que s'il ne sait pas lire la vidéo, il fallback sur l'intérieur.
@Sébastien : Si je peux aider, n'hésite pas : rik chez webkit point org
@Sébastien : merci pour l'info :-)
C'est maintenant dispo sur Safari 4 beta aussi http://openvideo.dailymotion.com. C'est juste un peu buggé (volume, timer, pas de png animé, seek bar, sous-titre). Mais c'est normal sur une pré-bêta !
Salut,
>"C'est maintenant dispo sur Safari 4 beta"
Ah :) Donc c'est pas qu'un site "Optimisé pour Mozilla" mais ouvert _aussi_ aux navigateurs propriétaires qui ne voudraient plus utiliser de plugin propriétaires ?
Peut-être un jour "dispo sur Opera", dont des versions de test supportant ces standards et formats ouverts sont accessibles depuis... fin 2007 sur labs.opera.com ?
@+
--
Pierre
@pierre : la dernière version d'Opera contient les derniers changements sur la spec de la balise video ?
Ça marche avec mon Safari 4 — ça fait bientôt deux ans que je lis du OGG avec Safari — cependant je n'apprécie pas du tout la vidéo agrandie et floue. J'aimerais l'avoir en taille normale et que ceux qui le désirent puissent l'agrandir au besoin. Avec un peu de javascript et de CSS ça le fait, comme je l'ai bidouillé à l'adresse qui suit avec la “gueule à Nitot” :-)
http://lamangrove.com/demos/html5/t...
La vidéo d'origine est en plus grand format, donc belle aussi lorsqu'on l'agrandit, même si mon encodage Theora (avec QuickTime) pourrait être meilleur. Je suis conscient que des vidéos plus grandes poseraient sans doute des problèmes de bande passante lorsqu'on en a une foultitude à livrer… Bref, tout ça marche superbien, y compris avec du Windows Media et du FLV mais pour en finir avec Flash et les plugins il faut gérer tous les formats et pas seulement OGG, comme avec les images… Et puis le x264 est libre lui aussi en plus d'être totalement équivalent au H.264.
@Laurent:
>"la dernière version d'Opera contient les derniers changements sur la spec de la balise video ?"
Je ne pense pas puisque la dernière version expérimentale date de quelques mois.
Je ne sais pas non plus si Firefox ou Safari supportent les dernières spec à la mode mais, à ma connaissance, ils parviennent pas encore à afficher les démos (garanties sans browser-sniffing) présentes sur http://my.opera.com/MacDev_ed/blog/... et http://people.opera.com/howcome/200...
alors qu'Opera 9.62 "video" semble afficher proprement des trucs comme http://www.foms-workshop.org/foms20...
@+
--
Pierre
@pierre
>Je ne sais pas non plus si Firefox ou Safari supportent les dernières spec à la mode
je te parle juste de la spec de la balise video.
>mais, à ma connaissance, ils parviennent pas encore à afficher les démos
Ouai enfin les demos que tu indiques, utilisent la balise video de SVG tiny, pas celle de html5. Or mon billet parle de la balise video de html5.
Et la balise video the SVG tiny est largement moins puissante que celle de html5, puisque les seuls attributs que l'on a sont des attributs de positionnement et de transformation graphique. Aucun attribut pour le contrôle de la video, et aucune API de manipulation de la video en JS.
Bref, compare ce qui est comparable.
Note que l'utilisation de la balise video HTML5 dans du SVG est tout à fait possible, via foreignObject.
Par exemple, dans la version 9.64 d'Opera que j'ai (et dans la 10 preview), censée supporter la balise video HTML5 et SVG, la demo suivante ne fonctionne pas : http://people.mozilla.com/~prouget/...
Pourtant, mise à part l'utilisation du style transform, cette page n'utilise que des standards, et du très "basique" finalement. Même si je ne m'attend pas à ce que la video tourne comme dans FF3.5 (puisque cela necessite l'utilisation du style transform), la video devrait au moins pouvoir se jouer si opera supporte cette balise
PS: apparement opera ne connait vraiment pas la balise video, même cette demo hyper simple ne fonctionne pas : http://people.mozilla.com/~prouget/...
>"je te parle juste de la spec de la balise video."
Bon, j'aurais pas dû parler de "mode", car finalement HTML5 n'est à ce jour pas plus à la mode que SVG :)
>"compare ce qui est comparable."
C'était plus l'optique de cette citation d'exemples. Sur ces démos accessibles sans blocage "à la gueule du client", on peut se rendre compte assez concrètement de ce que supporte tel ou tel navigateur :)
Si ça ne s'affiche pas ou mal, si le son est crapoteux, si l'image est saccadée, si tel ou tel filtre ne produit rien, ça se voit et on peut éventuellement signaler le dysfonctionnement aux développeurs du site ou du navigateur concerné...
>"Par exemple, dans la version 9.64 d'Opera que j'ai (et dans la 10 preview), censée supporter la balise video HTML5 et SVG,"
Les versions finalisées 9.6x ou en développement 10.00 alpha, si elles supportent assez profondément SVG depuis longtemps, ne sont pas censées supporter HTML5. Seules quelques versions expérimentales (dont la 9.62 de 11/2008) distribuées sur labs.opera.com supportent la balise video et quelques autres standards en devenir (?).
>"même cette demo hyper simple ne fonctionne pas : http://people.mozilla.com/~prouget/..."
http://my.opera.com/ra_mon/albums/s... :)
Cette démo, sur ma machine (AMD64-2Ghz), permet de noter une sacré différence de performance entre les deux implémentations.
@+
--
Pierre
>Si ça ne s'affiche pas ou mal, si le son est crapoteux, si l'image est saccadée, si tel ou tel filtre ne produit rien, ça se voit et on peut éventuellement signaler le dysfonctionnement aux développeurs du site ou du navigateur concerné...
Comme si les utilisateurs "normaux" allaient signaler les bugs, et savoir en plus si ça vient du site ou du navigateur.
L'utilisateur qui ne voit pas de vidéo sur un site qui pourtant devrait montrer une vidéo, a deux choix : soit il essaye avec un autre navigateur et si ça marche, alors il jette son navigateur précédent (bye bye opera ?), soit il va voir sur un autre site.
Et puis même les geeks n'ont pas forcément de temps d'aller étudier le site pour savoir si c'est un probléme du site ou du navigateur, et ensuite aller signaler le bug (trouver le mail à contacter, ou chercher le tracker de bug du navigateur etc)
Bref, si un site veut que sa page fonctionne dans un maximum de contexte, bah oui, il va faire du browser sniffing ou du fallback (inclure une balise object affichant du flash, à l'interieur d'une balise video)
>Sur ces démos accessibles sans blocage "à la gueule du client"
De toute façon, les releases d'Opera ne supportent pas la balise vidéo HTML5, donc je ne vois pas où ce blocage génerait les utilisateurs d'opera.
>Cette démo, sur ma machine (AMD64-2Ghz), permet de noter une sacré différence de performance entre les deux implémentations.
accès à ta page impossible. Faut un login/mot de passe...
>"soit il essaye avec un autre navigateur et si ça marche, "
Ou il se rend sur un site de support technique et va signaler avec étonnement "le site X fonctionne pas avec mon navigateur Y alors qu'il fonctionne avec le navigateur Z" où on lui conseillera probablement de déguiser son UA pour participer à ce genre de carnaval éculé.
>"alors il jette son navigateur précédent (bye bye opera ?),"
Tu penses que le sniffing pourrait aussi avoir pour but (ou simple conséquence) de réduire la diversité logicielle ?
>"soit il va voir sur un autre site."
Ça parait plus rationnel :) Il y a _heureusement_ beaucoup plus de sites web que de navigateurs ;)
>"si un site veut que sa page fonctionne dans un maximum de contexte, bah oui, il va faire du browser sniffing ou du fallback"
Nos premières v.10 d'Opera sont souvent prises pour des v.1.x par certains sites renifleurs: il va y avoir un sacré fallback à faire !
Mais la plupart du temps les sites en question se contentent, comme solution de repli, de conseiller l'installation de IE7 ou Firefox 3...
>"De toute façon, les releases d'Opera ne supportent pas la balise vidéo HTML5, donc je ne vois pas où ce blocage génerait les utilisateurs d'opera."
Ça gènera les utilisateurs des versions expérimentales d'Opera supportant la balise vidéo qui auraient été surement très curieux, et pour cause, de tester l'ouverture du rayon ogg chez Dailymotion...
>"accès à ta page impossible"
Pardon. http://files.myopera.com/ra_mon/alb...
et une autre pour la route : http://files.myopera.com/ra_mon/alb...
La conso de CPU de Firefox sur ma machine fait que les vidéos de Rouget ou de Dailymotion sont inexploitables. Alors qu'Opera lit les vidéos accessibles sans difficulté notable (même s'il n'est pas capable, à ce jour, d'afficher tous les raffinement d'enrobages et autres traitement en JS).
@+
--
Pierre
chez moi, cette demo prend à peine 45% d'un processeur... (macbook)