How to work with HTML video

[Rss Bot 1]

Move over YouTube... with the <video> element and a little JavaScript, you can start to create your own video site. The video element is fairly straightforward to use, but the real power comes when you combine it with JavaScript, which gives you a high level of control over the player’s behaviour. 

In this tutorial, we cover the basic setup of a video, selecting files to play back, and generating thumbnails.

01. Create a basic page

Let’s start with an HTML page outline. We’ll need a simple div structure, some CSS for styling and, most critically, a script file. You’ll notice that the video tag is empty right now, so will do nothing when you load the page. However, we give it an id so we can control it with JavaScript.

02. Style the page

Next, we’ll start adding styling to the page. Before we try to do anything too clever, let’s start by adding basic styling to a couple of our div elements so things look a little more respectable.

03. Add more styling

Things become a little more interesting when we come to style the thumbnail-container div. We’re going to fill this with img elements, which will be thumbnails generated from our videos. Therefore, we want it to display a horizontal scrollbar if we have more thumbnails than it can show at once. We can do this using the overflow-x property.

04. Size the video player appropriately

There’s one more bit of styling we need to do. As it is, when we start playing videos, they’ll display at whatever their native resolution is. This isn’t going to look good on the page. Let’s style the video element to determine how big it should be. If we set its width and height to 100%, it’ll just fill its containing div.

05. Set up the script

It’s time to get down to the JavaScript. Let’s prepare a list of video files in an array for it to work with (we’ll hard-code for now, but you could try configuring it to retrieve via JSON from an HTTP service).

We’ll also define a couple of variables which we’ll use later on: ‘player’ will be the video element; ‘playerSource’ will be a newly created source element that will become a child of the player object later on, and point to source files. We’ll also plan to hook into a DOMContentLoaded event to make sure the script waits for the page to load before kicking into action.

Note that video playback in the browser relies on the presence of a codec that can read the video format you’re using. To ensure your video works cross-browser, the safest bet is MP4 files using the H.264 codec.

06. Generate a thumbnail

Next let’s create a function that will generate an image thumbnail from a video file. We want this to take in a video object and return an image object. Internally, the way we will achieve this is using HTML canvas.

07. Automatically generate thumbnails as videos are loaded

Now we can take the generateThumbnail function and use it on each of the video files in our list. Let’s do this by implementing the initialise() function. This function will add the playerSource object as a child of the video element, then iterate through every file in the list, load it into a temporary video object, and once loaded, generate a thumbnail and add it to the thumbnail container.

08. Add links to the thumbnails

There’s something missing, though. Our thumbnails show up in the container, but none of them are clickable. We need to wrap the images in an <a> element, which needs to execute some JavaScript when clicked. Let’s adjust the function hooked to the loadeddata event to create the links as well, instead of just img elements.

09. Play a video

Now we are generating thumbnails with clickable links, which are set up to invoke play(thumbSource.src), where thumbSource.src points to the filename of the relevant video file. All that remains is to implement the play function to set playerSource (which you’ll recall we linked to the video player element) to point to the correct file and kick off playback.

This article originally appeared in issue 266 of Web Designer, the creative web design magazine – offering expert tutorials, cutting-edge trends and free resources. Buy issue 266 here or subscribe to Web Designer here.

Related articles:

• How to power up your menus with CSS animation
• 16 amazing HTML examples
• 9 of the best resources for learning HTML and CSS

View the full article