Page 1 sur 21, 2 Suivant[résolu] HTML5 et balise video

[Mikelenain]

J'ai un nouveau problème sur le développement d'un site.
Je souhaiterais utiliser la balise <video> pour mettre en ligne des clips.
Malheuseusement ça semble galérer un peu (j'ai le petit truc de chargement pendant très très longtemps) et je me demandais d'où cela pouvait venir.
J'ai plusieurs hypothèses pour cela :
- mon code est mal foutu (j'y crois pas, j'ai pris presque totalement sur un site reconnu)
- ma vidéo est trop lourde (54Mo réduit par la suite à 30Mo et enfin à 10Mo .... )
- ma vidéo n'est pas reconnue à cause d'un mauvais codec (j'ai essayé ffmpeg, mais je suis un peu novice sur ce logiciel)
Je colle ci-dessous mon code et la sortie ffmpeg :

Code: Tout sélectionner

<video width="480" height="360" controls="controls">
<source src="videos/Nightwish_-_Bless_the_child.mp4" type="video/mp4" />
Nightwish - Bless the Child</video>

Code: Tout sélectionner

$ ffmpeg -i Nightwish_-_Bless_the_child.mp4
FFmpeg version 0.6.2-4:0.6.2-1ubuntu1, Copyright (c) 2000-2010 the Libav developers
  built on Mar 22 2011 15:55:04 with gcc 4.5.2
  configuration: --extra-version=4:0.6.2-1ubuntu1 --prefix=/usr --enable-avfilter --enable-avfilter-lavf --enable-vdpau --enable-bzlib --enable-libgsm --enable-libschroedinger --enable-libspeex --enable-libtheora --enable-libvorbis --enable-pthreads --enable-zlib --enable-libvpx --disable-stripping --enable-runtime-cpudetect --enable-vaapi --enable-gpl --enable-postproc --enable-swscale --enable-x11grab --enable-libdc1394 --enable-shared --disable-static
  libavutil     50.15. 1 / 50.15. 1
  libavcodec    52.72. 2 / 52.72. 2
  libavformat   52.64. 2 / 52.64. 2
  libavdevice   52. 2. 0 / 52. 2. 0
  libavfilter    1.19. 0 /  1.19. 0
  libswscale     0.11. 0 /  0.11. 0
  libpostproc   51. 2. 0 / 51. 2. 0
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'Nightwish_-_Bless_the_child.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2mp41
    encoder         : Lavf52.64.2
  Duration: 00:06:19.08, start: 0.000000, bitrate: 214 kb/s
    Stream #0.0(und): Video: mpeg4, yuv420p, 480x360 [PAR 1:1 DAR 4:3], 146 kb/s, 25 fps, 25 tbr, 25 tbn, 25 tbc
    Stream #0.1(und): Audio: aac, 44100 Hz, stereo, s16, 64 kb/s
At least one output file must be specified

Perso, je pencherais plus pour la taille (en Mo) de la vidéo mais bon ....
lien vers la page : http://www.la-haute-tour.info/2.0/index ... 1&paper=21

[JosephK]

Déjà du mp4 c'est mal (il faut que ça soit du mp4 avec du H.264 comme codec vidéo)... seuls IE9, Safari et les navigateurs basés sur webkit (normalement Chrome est censé l'abandonner) savent le lire. Donc selon le navigateur que tu utilises ça peut ne pas marcher et c'est normal (s'il y a une croix sur FF par exemple ce n'est pas bon).
C'est pour ça que sur le framablog on a 2 fichiers sources au moins : webm et mp4 (et ogv sur les anciennes vidéos). Le code HTML est bon par contre.

Sur linux, je te conseille d'utiliser Arista Transcoder (c'est dans les dépôts normalement) : c'est graphique et on peut choisir les formats de vidéo en fonction de l'usage pour lequel la vidéo est destinée dont la mise en ligne sur le web (h264, flash ou webm)... Perso je ne me sers pas de ffmpeg ou mencoder parce que j'ai toujours un peu de mal à retenir les paramètres et à comprendre ce qu'ils me racontent en cas de problème.

Enfin, si ça bloque encore il faut ajouter les mimetype dans un fichier .htaccess à la racine du site ou du dossier utilisé pour le stockage des vidéos :

Code: Tout sélectionner

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

[Mikelenain]

Déjà du mp4 c'est mal (il faut que ça soit du mp4 avec du H.264 comme codec vidéo)... seuls IE9, Safari et les navigateurs basés sur webkit (normalement Chrome est censé l'abandonner) savent le lire. Donc selon le navigateur que tu utilises ça peut ne pas marcher et c'est normal (s'il y a une croix sur FF par exemple ce n'est pas bon).
C'est pour ça que sur le framablog on a 2 fichiers sources au moins : webm et mp4 (et ogv sur les anciennes vidéos). Le code HTML est bon par contre.

Je suis sous FF. J'ai testé clic droit > Afficher la vidéo et ça fonctionne bien. C'est pour cela que j'ai du mal à comprendre le soucis.

Sur linux, je te conseille d'utiliser Arista Transcoder (c'est dans les dépôts normalement) : c'est graphique et on peut choisir les formats de vidéo en fonction de l'usage pour lequel la vidéo est destinée dont la mise en ligne sur le web (h264, flash ou webm)... Perso je ne me sers pas de ffmpeg ou mencoder parce que j'ai toujours un peu de mal à retenir les paramètres et à comprendre ce qu'ils me racontent en cas de problème.

Tiens, je ne le connaissais pas.
Perso, j'ai bien le principe de la ligne de commande (même si je suis loin d'être doué). Je vais l'essayer.

Enfin, si ça bloque encore il faut ajouter les mimetype dans un fichier .htaccess à la racine du site ou du dossier utilisé pour le stockage des vidéos :

Code: Tout sélectionner

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

Mais dans ce cas-là, cela m'oblige à mettre la vidéo en triple (une pour chaque format), non ?

[JosephK]

Je suis sous FF. J'ai testé clic droit > Afficher la vidéo et ça fonctionne bien. C'est pour cela que j'ai du mal à comprendre le soucis.

Ben ça alors Tu n'aurais pas nourri ton Firefox aux OGM par hasard ?

Enfin, si ça bloque encore il faut ajouter les mimetype dans un fichier .htaccess à la racine du site ou du dossier utilisé pour le stockage des vidéos :

Code: Tout sélectionner

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

Mais dans ce cas-là, cela m'oblige à mettre la vidéo en triple (une pour chaque format), non ?

Le mimetype c'est juste au cas où le serveur soit mal configuré. En gros, le serveur dit au navigateur que les fichiers sont des vidéos et pas des fichiers textes.
Ça ne t'oblige pas à mettre 3 fichiers vidéos, ça permet juste d'être sur que si tu utilises tel ou tel format de vidéo elle soit correctement interprétée mais tu n'es pas obligé de fournir 3 fichiers à chaque fois.

En bon libriste, tu ne devrais pas fournir de mp4 mais juste du webm (c'est plus performant en plus : fichiers plus petit à qualité égale et donc plus rapide à lire pour le navigateur).

Par contre, si tu cherches le compromis pour qu'un maximum de navigateur et de plate-forme puisse lire la vidéo alors c'est ça la référence (à peu près la même chose en français sur alsacréation) et il te faut donc au moins les 2 formats de vidéo webm et mp4.
Le mp4 étant utilisé aussi dans le lecteur flash alternatif pour tout les vieux navigateurs et c'est bien aussi de fourni les liens pour télécharger la vidéo parce que, le html5 étant encore un peu expérimental, il arrive qu'il y ait des petits problèmes sur certaines plateformes.

[Téthis]

Vade retro suppôt du MPEG-LA ! Tss ! Tsss !

Pour transcoder une vidéo quelconque en webm : c'est ffmpeg -i mavidéo.avi mavidéo.webm. On se fiche un peu de la qualité et des options très compliquées car on transcode.

[Mikelenain]

Vade retro suppôt du MPEG-LA ! Tss ! Tsss !

Je m'occupe d'abord du code html, je verrais ensuite pour mettre en vorbis

Code: Tout sélectionner

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

Le mimetype c'est juste au cas où le serveur soit mal configuré. En gros, le serveur dit au navigateur que les fichiers sont des vidéos et pas des fichiers textes.

Bon, je vais tester cela.

[Téthis]

On va dire qu'il n'y a pas de problème avec ta vidéo. C'est le navigateur qui la lit lorsqu'elle est dans la balise vidéo, comme H264 ça pue dans les pages web alors rien ne s'affiche. Lorsque tu ouvres la vidéo dans un onglet alors Firefox passe la main à un plugin, genre mplayer/vlc.

[JosephK]

Je confirme. La vidéo passe très bien avec Midori (navigateur basé sur webkit) et le code html est bon.

[Mikelenain]

je viens de mettre le .htaccess à la racine du site ET dans le dossier avec les vidéos et ... ça ne fonctionne pas (avec firefox ) :s
Pour un premier essai de la balise <video> ... c'est pas concluant
Je vais voir en rajoutant d'autres formats (ogg et webm)

[JosephK]

T'es vraiment têtu toi : le mp4 n'est pas un format reconnu par Firefox.

mp4 pour Safari, IE9 et navigateur basé sur webkit.
webm et ogv pour Opera, Google Chrome et Firefox.