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:
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.
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: