HTML Video and Audio

HTML can also be used to add video and audio files to your webpage

HTML Video

Videos can be easily hosted online embedded into your web pages using html with the <video> tag to display your media file. It works in a similar way to the image tag in that a 'src' attribute must be defined in order for the video file to be located. However with video and audio files the player details as well as the file details need to be specified. Here is a look at a sample,

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"></video>

Lets explain the above video code a little more...

• The video element specifies that a video player is needed
• The controls attribute adds video controls, like play, pause, and volume.
• It is a good idea to always include width and height attributes for quicker loading. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.
• The <source> element along with the src attribute locates the file and specifies the file type.
• Currently .mp4 video files are the only file type supported across all browsers.

Something to consider...

Videos are large files and hosting your videos directly on your own website hosting space will take up a lot of space so if you have a lot of videos a good idea would be to consider hosting them on an external video hosting websites. YouTube and Vimeo are excellent places to host your videos, you can then use the embed code that they provide you to place the video on your website.

HTML Audio:

Like videos and images there are many audio file types. MP3 files are the only audio files that are currently supported across all browsers.The <audio> tag works in a very similar way to the <video> tag shown above.

Here is a sample piece of HTML code for adding an audio file to your page...

<audio controls> <source src="horse.mp3" type="audio/mpeg"></audio>

Lets explain the above audio code a little more...

• The video element specifies that a video player is needed
• The controls attribute adds video controls, like play, pause, and volume.
• It is a good idea to always include width and height attributes for quicker loading. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.
• The <source> element along with the src attribute locates the file and specifies the file type.
• Currently .mp3 video files are the only file type supported across all browsers.

HTML Audio/Video Properties

• audioTracks Returns an AudioTrackList object representing available audio tracks
• autoplay Sets or returns whether the audio/video should start playing as soon as it is loaded
• buffered Returns a TimeRanges object representing the buffered parts of the audio/video
• controller Returns the MediaController object representing the current media controller of the audio/video
• controls Sets or returns whether the audio/video should display controls (like play/pause etc.)
• crossOrigin Sets or returns the CORS settings of the audio/video
• currentSrc Returns the URL of the current audio/video
• currentTime Sets or returns the current playback position in the audio/video (in seconds)
• defaultMuted Sets or returns whether the audio/video should be muted by default
• defaultPlaybackRate Sets or returns the default speed of the audio/video playback
• duration Returns the length of the current audio/video (in seconds)
• ended Returns whether the playback of the audio/video has ended or not
• error Returns a MediaError object representing the error state of the audio/video
• loop Sets or returns whether the audio/video should start over again when finished
• mediaGroup Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements)
• muted Sets or returns whether the audio/video is muted or not
• networkState Returns the current network state of the audio/video
• paused Returns whether the audio/video is paused or not
• playbackRate Sets or returns the speed of the audio/video playback
• played Returns a TimeRanges object representing the played parts of the audio/video
• preload Sets or returns whether the audio/video should be loaded when the page loads
• readyState Returns the current ready state of the audio/video
• seekable Returns a TimeRanges object representing the seekable parts of the audio/video
• seeking Returns whether the user is currently seeking in the audio/video
• src Sets or returns the current source of the audio/video element
• startDate Returns a Date object representing the current time offset
• textTracks Returns a TextTrackList object representing the available text tracks
• videoTracks Returns a VideoTrackList object representing the available video tracks
• volume Sets or returns the volume of the audio/video

Next Up

The last part of our 10 steps to learning HTML is a treat. We provide you with all the web design resources you will need to take you from HTML novice to industry ready web developer.