Someday ago, we have discussed how to get more views with HTML 5 video in previous post. Now, we are going to make this tutorial which tells how to build a HTML 5video blog.
Let’s suppose if you were individual who has some video to add on your WordPress blog or website; maybe it’s a video about your last travel, family gathering or birthday party. Or you were company that want to provide videos for customers; maybe it’s a company event, conference or teaching materials. Whatever it is, blogging video in HTML5 has lots of benefits:
Native video support: HTML5 videos can be built directly into supporting browsers, which enables publishers to deliver full-motion, high-quality video faster.
No plug-in restriction: because of the native browser support, video is not restricted by third party plug-in like Flash.
SEO friendly: HTML5 improves search engines’ understanding of the structure and content of a video. HTML tags like the “section” tag, which enables you to explain the topic of page sections, and the “nav” tag, by which a mobile device browser can make a link, help search engines more accurately categorize content and links.
Accessibility: for the obvious reasons Flash video makes you poop pants on mobile platforms; HTML5 video has a better experience on mobile devices like iPhone and iPad. So visitors can access to your video on both PC and mobile.
All right, let’s get started. This tutorial teaches you step by step.
Step one: apply for domain name
Well, maybe you have already got that; this step is for green hand. It is the eternal address for your blog; like http://www.sothinkmedia.com/blog/
Step two: prepare for a server or virtual host, upload WordPress via FTP
WordPress is the most popular blogging platform. I believe you have done that, too; if not, checkthis tutorial to download and install WordPress on your own server.
Step three: create video content, convert video to right formats
The argument around standard HTML5 video format has been ages; and there’s no final answer yet. Right now, three formats are supported by different browsers: OGG, MP4 and Webm. If your video is not those formats, you will need tools to convert video format. We recommend Video Converter Pro. It is an awesome little program to convert video to all HTML5 video formats at one click; and it generates HTML5 embedded code for web integration. Embed these codes to your blog and all visitors can enjoy your videos.
1. Download Video Converter Pro and install
2. Click “Add File” to import the video you want to convert
3. Choose an Encoding profile—HTML5 video all
4. Click “Convert” button to start HTML5 video convertion
5. Embed the code to your blog
After the conversion finished, an html file and three converted the videos will show up. Right click the html file to see the original code; you can embed the code to your blog.
Step four: embed HTML5 video player
You need a HTML5 video player to play videos. There are lots of HTML5 video player available on the web, which provide codes to embed on your blog directly. Let’s take Video.js as example, to get Video.js running on a web page, you just copy the following lines into HTML document:
In the <head>:
<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
<script src=”http://vjs.zencdn.net/c/video.js”></script>
In the <body>:
<video id=”my_video_1″ class=”video-js vjs-default-skin” controls
preload=”auto” width=”640″ height=”264″ poster=”my_video_poster.png”
data-setup=”{}”>
<source src=”my_video.mp4″ type=’video/mp4′>
<source src=”my_video.webm” type=’video/webm’>
</video>
preload=”auto” width=”640″ height=”264″ poster=”my_video_poster.png”
data-setup=”{}”>
<source src=”my_video.mp4″ type=’video/mp4′>
<source src=”my_video.webm” type=’video/webm’>
</video>
After finishing all these steps, a basic and simple HTML5 video blog is built. Thus, all visitors can watch your video no matter on PC or mobile devices.
Original post comes from: http://www.sothinkmedia.com/blog/tutorial-how-to-build-html5-video-blog/
