Three Steps to Insert the HTML5 Video Player to Your Web Page

1. Unzip the downloaded file, copy or upload the folder html5gallery to your web server

2. Reference the file jquery.js and html5gallery.js which is in the folder html5gallery before the </head> of your web page. If you already have a jQuery script in your web page, you need to add html5gallery.js after your jQuery file. The minimum required version of jQuery is 1.6.

    <script type="text/javascript" src="html5gallery/jquery.js"></script>
    <script type="text/javascript" src="html5gallery/html5gallery.js"></script>

3. Add a div with class html5gallery to your web page where you want to display the Video Player. Define the size of the Player with HTML5 tag data-width and data-height. Define video file address with tag data-src, define video title with tag data-title. You can also define an alternative WebM or Ogg video for Firefox with data tag data-webm or data-ogg.

    <div class="html5gallery" data-html5player="true" data-width="480" data-height="272" data-src="images/Big_Buck_Bunny.mp4" data-webm="images/Big_Buck_Bunny.webm" data-title="Big Buck Bunny">

4. For more options, view