Autoplay videos with three lines of HTML

I was mindlessly browsing the internet this evening, reading about smart watches on istartedsomething. A few pages into the post, a video was already playing as I scrolled down the page. I couldn’t see any Youtube or Vimeo branding, or any controls, so I assumed it was a GIF.

But it seemed too high-quality to be a GIF. Right-clicking the video showed otherwise – it was a proper video! This isn’t a product of the GIF and Flash internet we are accustomed to, but an example of HTML5 spotted in action.

I dug into the source code and found that the author was using the video tag. Reading up about the video tag on w3schools, the video tag is remarkably easy to use. It’s just a few lines of HTML, typed straight into an HTML file, no plugins or fuss necessary.

HTML video tag

Here is the source code you need to add a video to a web page:

<video autoplay loop muted>
<source type="video/mp4" src="http://james-ramsden.com/downloads/videos/smart-form-relax.mp4">
</video>

…and this is the output:

Useful video tags

The source code above is split into three lines, where we can define how the video plays. The first line must start with ‘video’. But after that, we can string together a list of terms to customise how it plays.

• autoplay
• loop
• controls
• muted
• height=”640px”
• height=”480px”
• poster=”image.jpg” (image to show if the video isn’t loaded)

The second line defines the video location. Currently, the type can be ‘video/mp4’, ‘video/webm’ or ‘video/ogg’.

You can specify a start and end time within the source, for example:

src="http://james-ramsden.com/downloads/videos/smart-form-relax.mp4#t=10,11"

Will play the video between 10 and 11 seconds.

References

• http://www.w3schools.com/html/html5_video.asp

for the very basics

• http://www.html5rocks.com/en/tutorials/video/basics/

for a good introduction to the range of tags and formatting on video elements you can use

• http://diveintohtml5.info/video.html Long-form tutorial on HTML5 video