Using the Video.js JavaScript library we can easily add video into our web page and do it in style. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles and manages the fallback to Flash or to other playback technologies.
This video clip overviews a simple code sample for using the Video.js library. The code sample uses the very same video that Video.js developers use in their demo for this library so the credit belongs to them.
<!DOCTYPE html>
<html>
<head>
<title>video.js sample</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>
<body>
<video id="ourvid" class="video-js vjs-default-skin"
width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"preload":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
<script type="text/javascript">
var player = videojs("ourvid");
player.ready(function(){
this.play();
} )
</script>
</body>
</html>
You can find the community version of the Video.js Basics course available for free personal usage at http://abelski.lifemichael.com.
