I recently added a video player to a client’s site. I found John Dyer’s MediaElement.js to be an excellent solution for doing this. As long as you provide both an h.264 and WebM encoded version of the video, it will play natively on almost all browsers. For unsupported browsers it will fall back to Flash.
The client’s videos were all wmv’s, so they would need to be converted to h.264 and WebM. Luckily John also provided some directions for encoding to these formats using FFmpeg:
http://johndyer.name/ffmpeg-settings-for-html5-codecs-h264mp4-theoraogg-vp8webm/
Unfortunately FFmpeg has changed since the commands were published, so some slight modifications were required. I also made some modifications so that the aspect ratio of the video was preserved and to encode the video at a lower bit rate and faster speed. As well, some of the videos being converted were really short, and would be finished before the 10 second mark that the thumbnail is created at. To solve this problem I modified the script to attempt to capture the thumbnail at the 1, 2, 3, 5 and 10 second mark – with each successful capture overwriting the last.
Here’s the updated batch file that I used:
REM mp4 (H.264 / AAC) "c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -vcodec libx264 -pix_fmt yuv420p -vprofile high -preset fast -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=trunc(oh*a/2)*2:480 -threads 0 -acodec libvo_aacenc -b:a 128k %1.mp4 REM webm (VP8 / Vorbis) "c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -vcodec libvpx -quality good -cpu-used 5 -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=trunc(oh*a/2)*2:480 -threads 0 -acodec libvorbis -f webm %1.webm REM jpeg (screenshot at 10 seconds, but just in case of a short video - take a screenshot earlier and overwrite) "c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 1 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg "c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 2 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg "c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 3 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg "c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 5 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg "c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 10 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg
I also created a seperate batch file that will iterate over all wmv’s in a given directory and run the encoder batch against each file:
for /r %1 %%i in (*.wmv) do "c:\program files\ffmpeg\CreateWebVideos.bat" %%i
Leave a Reply