Showing posts with label HTML5 Video. Show all posts
Showing posts with label HTML5 Video. Show all posts

Thursday, January 12, 2012

HTML5 video using Video.js



HTML5 Video Player

Now you can embed HTML5 videos in your website/blogs using the new video.js (http://videojs.com/) javascript+CSS library. Video.js is the also known as the HTML5 video makes it easier to make and build HTML5 videos. Always wanted to change the skin of the video player? Now you can do that with video.js skin controls.
Features:
Open Source & CDN Hosted
Video.js is an open source project, which allows everyone to dig into the code and contribute updates. Level3 hosts the project on their CDN for free which means:

Quick and painless setup. No downloads required. The files are delivered quickly and may already be cached. Your player software stays up-to-date as new devices are supported.

Same video with Youtube skin


Here is the video tags I used:


<div>
 <video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="640" height="400" poster="http://video.ch9.ms/ch9/bfbb/7cec4b73-5240-450d-94d1-9fd00115bfbb/VSToolbox23_512_ch9.jpg"
  data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
  <source src="http://video.ch9.ms/ch9/bfbb/7cec4b73-5240-450d-94d1-9fd00115bfbb/VSToolbox23_med_ch9.mp4" type='video/mp4'>
  <source src="http://video.ch9.ms/ch9/bfbb/7cec4b73-5240-450d-94d1-9fd00115bfbb/VSToolbox23_ch9.webm" type='video/webm'>
</video>
</div>
 
<h3> Same video with Youtube skin</h3>
 
<div>
 <video id="Video1" class="video-js tubecss" 
  preload="auto" width="640" height="400" poster="http://video.ch9.ms/ch9/bfbb/7cec4b73-5240-450d-94d1-9fd00115bfbb/VSToolbox23_512_ch9.jpg"
  data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
  <source src="http://video.ch9.ms/ch9/bfbb/7cec4b73-5240-450d-94d1-9fd00115bfbb/VSToolbox23_med_ch9.mp4" type='video/mp4'>
  <source src="http://video.ch9.ms/ch9/bfbb/7cec4b73-5240-450d-94d1-9fd00115bfbb/VSToolbox23_ch9.webm" type='video/webm'>
</video>
</div>

Refer to video.js and css in the head tag:
<head>
    <title>HTML5 Video using video.js</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="http://vjs.zencdn.net/c/video-js.css" type="text/css">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
    <link rel="stylesheet" href="http://videojs.com/css/tube-css/tube.css">
    <script src="http://videojs.com/js/libs/modernizr-2.0.6.min.js"></script>
</head>