Placing a Video in a Web Page

We like and recommend a free open-source HTML 5 video player for playing videos on the web. It's called video.js . We're currently recommending that you use the provided hosting, but we may be hosting it on campus if we still like it after our testing period.

Why are we recommending this? Their site says it best:

An HTML5 Video Player is a JavaScript library that builds a custom set of controls over top of the HTML5 video element to provide a consistent look between HTML5 browsers. Video.js builds on this by fixing many cross browser bugs or inconsistencies, adding new features that haven't been implemented by all browsers (like fullscreen and subtitles), as well as providing one consistent JavaScript API for both HTML5, Flash, and other playback technologies.

Demo - what it looks like

Overcoming Test Anxiety

How to Code

Doctype

Technically you should be using the HTML5 Doctype although the older doctypes seem to work.

<!DOCTYPE html>
<html>

Header

Add HTML shiv (first 3 lines for non-HTML5-compatible browsers) and two lines to call the video js stuff:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>

Body

Insert where you want video to show:
<figure>
  <video class="video-js vjs-default-skin" controls data-setup="{}" 
     width="360" height="240" preload="none">
  <source src="url-to-myfile.mp4" type="video/mp4" />
  </video>
  <figcaption>
     Your Caption Here
  </figcaption>
</figure>

Note that the correct values for the bolded code above will be determined by your individual video and how it was made. If you haven't made your video yet, read on to see some recommended sizes.

Making the Video

We recommend the MPEG 4 format (.mp4) as being lightweight and well-supported across the web. Playing .mp4 through HTML5 means that the browser will not need a special plug-in - a real advantage for your users.

Video.js also supports live streaming and Ogg if you need those.

You also need to think about the ideal size for the video. 16x9 is the new standard, but lots of 4x3 videos still exist. If your video already exists, use the size closest to how it was made. If it doesn't exist, you might plan it for use at one or more of the sizes in the chart below. Once you know the size of your video, just plug those pixel sizes into the bolded areas in the code above.

Recommended Video Sizes

Width px Height px (16x9) Height px (4x3)
Standard Sizes for (new) Western Template
220 (one column) 124 93
460 (two column) 259 194
700 (three column) 394 295
940 (four column) 529 397
"Standard" Video Sizes
426 240 180
640 360 270
854 480 360
1080 608 456
1280 720 540
1920 1080 810
Page Updated 03.24.2014