PVII Page Helpers: Insert Responsive HTML5 Video

Adding a responsive HTML5 Video to your web page

An HTML5 video is an MP4 video streamed from your server to your web page. To serve a video file, your server must be set up to support the MP4 file type. Most modern servers are set up for it by default, but you might want to check with your server administrator if you experience errors.

Tip: MP4 support is added to an htaccess file for a Unix server and through IIS on a Windows server.

Insert an HTML5 video on your page

Right-click on your page where you want the video to appear and choose PVII HTML Toolkit > HTML5 Video...

The UI will open.

Browse to the Video File in your your local Dreamweaver site.

Browse to the Poster Image in your local Dreamweaver site.

Note: The Poster Image is what appears before you click the play button. It is also what appears in very old browsers that do not support HTML5 videos. The easiest way to make a poster image is to view your video in a browser. When you get to a frame you like, pause the video and take a screen capture. Paste the capture into an image editor (Fireworks or Photoshop) and optimize it, making it the same aspect ratio of your video.

Note: For the handful of users who need to support IE8, your best solution is to put your video on YouTube.

Set Player and Styling options, and a User Class (if you'd like).

Click OK.

A responsive HTML Video will appear in your page when the page is viewed in a browser.

Closing thoughts

In our opinion, HTML5 video is the way forward. The biggest drawbacks are bandwidth and video composition. Let's discuss those quickly.

1. Bandwidth

It wasn't too long ago that the web design community was concerned about accommodating visitors on dial-up connections. Broadband was a luxury and its availability outside major urban centers, sporadic. Broadband is now nearly ubiquitous and much broader and faster. And we believe that in the very near future, mobile bandwidth will grow exponentially in speed while dropping precipitously in price. This is why we've created our first tool for embedding self-served HTML5 video.

Bandwidth: streaming

The website hosting an HTML5 video uses native HTTP to directly stream the video to viewers. The <video> tag is part of the HTML code, and creates a native HTML5 video player within your browser to house player controls. The video tag provide direction to the HTTP protocol as to what to do with the content inside. The most important thing to know is that modern servers know what to do with an HTML5 video. They know to stream it in real-time. What this means is that your visitors do not need to download the entire video in order to view it. In other words, HTML5 video is no less efficient than a YouTube video. If your server supports MP4 videos and there are no constraints over bandwidth usage, HTML5 video is to be embraced, rather than feared.

2. Video composition

If you do not have access to a video editing department, you will need a proper video editing tool. There are many choices, including Adobe Premiere, Premiere Elements, Camtasia Studio, Final Cut, and for occasional work, modern Mac and Windows computers come with free video editing apps.

You might have read older articles on HTML5 video recommending several different file types to server HTML5 video to different devices. While that may have true in 2012, it is not necessary today. All you need is an MP4 file, which are supported in all current major browsers and devices.