Video and audio in HTML5 is easy. The only real difficulty with HTML5 media used to be listing out alternate source formats for media (as different browsers supported different file formats). Nowadays, MP4 is ubiquitous across desktop and mobile platforms, making the inclusion of media in your web pages via HTML5 a breeze. Here's a 'simple as can be' example of how to link to a video file in your page:

<video src="myVideo.mp4"></video>

HTML5 allows a single <video></video> tag (or <audio></audio> for audio) to do all the heavy lifting. It's also possible to insert text between the opening and closing tag to inform users when there is a problem. There are also additional attributes you'd ordinarily want to add, such as the height and width. Let's add these in:

<video src="myVideo.mp4" width="640" height="480">What, do you mean you don't understand HTML5?</video>

Now, if we add the preceding code snippet into our page and look at it in Safari, it will appear but there will be no controls for playback. To get the default playback controls we need to add the controls attribute. We could also add the autoplay attribute (not recommended—it's common knowledge that everyone hates videos that auto-play). This is demonstrated in the following code snippet:

<video src="myVideo.mp4" width="640" height="480" controls autoplay> What, do you mean you don't understand HTML5?</video>

The result of the preceding code snippet is shown in the following screenshot:

Further attributes include preload to control pre-loading of media (early HTML5 adopters should note that preload replaces autobuffer), loop to repeat the video, and poster to define a poster frame for the video. This is useful if there's likely to be a delay in the video playing (or buffering is likely to take some time). To use an attribute, simply add it to the tag. Here's an example including all these attributes:

<video src="myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.png">What, do you mean you don't understand HTML5?</video>

<video width="640" height="480" controls preload="auto" loop poster="myVideoPoster.png">
    <source src="video/myVideo.mp4" type="video/mp4">  
    <object width="640" height="480" type="application/x-shockwave-flash" data="myFlashVideo.SWF">
      <param name="movie" value="myFlashVideo.swf" />
      <param name="flashvars" value="controlbar=over&amp;image=myVideoPoster.jpg&amp;file=myVideo.mp4" />
      <img src="myVideoPoster.png" width="640" height="480" alt="__TITLE__"
           title="No video playback capabilities, please download the video below" />
    </object>
    <p><b>Download Video:</b>
  MP4 Format:  <a href="myVideo.mp4">"MP4"</a>
    </p>
</video>

The <audio> tag works on the same principles with the same attributes (excluding width, height, and poster). The main difference between the two being the fact that <audio> has no playback area for visible content.