Skip to main content

Adding Video to Your Website

Before you add any video to your web page, it's important to understand that videos can take up a lot of web page space (file size) and bandwidth. Every time someone clicks to view the video they will be taking up some of your allocated bandwidth.

Be sure to check with your web host if you're not sure how much you are provided. If you're paying a monthly fee for web hosting, you could exceed your limits and be charged an extra fee if enough people view your video file.

Uploading the Video

First you must upload/save your video to your web server. You may want to create a folder called "video" and save it there. So the path to your video will be something like http://yoursite.com/video/movie.avi.

Embedding the Video

One thing you should keep in mind is that every web browser treats videos differently. What may work in one browser, may not work in another. So you should use both old and new HTML embed tags. (<object> and <embed>). See the sample code below:

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mpeg" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!-- Code For Older Browsers -->
<embed src="movie.mpeg" width="420" height="360"
autoplay="true"
controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>


* Be sure your width and height attributes match the size of your video. The variables above are just examples. You may want to add a few pixels to allow for the player controls.
* The movie.avi is the path to your movie file. You may have to edit the path if your movie is stored in a different folder. If you're not sure, use the complete path http://yoursite.com/video/movie.avi, for example.
* The controller attribute displays the video controls.
* The autoplay attribute tells the browser to play (or not play) the video when the page loads. True means it will play automatically, false means the user will need to click the Play button.
* The pluginspace tag will prompt the user to download quicktime if they do not already have it.

You'll have to modify the above HTML code slightly to fit your website's configuration.

Replace musicfile.wav with the name of the music file you chose to upload to your web server. The code above also assumes you've saved the file in the same location of your homepage (index.html). If you save the file inside a folder on your root then you'd have to change the path slightly.

Let's say you want to load the song on your homepage (page name is index.html). You save the song file to a folder called "music" located off your root/main directory. Then the code you insert in your index.html page would look like something this:

<embed src="/music/musicfile.wav" autostart="true" loop="false">

This is telling the browser to look for the song file at...
http://www.yoursite.com/music/musicfile.wav

If you're not comfortable with using relative paths in your code, then you can use the absolute (complete) path to your music file. For example, your code may look something like

<embed src="http://www.yoursite.com/music/musicfile.wav" autostart="true" loop="false" hidden="true">

Notice the full URL to the music file is listed in the code rather than starting with /music/....

Music File Attributes

After the path to your music file, you'll see a couple of attributes:

The autostart attribute tells the song file how to begin. If you have this set to "true", the song file will begin playing automatically when the page loads. If you put in "false", the sound file will not start automatically and the visitor will have to start the song by using their embedded media player.

The loop attribute tells the song how many times to play. If you have this set to "true" then it will play over and over again automatically. If you have it set to "false" it will play once and stop.

The hidden attribute tells the browser whether or not to hide the media player. It's not a good idea to leave this value at "true" unless you know for sure your visitors don't want to stop the music.

You don't want your music to annoy them to the point they leave because they can't figure out how to turn the music off.

Adjusting the Size of The Media Player

You can customize the look of the embedded/default media player on your visitor's PC by adding a width and height attribute to the code. Be careful as you adjust the size of the player because you can distort it.

<embed src="/music/musicfile.wav" autostart="true" loop="false" width="350" height="200">

Once you have your music file uploaded and coding inserted into your web page, your background music should play when your browser loads. Enjoy!

For Website Designing and Development
CSS Website Designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://www.2createawebsite.com/enhance/adding-video.html

Popular posts from this blog

Search Engine Optimization – How to Get the Best Rankings

Effective search engine optimization is absolutely crucial for any website proprietor that likes to boost their traffic. No issue how many promotion you location on other websites and in the press the best way to get a bigger number of exclusive tourists is through search engine rankings and online directories.The idea behind seo edinburgh is to make your world broad web falls as appealing as likely to the engine crawlers. You may have a attractively conceived website that comprises unbelievable images and a flawless layout for reading but this solely will not advance your search rankings, there are other components that are important.If you believe of the times when you use one of the foremost search engines you should inquire yourself how many distinct falls do you actually gaze through? It is rather uncommon for any individual to get to the fourth of fifth falls of the results. For creative search engine optimisation edinburgh your location desires to be on the very first page.There...

10 Tips on designing a fast loading web site

Seems to me like most web users (me included) are always in a hurry when browsing. Statistics show that, without a compelling reason, the average user will not wait for much more than 10 seconds for a page to load. So does that explain why your visitors seem to spend less than 5 seconds in your site? Probably your site is taking too long to load thus putting off visitors. As you design your site, loading time should always be a priority if your site is to be an effective business tool. Balancing usability and aesthetics is a delicate matter when creating a fast loading site. You can have a colourful website but takes ages to load while on the other hand you can design a simple site that loads faster than you can brink. Below are 10 tips and tricks that I have found very useful that you can use while designing your fast loading website. Read more: http://www.site-reference.com/articles/Website-Development/10-tips-to-creating-fast-loading-websites.html#ixzz0pmGVZEk6 1. Use images sparing...

VISIBONE HTML AND COLOR POPUPS

These handy popups by VisiBone will open a separate window to the left side of your screen for quick reference and will get out of your way and hide as soon as you click on another window screen, ready for when you need it next. Use these popups online, or download the Desktop Popup zip file below to use them offline. Big thanks to VisiBone for this wonderful free service mirrored here (with permission) for your convenience. We wholeheartedly recommends VisiBone's exceptional tools, well known in the design community . HTML Popup The HTML Popup by VisiBone is a tall skinny on-screen quick reference showing all HTML tags and attributes in use or universal. Included: color-coded indications of support by Netscape®, Microsoft® Internet Explorer and W3C®, style sheet alternatives, and bug and clash icons with details online. Read AT : http://websitetips.com/visibone/