Flux RSS des billets

DotMG's joblog

Work hard at whatever you do! (Ecc. 9. 10a)
How to use his own video using HTML5
Publié le 31 Jan 2013, 10:44 pm dans html

In my last post, I experimented serving a video file using my very own hosting, using HTML5 technology. It was not flawless, so I better note the steps I did, I may need this soon.

The first step was recording the video and copy it to my hard disk. Then, it needed to be re-encoded. But to optimize the resources, I also needed to remove leading and trailing sequences, and crop the video to the rectangle that is of interest. The interesting sequence was starting at second 21 of the original video, and lasted for 23 seconds. -ss 21 -t 23. I also removed 220 pixels from left and right, and 30px/50px from top/bottom. -croptop 30 -cropbottom 50 -cropleft 220 -cropright 220 . The extracted video now have a new aspect ratio. I didn't bother to calculate the absolutely correct value, but -aspect 3:5 gave an acceptable ratio. Then I generated three formats : ogv, webm and mp4. I found the vcodec and acodec parameters to use on Stackoverflow.

ffmpeg -i bootani.MOD -ss 21 -t 23 -b 250k -vcodec libtheora -acodec libvorbis 
  -ab 160000 -g 30 -croptop 30 -cropbottom 50 -cropleft 220 -cropright 220 -aspect 3:5 bootani.ogv

The easiest and coolest part is the use of <video> tag to attach the video.

<video id="video" height="500" width="300" preload="false" autobuffer="true" controls="true">
<source src="/media/bootani.webm" type="video/webm"></source>
<source src="/media/bootani.ogv" type="video/ogg"></source>
<source src="/media/bootani.mp4" type="video/mp4"></source>
</video>
Les commentaires sont fermés pour ce billet.