salisready/gist:1e0ae8b2d0a1c014c95a

## gistfile1.c

In the <head>:

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<style type="text/css">
  .vjs-default-skin { color: #eed1d1; }
  .vjs-default-skin .vjs-play-progress,
  .vjs-default-skin .vjs-volume-level { background-color: #64c2f5 }
  .vjs-default-skin .vjs-control-bar { font-size: 108% }
</style>
In the <body>:

<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
 data-setup="{}">
 <source src="MY_VIDEO.mp4" type='video/mp4'>
 <source src="MY_VIDEO.webm" type='video/webm'>
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
Video clip from Disney Nature's Oceans


cloud
For Designers
Style with the same CSS you know and love
Responsive design and retina displays supported
Built with font icons for easier customization
cloud
For Developers
Open Source and CDN hosted
Dead simple embed code using the video tag
JavaScript API that works everywhere
cloud
For Everyone
Free as in beer (gratis)
Crazy fast, less than 100k (jQuery not required)
Built by video experts at Brightcove & Zencoder
Sites using Video.js
BlueAngelstwitpicTellyVineThe OnionMITairbnbHubPages
What is Video.js?
HTML5 Video Player
Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video.

What's HTML5 Video?
HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a <video> tag, that's meant to allow web developers to add a video to a page in the same way they would add an image. In order for this to work, web browser developers have built video playback functionality into their browsers.

Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, and Silverlight. However, this is actually a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, based on open standards (not controlled by one company), and it will work everywhere. Additionally, HTML5 video can improve video performance by not requiring a second application (a plugin) to be running, and opens the door to creating interactions between video and other elements on the page that hasn't been possible before.

What's an HTML5 Video Player?

	In the <head>:

	<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
	<script src="http://vjs.zencdn.net/4.12/video.js"></script>
	<style type="text/css">
	.vjs-default-skin { color: #eed1d1; }
	.vjs-default-skin .vjs-play-progress,
	.vjs-default-skin .vjs-volume-level { background-color: #64c2f5 }
	.vjs-default-skin .vjs-control-bar { font-size: 108% }
	</style>
	In the <body>:

	<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
	preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
	data-setup="{}">
	<source src="MY_VIDEO.mp4" type='video/mp4'>
	<source src="MY_VIDEO.webm" type='video/webm'>
	<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
	</video>
	Video clip from Disney Nature's Oceans


	cloud
	For Designers
	Style with the same CSS you know and love
	Responsive design and retina displays supported
	Built with font icons for easier customization
	cloud
	For Developers
	Open Source and CDN hosted
	Dead simple embed code using the video tag
	JavaScript API that works everywhere
	cloud
	For Everyone
	Free as in beer (gratis)
	Crazy fast, less than 100k (jQuery not required)
	Built by video experts at Brightcove & Zencoder
	Sites using Video.js
	BlueAngelstwitpicTellyVineThe OnionMITairbnbHubPages
	What is Video.js?
	HTML5 Video Player
	Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video.

	What's HTML5 Video?
	HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a <video> tag, that's meant to allow web developers to add a video to a page in the same way they would add an image. In order for this to work, web browser developers have built video playback functionality into their browsers.

	Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, and Silverlight. However, this is actually a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, based on open standards (not controlled by one company), and it will work everywhere. Additionally, HTML5 video can improve video performance by not requiring a second application (a plugin) to be running, and opens the door to creating interactions between video and other elements on the page that hasn't been possible before.

	What's an HTML5 Video Player?