intro | design 1 | design 2 | design 3 | tricks 1 | tricks 2 | images | tables 1 | tables 2 | templates | critiques | tools | linksstar| glossary | f. a. q. | quiz | tutorial 1 | tutorial 2 | video tutorialstar| form mail tutorialstar| angelfire tutorialstar| sound tutorialstar| news grps


learn html
design 1
design 2
design 3
tricks 1
tricks 2
images
tables 1
tables 2
templates
critiques
tools
links
glossary
f.a.q.
quiz
tutorial 1
tutorial 2
video tutorial
form mail tutorial
angelfire tutorial
sound tutorial


logo
logo

VIDEO Tutorial
Adding Video to your Webpages

web design This lesson will assume that you read Parts (1) and (2) and here we will show you Part (3) How to code your webpage to show the Video...

Part 3: How to code your webpage to show a Video to Windows OS PC's

moviesTo see one of our webpages with a Video on it, which uses BOTH a Direct Link, and a Link to a new page (opened in a Smaller Window)... goto Our Painting Spackle Page

Using your FTP Program, Upload your Video File to your Online Web Host Directory... Now you can simply LINK to your Video file in your HTML Coding, which will cause the user's browser to load a "Helper Application" like Windows Media Player or Real Player to play the Video, when they click the LINK on your webpage... just put a LINK on the page like this:

<a href="/path_to_your_myvideo.wmv">Play Video</a>

Or you can EMBED the video directly into your webpage, using HTML Code... but you should create a NEW webpage with the following HTML source code, and then use Javascript to open that page in a new SMALLER window on the original page! This will allow the user to view or not to view your Video, rather than forcing it to automatically play on the original page... in addition by EMBEDDING a Video like this... users who have no "Helper Application" or who have not configured the application correctly, or who have failed to Upgrade to the Latest Release of the application will be able to view your Video effortlessly... because the following code will automatically load the viewer for them... and the way it is written, it will work for most of the frequently used browsers... IE5.x, NN, Firefox, Mozilla, Opera etc.

Be sure to replace "/path_to_your_myvideo.wmv" with your own correct "path" ...

Notice the Height value has been increase from 240 to 310 pixels... this is to allow the "Controls" panel to show below the video... also there are other attributes that you can include in your code, but do NOT change these basic requirements... look HERE for more information

So finally you might ask... "How do I open this new page with this new HTML code on it in a NEW SMALL WINDOW using Javascript?" Here's the code to use for the LINK:

<a href="#" onclick="window.open
('/path_to_your_newpage.html','newWindow','toolbar=yes,
menubar=no,scrollbars=yes,resizable=yes,width=360,
height=360,left=0,top=0,
screenX=0,screenY=0')
;return false;">Play Video</a>

This concludes our Tutorial on Adding Video To A Webpage

Go Back to Parts 1 and 2 of this Tutorial

Have any Questions just...

ask a question

HTML Tutorial 2---Form Mail Tutorial