HTML Tutorial 007 - Audio and Videos
Other Tutorial Options:
 |
Videos are very popular on the internet, especially with all of the video hosting and
viewing sites out there anyone can get their videos on the internet and just use the provided
embed code to put into their site. The only issue with that is you website gets bombarded
with watermarks from the video hosing site’s logo (YouTube is one of them). Now you can embed
video and audio with out the logos and horrible video quality.
There are currently two ways you can put videos onto your website. The first is to use the
<embed> tags and the second is to use the new <video> tag. However, I do not use the
video tag because it is not supported in many web browsers yet. We can use one of my videos
to test this out. Open up your HTML page in your text editor and your web browser if you haven’t
already. Below is the coding I have so far:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<embed />
</body>
</html>
As you can see I have added the embed tags. The embed tags work just like the <img /> tag. In order for the video to work we must add the source attribute: src=””. Let’s put a video into our HTML page.
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<embed src="http://www.darkscarab.com/animations/videos/martian.wmv" />
</body>
</html>
Save your file and open it up in your web browser (or refresh if it is already opened).
Whether or not you typed in the URL correctly you should see the video player in your browser.
If the video works you should see it loading and playing. If it doesn’t work make sure the URL
is correct. There are also many attributes you can add to your video.
The first two are the height and width attributes. These attribute are used just like in
the other tutorials. They are there to define the width of your video. In this case though,
you must use both attributes if you want the video player to keep the same aspect ratio. Other
attributes include the autostart (Use autoplay if you are using Quicktime) and loop attributes.
These are defined by true or false. All of these attributes have been used in the coding below.
<embed src="http://www.darkscarab.com/animations/videos/martian.wmv" width="600px" height="600px" autostart="false" loop="true"/>
The default for autostart is typically “true” and loop is typically “false”. You can also use the <object> tags to insert videos into your page as well. However, much more coding must be used and, to me, it seems very impractical. Here is what our video with the same settings as above would look like with the object tags, just so you know:
<object type="video/x-ms-wmv" data="http://www.darkscarab.com/animations/videos/martian.wmv" width="600px" height="600px">
<param name="src" value="http://www.darkscarab.com/animations/videos/martian.wmv">
<param name="autoStart" value="false">
</object>
For object tags, the type value has to be very specific and if it is wrong nothing will
show up in your page. This is known as the MIME media type. There are an infinant amount
param names to use as well. Also, the object tags are not limited to videos. You can put nearly
any type of file you can think of in your HTML page with the object tags. We can go over the
object tags more in another tutorial.
Now that you know how to put videos into your web pages you also know how to put audio into
your HTML page as well. For audio you would just put in the source for your audio rather than
your video. Usually an audio file will appear on your screen similar to the video except for the
fact that there is no image. If you are using a windows media audio file you will have a blank
video screen unless you set the height of the video to only show the controls. If you are using
an mp3 or wav audio file it will automatically only show the controls. However, some people
want their music to play in the background, without any controls. For this we use the hidden
attribute:
<embed src="http://www.darkscarab.com/backinblack.wma" width="600px" hidden="true"/>
*Note that the above URL does not exist, it is just there to show you what it would look like.
When you set your audio to be hidden, you cannot control anything. So if you have autostart
set to false then you will not be able to start the clip. Also if you do not loop the audio clip,
your audio will not start again when it is finished so if you want the sound to continue as long
as someone is on your page use the loop attribute.
Also, it is possible to use the Object tags to put your audio onto your page just as we did
above with the video. Here is what it would look like:
<object type="video/x-ms-wma" data="http://www.darkscarab.com/backinblack.wma" width="600px">
<param name="src" value="http://www.darkscarab.com/backinblack.wma">
<param name="hidden" value="false">
</object>
Well, that’s all there really is to putting media onto your webpage. Personally I would stick to using the embed tags. They are much easier to use and have less coding in them.
|
|
 |