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
<!-- 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";
</script>
<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";
</script>
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" >
<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.');
})
</script>
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.');
})
</script>
Post a Comment