RadiantEclipseForums II
Hello, Guest! Very Happy Welcome To RadiantEclipseForums, If You Haven't Already Please Register Smile



 
HomeFAQSearchMemberlistUsergroupsRegisterLog in
REF Now Has A Twitter And A Facebook Fan Page! Go Follow @RadiantEForums, And Like RadiantEclipseForums on Facebook!

Share | 
 

 HOW TO: Make HTML video player!

View previous topic View next topic Go down 
AuthorMessage
Dumbledore27
Admin
Admin
avatar

Posts : 337
Points : 6081
Reputation : 13
Join date : 2011-10-01
Age : 18
Location : In a dictionary, under 'A'.

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

Things you'll need:
  • Notepad
  • Video
  • Web browser


Part 1: Code the basics
  1. Open up your notepad. (On windows: WIN+R, type in notepad)
  2. 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>
  3. Save the file as video.htm (must end with .HTM or .HTML!).


Part 2: Prepare the video
  1. Download Miro Video Converter (http://www.mirovideoconverter.com) and install it
  2. 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.
  3. Move the videos to the same folder as the HTML file is.


Part 3: Code the page
  1. 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.
  2. WIDTH = will adjust the size of the video box. If you have HD footage, it'll look huge otherwise.
  3. CONTROLS = shows Play/Stop etc., progress bar, mute...
  4. 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)
  5. POSTER = adds a thumbnail until the video is played, ignored if AUTOPLAY is on.
  6. AUTOPLAY = automatically plays the video as the page loads.
  7. LOOP = loops the video once it finishes.
  8. If you don't want any of these functions, just remove it. Wink


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

________________________
SUPPORT ME:



MyVocabtionary, the best PHP program
Back to top Go down
View user profile http://www.myvocabtionary.co.cc
Fiction
Founder
Founder
avatar

Posts : 903
Points : 2147483647
Reputation : 36
Join date : 2011-10-01
Age : 20
Location : A Place of Hope And No Pain

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

Good Job DD! Very Happy

________________________


Back to top Go down
View user profile http://radianteclipseforums.forumotion.co
Dumbledore27
Admin
Admin
avatar

Posts : 337
Points : 6081
Reputation : 13
Join date : 2011-10-01
Age : 18
Location : In a dictionary, under 'A'.

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

Fiction wrote:
Good Job DD! Very Happy
Thanks Smile

________________________
SUPPORT ME:



MyVocabtionary, the best PHP program
Back to top Go down
View user profile http://www.myvocabtionary.co.cc
Sponsored content




PostSubject: Re: HOW TO: Make HTML video player!   

Back to top Go down
 

HOW TO: Make HTML video player!

View previous topic View next topic Back to top 

 Similar topics

-
» Youtube HTML 5 player
» CBC Vs. TSN: Hockey Fight in Canada
» VIDEO SHOWING HOW TO FILLET DIFFERENT SPECIES OF FISH
» McDonald's Mini player commercials
» FCUM live streaming video
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
RadiantEclipseForums II :: Other :: How To-
Forumotion.com | © phpBB | Free forum support | Contact | Report an abuse | Free forum