HOW TO: Make HTML video player!

Subject: HOW TO: Make HTML video player! Fri Oct 07, 2011 11:28 am

Things you'll need:

Part 1: Code the basics

Open up your notepad. (On windows: WIN+R, type in notepad)
If you already have an HTML page where you would like to JUST insert the video, open the file. If you don't, you can either type it now. You have to include this:

Code:

<html><body></body></html>
Save the file as video.htm (must end with .HTM or .HTML!).

Part 2: Prepare the video

Download Miro Video Converter (http://www.mirovideoconverter.com) and install it
Open your video and convert it to: Theora (OGG) AND MP4 Video.
This will guarantee support in: Internet Explorer 9.0 or newer; Mozilla Firefox 3.5 or newer; Google Chrome 3.0 or newer; Opera 10.50 and newer, Safari 3.1+ and some less used browsers.
Move the videos to the same folder as the HTML file is.

Part 3: Code the page

Open the HTML file once more, and add this to the BODY section:

Code:

<video width="30%" controls="controls" tabindex="0" poster="image.png" autolpay="autoplay" loop="loop">
<source src="VIDEO.ogv" type="video/ogg" />
<source src="VIDEO.mp4" type="video/mp4" />
Error - Can't play
</video>

Replace VIDEO with the actual video name!
You can change the text "Error - Can't play", which will be displayed if viewer's browser doesn't support HTML5 or video element or the video format.
WIDTH = will adjust the size of the video box. If you have HD footage, it'll look huge otherwise.
CONTROLS = shows Play/Stop etc., progress bar, mute...
TABINDEX = allows you to control the video (play/pause) with SPACE key on some browsers (doesn't work in Chrome, not even the latest version)
POSTER = adds a thumbnail until the video is played, ignored if AUTOPLAY is on.
AUTOPLAY = automatically plays the video as the page loads.
LOOP = loops the video once it finishes.
If you don't want any of these functions, just remove it.

Part 4: Watch and Share

TO SHARE:
- Register at any web host, such as 000Webhost, Horizon Host...
- Go to File Manager in the control panel
- Upload the image file (if you have "poster"), video files and HTML file. Make sure to upload them in Public_html!
- Then you can share the HTML link with anybody and they'll be able to view your video player!
TO VIEW:
- Make sure your browser supports HTML5, VIDEO element AND either format (all major browsers do).

Well done! You created your own video player! Very Happy

Subject: Re: HOW TO: Make HTML video player! Fri Oct 07, 2011 11:23 pm

Good Job DD! Very Happy

Subject: Re: HOW TO: Make HTML video player! Sat Oct 08, 2011 1:59 am

Thanks

Similar topics