Tag Archives: embed html5 video to websites

How to create HTML5 videos and embed to websites

I embed a video to my website and it works well on PC when browsing with Firefox, IE, Chrome . But it does not show on my iPad and iPhone. What does cause the problem and how to fix it?

Many videos are shown through plug-ins(like flash), however different browsers may have different plug-ins. With the development of HTML5, HTML5 video is becoming the new  way to show videos online. iPad, iPhone, Android, all new browsers is compatible with HTML5 videos. HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

To embed a video to your website as a HTML5  video format, you need to convert the video to HTML video first. HTML5 video player is designed to convert any videos to HTML5 video formats.

Why should I convert videos to HTML video formats?

1. No plug-in is needed to view videos. Almost all popular browsers supports HTML5, so you do not need to install any plug-ins(such as Flash Player, SilverLight, QuickTime) to play videos in any browsers. Your videos will be displayed well on all popular browsers, like Chrome, Firefox, Safari, IE9, Opera, and etc.

2. HTML5 video is compatible with iOS, Andriod and Windows.  You do not need to worry that the videos do not play on your iPad, iPhone and Andriod devices. HTML5 is compatible well with iPhone, iPad, iPod, BlackBerry, Samsung, etc.

How to convert any videos to HTML5 video formats with HTML5 Video Player

1. Open HTML Video Player on your computer

2. Drag or add videos into the program

3. Choose a video player theme

4. Click Publish to convert the video to HTML5 video format

5. Open the output folder, you can see the generated 4 folders, 1 html page and 1 css file

create html5 videos

html video output folder

How to embed a HTML5 video to your website

1. Copy all generated files to your website directory.

1. Open the outputted html page(html5video.html) with text/page editor(like DreamWeaver), you can see the code as below.

2. Open your web page in Dreamweaver. Copy the first part(marked with yellow color) code and paste it to the head section of the page(ahead of </head>). Paste the second marked code to the body section of the page.

3. Save the page and preview your page, you can see the video on the page.

embed html video to website

embed html5 video to website

 Learn More about HTML5 Video Player>>