Video js Html5 player along with resolution selector plugin download.

As you know Video js is the open source HTML5 video player


For Designers

  • Style with the same CSS you know and love
  • Responsive design and retina displays supported
  • Built with font icons for easier customization

For Developers

  • Open Source and CDN hosted
  • Dead simple embed code using the video tag
  • JavaScript API that works everywhere

For Everyone

  • Free as in beer (gratis)
  • Crazy fast, less than 100k (jQuery not required)
  • Built by video experts at Brightcove & Zencoder
How To Use Video js Html5 video player
<!-- Chang URLs to wherever Video.js files will be hosted -->

  <link href="video-js.css" rel="stylesheet" type="text/css">
 <link href="button-styles.css" rel="stylesheet" type="text/css">

  <!-- video.js must be in the <head> for older IEs to work. -->

  <script src="video.js" type="text/javascript"></script>
  <script src="video-quality-selector.js" type="text/javascript"></script>

  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
  <script type="text/javascript">
    videojs.options.flash.swf = "video-js/video-js.swf";
Add This JavaScript Below You Video Tag To Enable Resolution Selector
<video id="main_video" controls preload="auto" class="video-js vjs-default-skin" poster="Poster Link Here" width="700" height="300">
<source data-res="360"  src="......." type="video/mp4" />

<source data-res="720" src="........" type="video/mp4" />

<source data-res="240" src="........." type="video/mp4" >
   <script type="text/javascript">
            var player = videojs( '#main_video', { plugins : { resolutionSelector : {
                default_res : "360"
            } } } );
            player.on('changeRes', function(){
                alert('resolution changed to '.player.getCurrentRes());
            player.on('volumechange', function(){
                console.log('Volume Changed.');

Video js HTML5 video player along with resolution selector plugin 

Post a Comment