Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
From the author of Simplicity

Simplicity

In order to use a plugin for playing back a video, the user would often have to use a cumbersome-looking amount of HTML code. Here’s an example of how the object element might be used to embed a Flash player with an MP4 video file to play:

<object type="application/x-shockwave-flash" data="player.swf?videoUrl=video.mp4&autoPlay=true"
 height="210" width="300">
   <param name="movie" value="player.swf?videoUrl=video.mp4&autoPlay=true"> 
</object>

In HTML5, this could be replaced with:

<video src="video.mp4" controls autoplay width="300" height="210"></video>

It is a lot cleaner and neater, and it's also much easier to understand what it actually does! As you can see, there's the introduction of the video element in order to specify that it's a video that is to be played. There is also a corresponding audio element, which can be used to embed an audio file.

The video and audio elements both accept a number of attributes that can be used to provide different functionality to the media in question. In the example above, the video is given a width and height, along with a default control set via the controls attribute (the browser decides what controls to supply and how they look) and to play automatically. These attributes are also accepted by the audio element, except for width and height that aren't relevant to audio.

A number of other attributes allow you to specify such things as whether the media is to be looped, muted, or how much of the media file is to be preloaded (to help save on bandwidth).

  • + Share This
  • 🔖 Save To Your Account