Quality Change Policy
How do I make an quality change policy?
What is a quality change policy? How do you make a quality change policy? This script and codes were developed by Viblast on 25 November 2022, Friday.
Quality Change Policy - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Quality Change Policy</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- ideally this should be in <head> -->
<script src="//cdn.viblast.com/vb/stable/viblast.js"></script>
<video id="player" controls muted>
</video>
<div> Quality change policy: <select class="quality-controls" id="quality-change-policy" > <option value="smooth">smooth</option> <option value="immediate">immediate</option> </select>
</div>
<div class="quality-controls">
Available Video Qualities:
<select id="video-qualities" onchange="changeQuality(this, 'video');"> <option value="NA">NA</option>
</select>
Current Quality: <span id="current-video-quality">NA</span>
</div>
<div class="quality-controls">
Available Audio Qualities:
<select id="audio-qualities" onchange="changeQuality(this, 'audio');"> <option value="NA">NA</option>
</select>
Current Quality: <span id="current-audio-quality">NA</span>
</div> <script src="js/index.js"></script>
</body>
</html>
Quality Change Policy - Script Codes CSS Codes
video { height: 200px; width: auto; }
.quality-controls { margin-bottom: 0.5em; }
.note { color: gray; padding-left: 1em; }
Quality Change Policy - Script Codes JS Codes
var player = document.getElementById('player');
document.getElementById('quality-change-policy').addEventListener('change', function() { player.viblast.qualityChangePolicy = this.value;
});
function formatQuality(quality) { var res = ''; if (quality.width && quality.height) { res += quality.width + 'x' + quality.height + ' '; } res += quality.bandwidth + 'bps'; return res;
}
function changeQuality(control, channel) { var selectedQuality = control.value; if (selectedQuality === "auto") { player.viblast.abr = true; } else { player.viblast[channel].quality = player.viblast[channel].qualities[parseInt(selectedQuality)]; }
}
function onUpdatedMetadata() { refreshAvailableQualities('video'); refreshAvailableQualities('audio'); refreshQuality('video'); refreshQuality('audio');
}
function refreshAvailableQualities(channel) { var qualitiesControl = document.getElementById(channel + '-qualities'); qualitiesControl.innerHTML = ''; qualitiesControl.innerHTML += '<option value="auto">Auto</option>' for (var i = 0; i<player.viblast[channel].qualities.length; i++) { var quality = player.viblast[channel].qualities[i]; qualitiesControl.innerHTML += '<option value="' + i + '">' + formatQuality(quality) + '</option>'; }
}
function refreshQuality(channel) { if (!player.viblast[channel] || !player.viblast[channel].quality) return; var currQualityControl = document.getElementById('current-' + channel + '-quality'); currQualityControl.innerHTML = formatQuality(player.viblast[channel].quality);
};
function load(src) { // clean up any old instances viblast(player).stop(); // start playing the new stream viblast(player).setup({ stream: src, key: 'N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=' }); // set initial value of 'immediate' because it's more interesting // for the purposes of this demo player.viblast.qualityChangePolicy = 'immediate'; document.getElementById('quality-change-policy').value = player.viblast.qualityChangePolicy; // register the updatedmetadata each time because after src change event hanlers are cleared player.viblast.addEventListener('updatedmetadata', onUpdatedMetadata); // check if metadata has already been loaded // if yes then updatedmetadata will not be fired so just call the callback manually if (player.viblast.video) onUpdatedMetadata(); player.viblast.addEventListener('videoqualitychange', refreshQuality.bind(null, 'video')); player.viblast.addEventListener('audioqualitychange', refreshQuality.bind(null, 'audio'));
}
load('//cdn3.viblast.com/streams/hls/vod/adaptive/bunny/playlist.m3u8');
![Quality Change Policy - Script Codes](http://shots.codepen.io/Viblast/pen/EyRXrx-512.jpg)
Developer | Viblast |
Username | Viblast |
Uploaded | November 25, 2022 |
Rating | 3 |
Size | 2,751 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
ID3 Metadata Support | 2,370 Kb |
Viblast.js include | 1,226 Kb |
HTML5 playback support | 1,989 Kb |
XHR Manipulation | 2,099 Kb |
ClearKey DRM | 1,400 Kb |
Preloading support | 1,966 Kb |
Accessing Viblast API when Videojs has been injected in the DOM | 1,987 Kb |
Videojs VAST | 1,876 Kb |
Accessing Viblast API when Player has been injected in the DOM | 1,827 Kb |
Getting Started | 1,500 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Stylize Stories | Jvhti | 2,465 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
Dice | Fraina | 5,026 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Addthis_button | Esambino | 1,691 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!