Tweet
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.
Here is the video tags I used:
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>
