Quality Change Policy

Developer
Viblast
Size
2,751 Kb
Views
30,360
  1. Quality Change Policy Previews
  2. Quality Change Policy HTML Codes
  3. Quality Change Policy CSS Codes
  4. Quality Change Policy JS Codes

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 Previews
IQ Test

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
Quality Change Policy - Script Codes
Home Page Home
Developer Viblast
Username Viblast
Uploaded November 25, 2022
Rating 3
Size 2,751 Kb
Views 30,360
Do you need developer help for Quality Change Policy?

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!

Viblast (Viblast) Script Codes
Name
XHR Manipulation
Getting Started
Flowplayer integration
Dynamic API and HTML5 Video Element
ClearKey DRM
Viblast.js include
Dynamic API Videojs
Videojs 4 Integration
Preloading support
Accessing Viblast API when Player has been created dynamically
Create amazing love letters with AI!

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!