CS651Including Sound or Video in your Webpage
You can include media in the two recommended ways below. There are also some browser-specific ways that we wont discuss. Also, be aware that the common formats supported by most browsers without downloading additional helper application software for sound is either: wav or au and for movies is: mpeg, avi, quicktime. Ofcourse many people have applications to assist with realaudio/realvideo, mp3, midi and other formats.
- As a Hyper-text link: The user must click on the link for the media to start playing
- Video (since HTML 5)
<html>
<body>
<video controls="controls" autoplay="autoplay">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
NOTE:
- Ogg = Ogg files with Theora video codec and Vorbis audio codec
- MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
- WebM = WebM files with VP8 video codec and Vorbis audio codec
link - Audio tag (new since HTML 5)
<audio src="song.mp3" controls="controls">
</audio>NOTE: supports mp3, wav and ogg formats
- Another (prior to HTML 5) option: Embedded, that embeds the media player directly into the web-page::
<embed src="file.wav" width=0 heigth=0> </embed>
<embed src="file.avi" width=300 height=300> </embed>
An example:
- width, height, are in pixels and represent the size of the player to be visible
- another option is Autostart=true this will start playing of the media when page including it is first loaded.
- another option is Border=X where X is the pixel size of the border around the media player
- another option is Loop=true this will cause the media to continually play in a loop mode.
<a href="file.wav">Click here to play Sound File</a>
<a href="file.mpeg"> Click here to play Movie</a>
An example: Click here to play welcome