How to create an HD video player or gallery

This tutorial will guide you how to create an HD video player or gallery with HTML5 Gallery script.

Before following this tutorial, please read the quick installation guide of HTML5 Gallery and understand how it works and how you can add it to your webpage: Quick Start Guide.

To add a video to the gallery, use href tag for mp4/m4v video file.

To add a high quality mp4/m4v video file, use data tag data-hd.

To add a webm video for Firefox HTML5 player, you can use tag data-webm. To add a high quality webm video, use data tag data-hdwebm. If webm video are not provided, it will use Flash player to play mp4/m4v file in Firefox.

To add a poster image, you can use tag data-poster.

For example, the following codes will add an HD video player:

<div class="html5gallery" data-width="480" data-height="270" data-hddefault="true"  style="display:none;">
    <a href="Big_Buck_Bunny_1.m4v" 
			data-hd="Big_Buck_Bunny_1_hd.m4v"  
			data-webm="images/Big_Buck_Bunny_1.webm"
			data-hdwebm="images/Big_Buck_Bunny_1_hd.webm"
			data-poster="Big_Buck_Bunny_1_1024.jpg">
		<img src="images/Big_Buck_Bunny_1.jpg" alt="Big Buck Bunny 1"></a>
</div>

The normal quality video will be played as default. To configure the HD video as default, add a data tag data-hddefault="true" to the gallery div.

For Firefox, Chrome, Safari, iPhone, iPad and Android, HTML5 Gallery will use a customized HTML5 video player control bar which has a built-in HD switching button.

To switch the video quality outside of the gallery or with your own button, you can use the provided API.

html5GalleryObjects.setHd(galleryId, isHd, switching);

html5GalleryObjects is a global variable created by HTML Gallery script. The first parameter is the id of the gallery. If there is only one gallery in the current webpage, the value is 0. If the second parameter is true, set the video player to high quality, if it's false, set to normal quality. The third parameter specifies whether to switch the video immediately. If it's false, the quality will be changed in the next video playing.

Here is a demo of an HD video player:

Switch to Normal

Switch to HD