Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
  <!--
  Uses the latest versions of video.js and videojs-http-streaming.
  To use specific versions, please change the URLs to the form:
  <link href="https://unpkg.com/video.js@6.7.1/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js@6.7.1/dist/video.js"></script>
  <script src="https://unpkg.com/@videojs/http-streaming@0.9.0/dist/videojs-http-streaming.js"></script>
  -->
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
  <h1>Video.js Example Embed</h1>
  <video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <!--<source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" type="application/dash+xml">-->
    <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
  </video-js>
  
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/2.1.0/videojs-contrib-quality-levels.min.js"></script>
  <script>
    var player = videojs('my_video_1');
  </script>
  
</body>
</html>
 
.vjs-menu-content {
  width: 200px !important;
    left: -100px;
}
 
var Button = videojs.getComponent('MenuButton');
// Extend default
var RatesButton = videojs.extend(Button, {
    constructor: function() {
        Button.apply(this, arguments);
        this.addClass('vjs-icon-cog');
        this.addClass('vjs-icon-placeholder');
        this.addClass('vjs-menu-button');
        this.addClass('vjs-menu-button-popup');
        this.addClass('vjs-button');
        this.controlText("Rates");
    },
    handleClick: function() {
    }
});
videojs.registerComponent('ratesButton', RatesButton);
player.getChild('controlBar').addChild('ratesButton', {});
player.getChild('controlBar').el().insertBefore(
    player.getChild('controlBar').getChild('ratesButton').el(),
    player.getChild('controlBar').getChild('fullscreenToggle').el()
);
player.one('loadedmetadata', function(_event) {
    var controlBtn = player.getChild('controlBar').getChild('ratesButton');
    var menuUL = controlBtn.el().children[1].children[0];
    var qualityLevels = player.qualityLevels();
    for (i = 0; i < qualityLevels.length; i++) {
        var res = qualityLevels[i];
        if (res.height) {
            var child = document.createElement("li");
            child.addEventListener("click", function(index) {
                return function() {
                    for (var i = 0; i < qualityLevels.length; i++) {
                        var quality = qualityLevels[i];
                        if (quality.height === qualityLevels[index].height) {
                            quality.enabled = true;
                        } else {
                            quality.enabled = false;
                        }
                    }   
                }
            }(i))
            child.className = 'vjs-menu-item';
            child.innerHTML = '<span class="vjs-menu-item-text">' + res.width + 'x' + res.height + ', ' + res.bitrate + '</span><span class="vjs-control-text" aria-live="polite"></span>';
            menuUL.appendChild(child);
        }
    }
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
samueleastdevpro
0viewers