FFMPEG Convert HTML 5 vidéo ne fonctionne pas

Je suis en utilisant FFMPEG pour convertir une vidéo pour .mp4, ogg, .webm de sorte qu'il peut être considéré dans tous les navigateurs HTML5 à l'aide de la balise vidéo. Le problème est que j'ai réussi à convertir la vidéo pour les 3 formats requis, mais il n'affiche pas la vidéo dans la balise videotout ce que j'obtiens est IE9: la croix-rouge, Firefox: croix Grise, ça pourrait être un problème avec la conversion ou est-il quelque chose à voir avec la façon dont je suis ajoutant à la source de la balise vidéo. Voici ce que j'ai fait:

FFmpeg en ligne de commande(s):

ffmpeg -i test.mp4 test.mp4
ffmpeg -i test.mp4 test.ogg
ffmpeg -i test.mp4 test.webm

Voici la vidéo tag:

<video id="video"  height="340" width="470" onplaying="PlayVideoFromVid('PAUSE')"  onpause="PlayVideoFromVid('PLAY')" onended="ResetVideo()" preload="true" autobuffer="true" controls="true">
    <source src="test.ogg" type="video/ogg"></source>
    <source src="test.mp4" type="video/mp4"></source>
</video>

Webconfig lignes pour le support de la vidéo:

<staticContent>
    <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
    <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
    <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
    <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
    <mimeMap fileExtension=".webm" mimeType="video/webm" />
</staticContent>

Ce serait génial si quelqu'un pouvait m'envoyer les paramètres requis pour ffmpeg pour convertir la vidéo pour les 3 formats requis et un exemple de la façon dont ils la définition de la source dans la balise vidéo pour l'afficher à nouveau. Et tout autre conseil serait grand comme la façon de définir la qualité etc lorsque vous effectuez la conversion.

Merci d'avance.

source d'informationauteur Brad

30

Triés, merci à tous pour l'aide 🙂 j'ai trouvé le suivant:

1. Vous devez télécharger la dernière ffmpeg + presets:

ffmpeg.arrozcru.org/autobuilds/ffmpeg/mingw32/static/

2. Vous avez besoin de créer une MAISON environnementales variable:

(a) http://www.moosechips.com/2009/08/installing-ffmpeg-binary-in-windows/

(b) http://www.itechtalk.com/thread3595.html

3. Copier les presets en vertu de la variable d'environnement dossier

4. Vous devez utiliser les commandes suivantes à convertir en utilisant ffmpeg:

Pour mp4 (H. 264 /ACC):
```
ffmpeg -i INPUTFILE -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 "OUTPUTFILE.mp4"
```
Pour webm (VP8 /Vorbis):
```
ffmpeg -i "INPUTFILE"  -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 "OUTPUTFILE.webm"
```
Pour ogv (Theora /Vorbis):
```
ffmpeg -i "INPUTFILE" -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 "OUTPUTFILE.ogv"
```

Je voudrais essayer ce code. C'est aussi simple que possible.

    <video controls="true">
        <source src="test.mp4" type="video/mp4"></source>
        <source src="test.webm" type="video/webm"></source>
        <source src="test.ogv" type="video/ogg"></source>
    </video>

La création de fichiers mp4, nombre minimal d'arguments. Malheureusement, je n'ai pas testé beaucoup.

    ffmpeg -i input_file -vcodec libx264 -vpre medium output_file.mp4

À la création d'ogv fichiers, Vous devez utiliser ffmpeg2theora. Il y a trop de problèmes avec ffmpeg.

1

J'ai essayé beaucoup de fichiers vidéo, les options de codage, les configurations de serveur, FFMPEG versions, d'autres encodeurs vidéo etc. avant de découvrir qu'une chose à considérer au moment de servir, des fichiers MP4 pour IE9 est le fichier de méta-données appelé moov atom intégré dans le fichier MP4. Si il se trouve à la fin du fichier, où certains codeurs y compris ffmpeg lieux, IE9 ne démarre pas la lecture de la vidéo, à moins que l'ensemble de la vidéo fichier téléchargé. Le déplacement de la moov atom métadonnées vers le début du fichier permet le téléchargement progressif de fichier MP4, et IE9 gère la vidéo joliment.

Il y a un outil appelé qt-fast start pour effectuer cette opération. Fait des merveilles pour moi, la compilation et à l'aide de Linux en ligne de commande de la version distribuée avec ffmpeg.
```
make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
```
1

Je pense que parce que je suis encore un débutant, je ne suis pas autorisé à laisser des commentaires? Afin de laisser cela comme une réponse, mais je pense que c'est plus le long des lignes d'une supposition.

A commencé à jouer avec la vidéo HTML5 une semaine auparavant. J'ai rencontré beaucoup de problèmes qui, finalement, s'est avéré être en raison de la conversion des fichiers vidéo je travaillais avec. Voici le code que j'ai utilisé pour mes exemples:
```
<video id="movie" width="600" height="338" poster="http://yourDomain.com/yourDirectory/posterFrame.jpg" controls="true" autoplay="true">
    <source src="http://yourDomain.com/yourDirectory/yourMovie.mp4" type='video/mp4' />
    <source src="http://yourDomain.com/yourDirectory/yourMovie.webm" type='video/webm' />
    <source src="http://yourDomain.com/yourDirectory/yourMovie.ogg" type='video/ogg; codecs="theora, vorbis"' />
    <object width="600" height="338" type="application/x-shockwave-flash" data="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf"><param name="movie" value="http://yourDomain.com/flowplayer/flowplayer-3.2.7.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"clip": {"url": "http://yourDomain.com/yourDirectory/yourMovie.mp4", "autoPlay":true, "autoBuffering":true},"plugins": {"controls": null}}' /></object>
</video>
```
J'ai modelé mon code après de Mark Pilgrim Plongée dans le HTML (Vidéo) écriture-up.

Quelques choses je pense à essayer:

1) Supprimer les attributs supplémentaires à partir de votre tag. Je suis moins familier avec ce que vous êtes à la mise en œuvre (onplaying, onpause), mais peut-être essayer d'utiliser les fonctions de base d'abord: la largeur, la hauteur et les contrôles. Voir si cela aide.

2) Dans mes tests, j'ai converti mon .ogg et .webm versions à l'aide de Miro. Quelle que soit la raison, les films aurait apparemment lire un fichier en local... mais quand j'ai regardé plus d'une fois dans mon navigateur, j'aurais vide écrans. J'ai fini par utiliser Firefoggfinalement, de convertir mon .ogg et .webm versions. Il a un comportement étrange.

Ne sais pas si FFmpeg est un dealbreaker, et quelque chose que vous devez utiliser dans le cadre de votre flux de travail. Mais si vous êtes simplement à la recherche pour obtenir votre code et à l'exemple des films fonctionnelle et en cours d'exécution, Firefogg a fait le tour pour moi.

J'ai finalement réalisé ce que la cause a été quand j'ai échangé des versions de travail des autres films, à la place de mon convertis. Je vous recommande d'essayer de brancher l' .mp4, .webm .ogg versions de Big Buck Bunny... et de voir si vous pouvez même les obtenir à l'écran. Au moins de cette façon, vous pouvez isoler si c'est une syntaxe ou un problème de conversion.

3) Enfin, je vous recommande de tester un fichier vidéo et d'un navigateur à un moment. C'est probablement une donnée, mais encore la peine de jeter là-bas.

Note: une fois que vous êtes bon pour aller avec chaque type de fichier, assurez-vous de la liste .mp4 version première. C'est à partir du Pèlerin vidéo HTML5 writeup:

ipad iOS 3.x avait un bug qui empêchait de remarquer quelque chose, mais la première source vidéo répertoriés. iOS 4 (une mise à jour gratuite pour tous les iPads) corrige ce bug. Si vous souhaitez diffuser de la vidéo à iPad propriétaires qui n'ont pas encore mis à niveau vers iOS 4, vous aurez besoin de la liste de vos fichiers MP4 en premier, suivi par le gratuit formats vidéo.

J'ai eu le même problème avec IE9 montrant une croix rouge en essayant de montrer le .la vidéo mp4.
Garder les choses simples en utilisant ffmpeg (comme Michaś suggéré) a résolu le problème pour moi.

<video id="movie" width="600" height="360" controls preload="auto">
   <source src="http://yourDomain.com/faceplant.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source> 
   <source src="http://yourDomain.com/faceplant.webm" type='video/webm; codecs="vp8.0,vorbis"'></source>
   <source src="http://yourDomain.com/faceplant.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>

Les paramètres ffmpeg: (j'ai utilisé .ogv de ffmpeg2theora que mon inputfile):

ffmpeg -i input_file.ogv -vcodec libx264 -vpre hq output_file.mp4

Ma version de ffmpeg:

ffmpeg 0.8.3
libavutil    51.  9. 1 / 51.  9. 1
libavcodec   53.  7. 0 / 53.  7. 0
libavformat  53.  4. 0 / 53.  4. 0
libavdevice  53.  1. 1 / 53.  1. 1
libavfilter   2. 23. 0 /  2. 23. 0
libswscale    2.  0. 0 /  2.  0. 0
libpostproc  51.  2. 0 / 51.  2. 0

0

Avoir essayé la plupart des suggestions ci-dessus, voici ce qu'il a effectivement travaillé pour moi de convertir des fichiers wmv en petit mp4, webm, ogg sur un Windows7-64 machine:
```
64bit\ffmpeg -i test.wmv test.mpg

old\ffmpeg -i test.mpg -vcodec h264 -s 320x240 test.mp4

32bit\ffmpeg -i test.mpg -vcodec libvpx -acodec libvorbis -f webm -s 320x240 test.webm

32bit\ffmpeg -i test.mpg -vcodec libtheora -acodec libvorbis -s 320x240 test.ogg
```
vieux\ffmpeg est la version SVN-r5570

64bit\ffmpeg est la version N-38292-ga4c22e3 construit 2/27/12 14:55:47

32 bits\ffmpeg est la version N-39267-g4082198 construit 3/25/12 20:25:08

(Uniquement la version 64 bits de lire le wmv, ainsi que je l'ai utilisé à convertir mpg comme un format commun.
Seul le vieux ffmpeg serait de créer un mp4.)
0

Assurez-vous que votre vidéo est servi en utilisant la bonne Content-type-d'en-tête

Il devrait être Content-Type:video/mp4 pour mp4/m4v.

Vous devez vous connecter pour publier un commentaire.