<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |