Lire une vidéo avec HTML5

Bonjour,

Je viens de lire l'ntroduction à la balise video de HTML5. Celle-ci évoque les formats vidéo mp4, webm, et ogv.

Or je souhaiterais diffuser une vidéo en format .mts, c'est le format d'enregistrement de mon appareil photo.

J'ai cherché sur le web, certains articles proposent de convertir la vidéo dans d'autres formats. Je voudrais savoir s'il y a un moyen pour éviter cela, pour utiliser nativement le format MTS avec HTML5.

Merci pour vos éclairages !

Edit 06/02 : modif du titre suite à avancement sur le problème
Titre original : Lire une vidéo .MTS avec HTML5
Modifié par Jarodd (06 Feb 2014 - 10:27)

Je suis pas sur mais a priori ça n'a pas l'air d’être supporter :s
https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats

Après je ne sais pas si il est possible de faire installer des codecs sur le pc de tes visiteurs, mais je n'y crois pas trop personnellement.

Non, et c'est pire que ça, tu seras obligé de convertir ta vidéo dans au moins deux formats :
* MP4 pour IE et Safari
* OGG/Theora pour firefox et chrome

Ce prodige est possible grâce à l'ouverture d'esprit légendaire des éditeurs de navigateurs. D'un côté on a des extrêmistes du libre qui ne veulent pas entendre parler de MPEG quand bien même il existe des bibliothèques de décodage libres, et de l'autre on a des idiots qui veulent imposer leur format à tout prix, qui refusent de faire le moindre effort, et qui en ont strictement rien à cirer du reste du monde.

Pour la conversion, tu peux essayer des services en ligne comme
http://www.mediaconverter.org/
ou
http://www.online-convert.com/

Ou encore mieux, tu peux te passer des convertisseurs dans le cloud en installant toi-même FFMPEG ou un des lecteurs/convertisseurs l'utilisant en interne. Utiliser FFMPEG directement n'est pas facile, c'est à la base juste une API et un outil en ligne de commande.
Pour plus de détails sur FFMPEG et de nombreux liens, voir la page wikipedia
http://fr.wikipedia.org/wiki/FFMPEG

Je n'ai jjamais entendu parler de ton format, donc je ne sais pas s'il est effectivement supporté... mais sachant que FFMPEG supporte des centaines de formats/codecs dans plein de variantes, il ne leur a probablement pas échappé.
Modifié par QuentinC (16 Jan 2014 - 20:14)

Jarodd a écrit :
J'ai cherché sur le web, certains articles proposent de convertir la vidéo dans d'autres formats. Je voudrais savoir s'il y a un moyen pour éviter cela, pour utiliser nativement le format MTS avec HTML5.

Non, les .mts sont des fichiers AVCHD, avec un conteneur de type mpeg-2 comme pour les DVD, et encapsulant une vidéo H.264/MPEG4. Si le H.264/MPEG4 est bien décodé par certains navigateurs, ce format AVCHD n'est par contre pas supporté. Par contre la conversion sera rapide vu qu'il n'y a pas besoin de réencoder la vidéo (enfin pour IE et safari, et pour chrome et firefox dans certains cas).
On rêverait déjà de voir des formats/codecs standards être supportés, alors ce genre de format ésotériques ça attendra

QuentinC a écrit :
D'un côté on a des extrêmistes du libre qui ne veulent pas entendre parler de MPEG quand bien même il existe des bibliothèques de décodage libres

Heuu non. le Mp4 supporté l'est avec du H264. Même si il existe des codecs libres qui encodent/décodent du H264, cela n'est pas valable aux US car cela tombe sous le coup des brevets logiciels. Autrement dit, pour qu'un navigateur ou logiciel puisse encoder/décoder du H264, ils doivent payer une licence si ils souhaitent être distribués aux US. C'est la raison de la faible envie de ces éditeurs de promouvoir un écosystème payant. Le mp4/H264 fonctionne tout de même maintenant sous Firefox Windows car le décodage se fait par l'OS (toutefois ce n'est pas très safe, si le codec n'est pas installé, bye bye).
Modifié par kustolovic (16 Jan 2014 - 21:19)

h264 fonctionne dans Firefox et Chrome. MP4 c'est un conteneur, pas un codec.

jb_gfx a écrit :
h264 fonctionne dans Firefox et Chrome.

Pour firefox, seulement sous Windows avec les codecs H264 installés (enfin ça doit être le cas par défaut). Par contre pas sous mac.

a écrit :
Même si il existe des codecs libres qui encodent/décodent du H264, cela n'est pas valable aux US car cela tombe sous le coup des brevets logiciels. Autrement dit, pour qu'un navigateur ou logiciel puisse encoder/décoder du H264, ils doivent payer une licence si ils souhaitent être distribués aux US.

Dans ce cas je ne comprends pas un truc. La bibliothèque FFMPEG serait alors en partie illégale aux US puisqu'elle permet d'encoder/décoder dans des formats brevetés ?

a écrit :
h264 fonctionne dans Firefox et Chrome.

Ca par contre c'est plutôt une bonne nouvelle, je l'ignorais.

Du même coup, ça veut dire que, autant propriétaire et breveté qu'il soit, c'est ce format qui est en train de gagner la bataille. Entre firefox windows, chrome windows, safari tout systèmes et IE, on a largement plus de 50% des internautes je pense. Seul gros absent notable, android.

IL me reste une grosse question tant qu'on parle de brevets logiciels: c'est techniquement illégal de diffuser du contenu audio en MP3 ou de la vidéo en H264 pour un particulier alors ? OU bien est-ce que les droits sont assumés par les logiciels de création/édition/conversion dans ces formats ? ET quid des bibliothèques de conversion libres comme FFMPEG alors, qui n'ont probablement pas payé de droits puisque ça va à l'encontre de leur philosophie ?

J'avoue qu'un bon lien du type « les brevets logiciels pour les nuls » serait vachement utile... je ne dois pas être le seul à ne strictement rien capter à ce bordel.

QuentinC a écrit :

Dans ce cas je ne comprends pas un truc. La bibliothèque FFMPEG serait alors en partie illégale aux US puisqu'elle permet d'encoder/décoder dans des formats brevetés ?

Elle l'est (illégale).
Mais dans la pratique, tant que tu ne l'utilise pas pour du commercial, ils s'en tapent. Selon ffmpeg:

a écrit :

Q: Is it perfectly alright to incorporate the whole FFmpeg core into my own commercial product?
A: You might have a problem here. There have been cases where companies have used FFmpeg in their products. These companies found out that once you start trying to make money from patented technologies, the owners of the patents will come after their licensing fees. Notably, MPEG LA is vigilant and diligent about collecting for MPEG-related technologies.

Autrement dit, tant que tu ne te fais pas de l'argent, ou que ton service n'a rien à voir avec les US, tu ne risque rien.
Pour les détails sur FFMPEG : http://www.ffmpeg.org/legal.html

a écrit :
IL me reste une grosse question tant qu'on parle de brevets logiciels: c'est techniquement illégal de diffuser du contenu audio en MP3 ou de la vidéo en H264 pour un particulier alors ?

Oui, enfin sans payer, dans les pays qui reconnaissent les brevets logiciels. En Europe, c'est parfaitement légal. Donc tu ne peux que être attaqué sur ce qui est sur leur territoire. En gros tant que tu n'ouvre pas de bureau aux states et que tu évite d'y poser ton serveur, le pire qu'il pourrait t'arriver et qu'il coupe l'accès au site au états-unis.
Modifié par kustolovic (16 Jan 2014 - 22:43)

Merci pour ces réponses, ça me rassure !

Bonjour,

J'y suis arrivé, j'ai utilisé ffmpeg2theora pour convertir mes vidéos en ogv, qui sont bien lues par Firefox (desktop et mobile). Par contre Chrome et Opera ne les lisent pas, alors qu'ils devraient...

Bonjour,

Je relance de quinze, car j'ai toujours un problème ave ces vidéos.

Sur les navigateurs desktop, j'arrive à les lire (Firefox, Chromium, Opera, IE). Par contre sur mobile et tablette, aucune ne passe.

J'ai suivi l'article Intro... ainsi que le chapitre audio/vidéo dans le livre "HTML5 la référence..." de Rodolphe Rimelé. Voici le code que j'ai (j'ai bien mis les directives .htaccess également) :

<video id="video" data-video-id="3" width="1280" height="720" controls poster="track_0015_l.jpg">
    <source  src="track_0015.mp4" type="video/mp4">
    <source  src="track_0015.ogv" type="video/ogg">
    <source  src="track_0015.webm" type="video/webm">
    Ce navigateur ne supporte pas la balise video.
</video>

Je teste sous Android 2.3 et 4.0.4.
- Avec Firefox J'ai "No video with supported format and MIME type found" (et pas mon message défini entre les balises <video>)
- Avec Chrome, j'ai les contrôle, mais un grand vide au dessus. Message toujours pas affiché.
- Avec Opera, je n'ai pas la vidéon mais cette fois j'ai bien le message.

Dans la mesure du possible j'aimerais éviter de mettre du Flash...

Une idée de ce qui pourrait clocher ? Merci pour votre aide.

Personne n'a d'idée ?

Tu es sûr que ton .htaccess est correct (tu dois avoir le bon type/mime avec ton fichier lors de la requête http)?

La vidéo sur mon site de test s'affiche correctement?

P.S. : tu peux laisser tomber OGV.
Modifié par Patidou (06 Feb 2014 - 15:02)

Bonjour,

Je supose qu'il est correct, je l'ai copié du tuto d'Alsacreations, à savoir :

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Sur mobile, ta vidéo de test passe bien avec Firefox, Chrome, et Opera. Pas avec Opera mini (téléchargement au lieu de lecture), ni Navigateur Android (vide à la place de la vidéo).

Donc a priori je devrais y arriver aussi. Mais je ne vois pas ce qui coince...

Pourquoi laisser tomber ogv ?

OGV c'est pour Firefox 3.5 (3.6?) ou moins.

Quand tu fais un lien direct sur la vidéo ça fonctionne? Tu as bien les entêtes HTTP (aide-toi de Firebug)?

Oui avec un lien direct la vidéo est bien lue. Donc ça vient d'ailleurs, le htaccess peut-être ? Pourtant j'ai fait un copier coller pour être sûr

Je vais voir si je peux installer Firebug sur Firefox Android.
Modifié par Jarodd (06 Feb 2014 - 16:54)

J'ai du 200 et du 304 (not modified) sur ma page des vidéos... Et comme j'arrive à la lire sur des navigateurs desktop, je doute que cela vienne de la vidéo.

Une précision avec ta vidéo de test qui fonctionne :
- ton fichier .htaccess est-il le même que dans le tuto Alsa ? L'as-tu mis à la racine du site, ou dans le répertoire des vidéos, ou ailleurs ? (j'ai essayé les deux)

Edit : c'est assez curieux, avec Firefox, si je fais "Voir version ordinateur", la vidéo s'affiche bien !

Je viens de voir qu'il y a 144 bugs déclarés sur le Bugzilla de Firefox... Certains ouverts en 2009 et toujours à "new"
Modifié par Jarodd (06 Feb 2014 - 22:21)

J'utilise le .htacces de html5 boilerplate légèrement modifié, à la racine du sous-domaine.
Modifié par Patidou (07 Feb 2014 - 11:37)

As-tu mis les lignes ExpiresByType ? Je ne vois pas les AddType indiqués dans le tuto...

UP car je ne comprends pas ce qui cloche(rait) avec le .htaccess