In this post, I’d like to show how you can use Video Converter App as an HTML5 video converter and create HTML5 video ready to be uploaded to your website. I am going to take the Windows version as an example.
1. Download and install Video Converter App for Windows
2. Launch Video Converter App. Click the “Add Video” button to load video files from your computer hard drive.
3. In top right, you will be able to preview the imported video files. Click the “Play” button to preview it. You can also cut the unwanted part off the video by setting the Start time and Stop time. Learn more about how to trim video.
4. Click the “Profile” drop-down menu and choose “HTML5 Web Video” from the category. Then, you need to choose “Theora Ogg Video”, “HTML5 WebM Video”, and “HTML5 MP4 Video” respectively and convert your video files for three times. That’s to say, you need to generate three output files (in Ogg/WebM/MP4 format) for each input video file.
5. Click the “Start Encode” button to start to convert video to HTML5 video.
6. Click the “Folder” button to locate the output .ogg, .webm, and .mp4 files.
7. Upload the output files to your website.
8. Now you can copy and paste the following code into where you want the video to be displayed.
Then copy and paste the following code into where you want the video to be displayed.
<video poster=”movie.jpg” controls>
<source src=”movie.webm” type=’video/webm; codecs=”vp8.0, vorbis”‘/>
<source src=”movie.ogv” type=’video/ogg; codecs=”theora, vorbis”‘/>
<source src=”movie.mp4″ type=’video/mp4; codecs=”avc1.4D401E, mp4a.40.2″‘/>
You will need to replace movie.jpg with the video thumbnail and movie.webm, movie.ogv, movie.mp4 with the uploaded HTML5 video files. It is exceedingly important to make the file directory totally correct.
Note: If you want to get it done in an easier way, you can simply download HTML5 Video Player to help you quickly create an HTML5 video player for your website or blog.