Video.js Example Embed
jsbin.vagelic.css .quality_frame{ position:relative; border:0px solid red; } .quality_bitrate ,.quality_ul{ background:#3A393E; color:#FFF; font-size:11pt!important; letter-spacing:1px; margin:0px; padding:0px; list-style-type: none; position:absolute; bottom:10px; left:-5px; z-index:900; } .quality_setting{ color:#FFF!important; /*display:inline-block!improtant;*/ vertical-align:bottom; margin:7px 0 0 0; border:0px solid #FFF; cursor:pointer; } .quality_bitrate li, .quality_ul li{ cursor:pointer; padding:8px 8px 3px 9px; } .quality_bitrate li a, .quality_ul li a{ display:block; width:100%; height:100%; } .quality_bitrate li:hover, .quality_ul li:hover{ background:#757575; color:#F9F7FF; } .quality_bitrate_using{ background:#757575!important; color:#F9F7FF; } .quality_bitrate_using2{ border-bottom:1px solid #FFF; } jsbin.vagelic.js var player = videojs("#my_video_1" ,{ inactivityTimeout: 0 , controls: true, autoplay: true, preload: "auto", muted:true, }); player.on("loadedmetadata", function() { var qualityLevels = player.qualityLevels(); if(qualityLevels.length > 0){ var h =""+
""+
"
"
$(".vjs-fullscreen-control").before( h );
}
});
var quality_ay = [];
//var quality_default =[];
player.qualityLevels().on('addqualitylevel', function(event) {
var quality = event.qualityLevel;
console.log( quality.height );
quality_ay.push( quality.height );
$("body").on("click", ".quality_bitrate li", function(){
var quality = event.qualityLevel;
var val = $(this).attr("bitrate");
$(".quality_bitrate li").removeClass("quality_bitrate_using");
$(".quality_bitrate li a").removeClass("quality_bitrate_using2");
$(this).addClass("quality_bitrate_using");
$(this).children("a").addClass("quality_bitrate_using2");
if(val != "auto"){
if (quality.height == val) {
quality.enabled = true;
}else{
quality.enabled = false;
}
}else{
quality.enabled = true;
}
});
});
$("body").on("click", ".quality_setting", function(){
$(".quality_ul").show(500);
});
$(window).click(function(event){
if( !$(event.target).is('.quality_setting') && $(event.target).has(event.target).length === 0 ){
if( $(".quality_ul").is(':visible')){
$(".quality_ul").hide(500);
}
}
});
setTimeout(function(){
var qualityLevels = player.qualityLevels();
if(qualityLevels.length > 0){
quality_ay.sort();
quality_ay.reverse();
$.each( quality_ay , function(i, val) {
$(".quality_bitrate").append("