The HTML Video Element

HTML5 VIDEO WHAT?

What is the simplest way you can add a video to a web page?

Drum roll please... It's the HTML5 <video> element.

HTML5 is the most recent standard for HTML documents. A specification for writing HTML markup that everyone agrees on, and that web browsers like Chrome, Firefox, Safari, etc agree to implement.

HTML5 includes elements that you've learned about like <p>, <h1>, <ul>, <body>, <div>, <script>, <iframe>, and friends.

And the best and greatest of all HTML5 elements. The <video> element.

<video src="myvideo.mp4" controls></video>

The 'src' attribute of the video tag points to the location of your video file.

If you are running a page locally, the file path can be local, like "/Downloads/myfile.mp4"

Or it can be on a server like "https://cdn.host.com/file/asdf.mp4"

Press the 'command' + 'option' + 'U' keys to see the HTML source code for this next video... You can have other attributes along with 'src' too. Here you can see 'preload' is set to 'metadata', we've set a height, the 'controls' attribute is included, and the 'src' attribute points to an mp4 file...

The <video> element accepts a variety of cool attributes.

Here's a partial list pulled from from https://html.spec.whatwg.org/#video

  • src -- Address of the resource
  • poster -- A poster frame to show prior to video playback
  • preload -- Hints how much buffering the media resource will likely need
  • autoplay -- Hint that the media resource can be started automatically when the page is loaded
  • loop -- Whether to loop the media resource
  • muted -- Whether to mute the media resource by default
  • controls -- Show user agent controls
  • width -- Horizontal dimension
  • height -- Vertical dimension

Like other HTML elements you can also add styling to your video element.

In this next video we've added some general style properties like a 'border' and 'border-radius' to fancy up our video.

Why do you think the second video is not visible when the page is loaded?

Where do the styles on the playbar come from?

How could you implement your own play button for the video?

How does this video look in Firefox and in Safari?

What is the 'id' attribute?

MAKING A PLAY BUTTON

Browsers provide some APIs for interacting with the <video> element, like play() pause() etc.

w3c demo: https://www.w3.org/2010/05/video/mediaevents.html

Press 'command' + 'option' + 'I' to open your developer tab in Chrome, and click on the console tab. Copy these Javascript lines and run them one at a time in the console...
var videoElement = document.getElementById("hermit_crab_video"); videoElement.play(); videoElement.pause();

What is document.getElementById()?

Here we have a button with the id 'my_play_button'

Run these lines in the console to add an event listener to your button that plays the video. Javascript can also be included via a <script> tag so that it's run each time the HTML document is loaded. Here we're calling it line by line...
var playButton = document.getElementById("my_play_button"); var customPlayer = document.getElementById("my_video_player"); playButton.addEventListener("click", function(){ videoElement.play(); });

Try clicking your newly activated play button

Why is there an error? How do we fix it?

Also check out:

  1. http://www.w3schools.com/html/html5_video.asp
  2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
  3. https://www.w3.org/2010/05/video/mediaevents.html

What about HLS?

In Safari a basic video element is pretty similar because Safari will play a .m3u8 file

<video src="http://fast.wistia.net/embed/medias/nef6al6lyf.m3u8" width="400"></video>

In Chrome, IE, Firefox it gets a little more complicated. We use an open source library called HLS.js

HLS basics and troubleshooting methods are a topic for another day soon