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.
Technically you should be using the HTML5 Doctype although the older doctypes seem to work.
<!DOCTYPE html>
<html>
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/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
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.
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.
| 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 |
Copyright ©
2013 Western Washington University : page updated
10.17.2012