Tutorial—How to Build HTML5 Video Blog | Sothink Media Blog

Tutorial—How to Build HTML5 Video Blog | Sothink Media Blog

Wuhan : China | Apr 26, 2012 at 8:16 PM PDT
Views: Pending
Embed HTML5 Video for iPad

In the last post, we discuss how to maximize views with HTML5 video; today, we are going to share a tutorial about how to build a HTML5 video 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, check this 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”


<source src=”my_video.mp4″ type=’video/mp4′>

<source src=”my_video.webm” type=’video/webm’>


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.

Related posts:

  1. Maximize Video View-Build HTML5 Video Blog
  2. HTML5 Video Converter is Coming
  3. What is HTML5 Video Like?
  4. The Things You Need to Know about HTML5 Video Formats
  5. How to Download HTML5 Video from Internet? (1)
1 of 11
video tag on planet
video tag on planet
From: Christopher Blizzard
sothinkmedia is based in Wuhan, Hubei, China, and is a Reporter on Allvoices.
Report Credibility
  • Clear
  • Share:
  • Share
  • Clear
  • Clear
  • Clear
  • Clear

News Stories






More From Allvoices

Report Your News Got a similar story?
Add it to the network!

Or add related content to this report

Use of this site is governed by our Terms of Use Agreement and Privacy Policy.

© Allvoices, Inc. 2008-2014. All rights reserved. Powered by PulsePoint.