IT Kraut

IT Kraut

How to put videos in the web

0.) Download and start Handbrake

Download Handbrake from the official source http://handbrake.fr and start it.

1.) open the source file

open the source file by clicking on "Source"

open file

2.) select target file and directory

select target file and directory by clicking on "Browse"

open file

3.) activate "Web Optimized"

select target file and directory by clicking on "Browse"

open file

4.) change the resolution to 360p

In the "Picture"-Tab lower the "Width" as long as the second number in "Display Size" shows 360. Write down the resolution, because you will need it later.

open file

5.) Decomb...

if your picture shows combing or mouse teeth (horizontal lines) try to set "Decomb" to "Bob" in the "Filters"-Tab

open file

6.) Set H.264, 850 kbps, variable bit rate and 2-pass-encoding

In the "Video"-Tab set "Video Codec" to "H.264", activate "Variable Bitrate", set the "Average Bitrate (kbps)" to "850" and activate "2-Pass-Encoding".

open file

7.) Set AAC, 128 kbps and Stereo

In the "Audio"-Tab set "Codec" to "AAC (faac)", "Bitrate" to "128" (kbps) and "Mixdown" to "Stereo".

open file

8.) Start Re-Encoding

Click on "Start" to re-encode the video and wait...

open file

10.) Check the video and make a Screenshot

Check the result video in VLC or a similar video player and make a screenshot of a significant part of the video by clicking on "Pause", "Video" and "Take a Screenshot".

vlc screenshot

11.) optimize the screenshot

optimize the screenshot as explained in the IT-Kraut How to put pictures in the web Guide.

12.) Upload the files

Upload the new video and the screenshot to the web server

13.) Insert the following HTML-Code in your website

Insert the following HTML-Code in your website and replace all underlined parts with the data of your actual video 

<object type="application/x-shockwave-flash" data="http://www.womex.com/virtual/mediaplayer/mediaplayer.swf" width="640" height="379"> <!-- put here the video heigt + 19px for the controls in -->
        <param name="codebase" value="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
        <param name="movie" value="http://www.womex.com/virtual/mediaplayer/mediaplayer.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="wmode" value="transparent">
        <param name="allowscriptaccess" value="always" />
        <param name="flashvars" value="height=360&amp;width=640&amp;file=http://www.it-kraut.de/guide/video/womex_trailer_2014_web_640x360.mp4&amp;displaywidth=640&amp;displayheight=360&amp;searchbar=false&amp;usefullscreen=true&amp;autostart=false&amp;autoscroll=true&amp;playlist=bottom&amp;playlistsize=0&amp;showicons=false&amp;image=http://www.it-kraut.de/guide/video/womex_trailer_2014_web_640x360.jpg">
        <video src="http://www.it-kraut.de/guide/video/womex_trailer_2014_web_640x360.mp4" width="640" height="320" controls>
        (Please install the Flash-PlugIn)
        </video>
        </object>

More

You can find a very good guide for HTML 5 Video here: http://diveintohtml5.info/video.html.