Skip to content
jordilopezamat edited this page Sep 5, 2014 · 4 revisions

HTML5 video responsive snippet

	<video style="max-width:100%; height: auto;" autoplay="autoplay" loop>
	  <source src="http://dropboxusercontent.com/.../movie.mp4" type="video/mp4" />
	  <source src="http://dropboxusercontent.com/.../movie.ogg" type="video/ogg" />
	  Your browser does not support the video tag.
	</video>

FFMPEG for transcoding .MOV >>> ( MP4,WebM,OGV)

Defaults:

Video: H.264, Level 3.0, Baseline profile

Audio: AAC, 1-2 channels

audio_bitrate: 128 (or less) >> 96

audio_sample_rate: 44100 (or less)

size:(640)632x480

max_frame_rate: 30

video_bitrate: 1500 (or less) >> 1000


$ ffmpeg -i {input_filename} -vb {video_kbps} -minrate {video_kbps} -maxrate {video_kbps} -bufsize {video_kbps} -aspect {aspect} -s {size} -c:v libx264 -profile:v "{profile}" -level "{level}" -r {fps} -g {fps} -keyint_min {fps*2} -x264opts "keyint={fps*2}:min-keyint={fps*2}:no-scenecut" -c:a libfdk_aac -ab {audio_bps} -ar 48000 -ac {audio_channels} -f {format} {output_filename}

Here are my 3 command lines to convert to WebM, OGG/Theora and mp4:

   OGG/Theora

   ffmpeg -i input.mov \
     -acodec libvorbis -ac 2 -ab 96k -ar 44100 \
     -b 345k -s 632x480 output.ogv

   WebM/vp8

   ffmpeg -i input.mov \
     -acodec libvorbis -ac 2 -ab 96k -ar 44100 \
     -b 345k -s 632x480 output.webm

    -->> WebM && OGG

ffmpeg -i input.mov \ -acodec libvorbis -ac 2 -ab 96k -ar 44100  -b 1000k -s 632x480 output.ogv  &&
ffmpeg -i input.mov \  -acodec libvorbis -ac 2 -ab 96k -ar 44100   -b 1000k -s 632x480 output.webm


   MP4/h264

   ffmpeg -i input.mov \
     -acodec libfaac -ab 96k \
     -vcodec libx264 -vpre slower -vpre main \
     -level 21 -refs 2 -b 345k -bt 345k \
     -threads 0 -s 632x480 output.mp4

Video are resized to 632x480 with a bitrate of 345k.

MP4-H.264


$    ffmpeg -i input.mov  -acodec libfaac -ab 96k -vcodec libx264 -vpre slower -vpre main -level 21 -refs 1 -b 345k -bt 1000k -threads 0 -s 632x480 output.mp4



MP4 11.\ La\ Historia\ del\ agua.\ 720p.mov

$  ffmpeg -i 11.\ La\ Historia\ del\ agua.\ 720p.mov  -acodec libfaac -ab 96k -vcodec libx264 -vpre slower -vpre main -level 21 -refs 2 -b 1000k -bt 1000k -threads 0 -s 632x480 11.\ La\ Historia\ del\ agua.\ II 480p.mp4


libx264 : NO -vpre slower ,NO -vpre main -> due to \!/ 'preset not found' 

11.

$  ffmpeg -i 11.\ La\ Historia\ del\ agua.\ 720p.mov  -acodec libfaac -ab 96k -vcodec libx264 -level 21 -refs 2 -b 1000k -bt 1000k -threads 0 -s 632x480 11.\ La\ Historia\ del\ agua.\  480p.mp4


10.\ Glaciar\ Viedma\,\ desde\ la\ pared\ frontal.\ 720p.mov

ffmpeg -i  10.\ Glaciar\ Viedma\,\ desde\ la\ pared\ frontal.\ 720p.mov  -acodec libfaac -ab 96k -vcodec libx264 -level 21 -refs 2 -b 1000k -bt 1000k -threads 0 -s 632x480  10.\ Glaciar\ Viedma\,\ desde\ la\ pared\ frontal.\ 480p.mp4


12.\ La\ nieve.\ 720p.mov 

ffmpeg -i 12.\ La\ nieve.\ 720p.mov 12.\ La\ nieve.\ 720p.mov   -acodec libfaac -ab 96k -vcodec libx264 -level 21 -refs 2 -b 1000k -bt 1000k -threads 0 -s 632x480 12.\ La\ nieve.\ 480p.mp4

13.Luna\ y\ Venus\ en\ time\ lapse.\ 720p.mov

ffmpeg -i 13.Luna\ y\ Venus\ en\ time\ lapse.\ 720p.mov  -acodec libfaac -ab 96k -vcodec libx264 -level 21 -refs 2 -b 1000k -bt 1000k -threads 0 -s 632x480 13.Luna\ y\ Venus\ en\ time\ lapse.\ 480p.mp4


...

14.\ El\ mar\,\ las\ olas.\ 720p.mov 

ffmpeg -i  14.\ El\ mar\,\ las\ olas.\ 720p.mov  -acodec libfaac -ab 96k -vcodec libx264 -level 21 -refs 2 -b 1000k -bt 1000k -threads 0 -s 632x480 14.\ El\ mar\,\ las\ olas.\ 480p.mp4

15.\ Pajaro\ carpintero\ Gigante.\ 720p.mov

ffmpeg -i 15.\ Pajaro\ carpintero\ Gigante.\ 720p.mov  -acodec libfaac -ab 96k -vcodec libx264 -level 21 -refs 2 -b 1000k -bt 1000k -threads 0 -s 632x480 15.\ Pajaro\ carpintero\ Gigante.\ 480p.mp4

WebM & OGV

13.Luna\ y\ Venus\ en\ time\ lapse.\ 720p.mov 

$ ffmpeg -i 13.Luna\ y\ Venus\ en\ time\ lapse.\ 720p.mov  -acodec libvorbis -ac 1 -ab 96k -ar 44100  -b 1000k -s 632x480 13.Luna\ y\ Venus\ en\ time\ lapse.\ 480p.ogv  && ffmpeg -i 13.Luna\ y\ Venus\ en\ time\ lapse.\ 720p.mov  -acodec libvorbis -ac 1 -ab 96k -ar 44100  -b 1000k -s 632x480 13.Luna\ y\ Venus\ en\ time\ lapse.\ 480p.webm

14.\ El\ mar\,\ las\ olas.\ 720p.mov 

$ ffmpeg -i 14.\ El\ mar\,\ las\ olas.\ 720p.mov  -acodec libvorbis -ac 1 -ab 96k -ar 44100  -b 1000k -s 632x480 14.\ El\ mar\,\ las\ olas.\ 480p.ogv  && ffmpeg -i 14.\ El\ mar\,\ las\ olas.\ 720p.mov  -acodec libvorbis -ac 1 -ab 96k -ar 44100  -b 1000k -s 632x480 14.\ El\ mar\,\ las\ olas.\ 480p.webm

15.\ Pajaro\ carpintero\ Gigante.\ 720p.mov

$ ffmpeg -i 15.\ Pajaro\ carpintero\ Gigante.\ 720p.mov  -acodec libvorbis -ac 1 -ab 96k -ar 44100  -b 1000k -s 632x480 15.\ Pajaro\ carpintero\ Gigante.\ 480.ogv  && ffmpeg -i 15.\ Pajaro\ carpintero\ Gigante.\ 720p.mov  -acodec libvorbis -ac 1 -ab 96k -ar 44100  -b 1000k -s 632x480 15.\ Pajaro\ carpintero\ Gigante.\ 480p.webm

YouTube HTML5 Video Player

Many YouTube videos will play using HTML5 in supported browsers. You can request that the HTML5 player be used if your browser doesn't use it by default.

If you encounter any problems, right-click on the player and choose "report playback issue", or let us know on the user support forums. Your feedback will help us continue to improve the player. What does this browser support?

Iceweasel

  • HTMLVideoElement [ ] H.264 [X] WebM VP8

  • Media Source Extensions [ ] MSE & H.264 [ ] MSE & WebM VP9