Video html5

Bonjour,

J'essaie d'inclure du contenu video dans mon site web en html 5.
J'ai encodé ma vidéo en H.264 dans un conteneur avi et j'ai simplement écrit ceci:

<video width="100" height="80" controls preload="none" src="YRMW.avi" />

Mais ça ne marche pas... qu'est ce qui manque?

Voici l'adresse pour tester http://mathmax.mynetdomain.de/bbbb.html

Merci d'avance pour votre aide.

Il y a plusieurs choses:

1. AVI (Divx?) n'est pas supporté par les navigateurs à moins d'employer un plugin spécifique. C'est mieux d'utiliser le mp4 (h.264) et/ou webm/ogv. Exemple (avec dégradation en lecteur flash pour IE).
2. video s'utilise avec une balise d'ouverte et de fermeture et ne peux pas s'autofermer.
3. preload="none" n'existe pas : on met preload ou pas. Plus d'info.
4. En xhtml5, on écrira preload="preload".

c'est déjà du h.264, donc j'ai juste à changer l'extension? avi => mp4?

Je me suis basé sur ce qui est dit ici: http://www.xul.fr/html5/video.php

J'ai essayé aussi d'utiliser une balise d'ouverture et de fermeture.. ça ne marche pas.

J'ai essayé sans preload="none", ça ne change rien..

Voici le code utilisé dans le billet donné en lien :

<video height="300" width="400" controls="">

	<source src="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_theora.ogv"  type="video/ogg"/>

	<source src="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_h264.mp4" type="video/mp4"/>

	<object type="application/x-shockwave-flash" data="http://pragmafilm.lombre.net/?pf=player_flv.swf" height="300" width="400">
		<param name="movie" value="http://pragmafilm.lombre.net/?pf=player_flv.swf" />
		<param name="wmode" value="transparent" />
		<param name="allowFullScreen" value="true" />
		
		<param name="FlashVars" value="flv=http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_h264.mp4&width=400&height=300&margin=1&showfullscreen=1&showvolume=1&showtime=1" />
		<a href="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_h264.mp4">Vidéo au format MP4</a> ou <a href="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_theora.ogv">Vidéo au format OGV</a>

	</object>
</video>

Il faut voir si ton navigateur lit le h.264, les seuls qui le lisent :

1. Chrome
2. Safari mac, safari windows avec quicktime
2. le futur IE9

Ici on met en source deux types de fichier vidéo pour être sûr que ça fonctionne partout.
Modifié par Patidou (23 Jun 2010 - 13:29)

En changeant l'extension ça devrait marcher.

P.S. : il existe une encodeur vidéo universel basé sur gecko, mais je ne me souviens plus de son nom.

sous chrome, ceci devrait donc fonctionner:

<video height="300" width="400" controls=""> 

    <source src="http://mathmax.mynetdomain.de/YRMW.mp4" type="video/mp4"/> 

</video>

pourtant ça ne marche pas.. pourrais-tu essayer de ton côte? A la limite tu peux télécharger la vidéo.

merci pour ton aide

Patidou a écrit :
En changeant l'extension ça devrait marcher.

P.S. : il existe une encodeur vidéo universel basé sur gecko, mais je ne me souviens plus de son nom.

Parles-tu de MediaCoder ? Simple, complet et efficace (autant que je puisse en juger) et libre...(http://mediacoder.fr/)
Modifié par redkissifrott (23 Jun 2010 - 14:02)

L'adresse vers le fichier vidéo est incorrecte.

redkissifrott a écrit :


Parles-tu de MediaCoder ? Simple, complet et efficace (autant que je puisse en juger) et libre...(http://mediacoder.fr/)

Non c'est pas lui, je donnerai le nom ce soir.

Patidou a écrit :
L'adresse vers le fichier vidéo est incorrecte.

non, c'est juste que tu n'as pas l'autorisation sur le .mp4.
J'ai renommé le fichier .rar

mathmax a écrit :
J'ai renommé le fichier .rar

RAR? Tu parlais d'un avi!? RAR c'est un fichier compressé comme le ZIP. Tu dois d'abord le décompresser pour extraire le fichier vidéo.
Modifié par Patidou (23 Jun 2010 - 14:45)

J'ai juste renommé en rar pour que tu puisses télécharger le fichier. Je n'ai pas compressé. L'url est bonne.

Ah ok, j'avais mal compris. Tu pouvais le laisser en mp4.

mais donc quel est le problème à ton avis?

Je vais regarder si il y a un problème avec le fichier ce soir.

ok merci, je le laisse en rar. Renomme le simplement une fois téléchargé

Il y a un problème avec la vidéo : elle s'affiche correctement seulement dans VLC, essaye un autre encodeur comme Miro Video Converter ou Handbrake en demandant bien mp4 pour le web.

Avec MVC, en choisissant le format pour iPhone ça devrait être bon. Il y a même le format webm pour avoir deux sources, tu touches ainsi un maximum de monde.
Modifié par Patidou (24 Jun 2010 - 00:25)

Patidou a écrit :
1. AVI (Divx?) n'est pas supporté par les navigateurs à moins d'employer un plugin spécifique. C'est mieux d'utiliser le mp4 (h.264) et/ou webm/ogv.

AVI, MP4, et OGV sont des conteneurs. DivX, H.264 et VP8 sont des codecs vidéo. Bien que certains conteneurs ne soient pas compatibles avec certains codecs, le fait de connaitre l'extension et donc le format du conteneur (si l'extension est correcte...) n'indique rien sur le codec.

Pour info, WebM c'est un conteneur Matroska, de la vidéo en VP8 et de l'audio en Ogg Vorbis.

Patidou a écrit :
2. video s'utilise avec une balise d'ouverte et de fermeture et ne peux pas s'autofermer.

Faux (edit: ah ben si en fait ): http://dev.w3.org/html5/markup/video.html
On peut écrire <video src=mavideo></video> ou bien <video><source src=mavideo></video>, mais pas <video src=mavideo> seul, effectivement.

Patidou a écrit :
3. preload="none" n'existe pas : on met preload ou pas.

Si si, preload="none" existe. Je suppose que la spec a dû changer sur ce point:
http://dev.w3.org/html5/markup/audio.html#audio.attrs.preload

mathmax a écrit :
c'est déjà du h.264, donc j'ai juste à changer l'extension? avi => mp4?

AVI et MP4 sont des conteneurs (leur nom officiel est un peu plus compliqué je crois). Changer d'extension ne changera pas le format de ton conteneur. Donc non, on ne change pas l'extension. Si le format utilisé est mauvais, il faut réencoder la vidéo ou la convertir dans un format de conteneur différent.
Modifié par Florent V. (24 Jun 2010 - 14:05)

Dans les choses à surveiller, il y aurait:

1. Le format de la vidéo, qui doit être supporté par les navigateurs cibles. Ici c'est un conteneur AVI et de la vidéo en H264. Par contre pour le son, VLC m'indique un codage en 48kHz et un codec "araw" (d'après une recherche rapide, ça semble être un format utilisé par le logiciel Avid). Pour le son, du AAC ou du MP3 en 44,1kHz serait plus pertinent je pense. Vérifier ce qui est supporté exactement. Utiliser un préréglage d'export pour iPhone est une bonne solution à priori.
2. L'extension du fichier, qui doit être correcte.
3. Le type MIME déclaré, qui doit être correct, y compris dans la configuration du serveur (en-têtes HTTP).

Florent V. a écrit :

AVI, MP4, et OGV sont des conteneurs. DivX, H.264 et VP8 sont des codecs vidéo. Bien que certains conteneurs ne soient pas compatibles avec certains codecs, le fait de connaitre l'extension et donc le format du conteneur (si l'extension est correcte...) n'indique rien sur le codec.

Oui c'est pour ça que je demandais si c'était encodé en divx. Mais ce n'était pas clair, c'est vrai.