-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add an example that shows how to use the new settigns module
- Loading branch information
Showing
3 changed files
with
148 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"/> | ||
| <title>Dash.js settings example</title> | ||
|
|
||
| <script src="../../dist/dash.all.debug.js"></script> | ||
| <!--dash.all.min.js should be used in production over dash.all.debug.js | ||
| Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js--> | ||
| <!--<script src="../../dist/dash.all.min.js"></script>--> | ||
|
|
||
| <script> | ||
| var player; | ||
| function init() { | ||
| var video, | ||
| url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"; | ||
|
|
||
| video = document.querySelector("video"); | ||
| player = dashjs.MediaPlayer().create(); | ||
| player.initialize(video, url, true); | ||
|
|
||
| applySettings() | ||
|
|
||
| player.on(dashjs.MediaPlayer.events["PLAYBACK_ENDED"], function() { | ||
| clearInterval(eventPoller); | ||
| }); | ||
|
|
||
| var eventPoller = setInterval(function() { | ||
| var streamInfo = player.getActiveStream().getStreamInfo(); | ||
| var dashMetrics = player.getDashMetrics(); | ||
| var dashAdapter = player.getDashAdapter(); | ||
|
|
||
| if (dashMetrics && streamInfo) { | ||
| const periodIdx = streamInfo.index; | ||
| var repSwitch = dashMetrics.getCurrentRepresentationSwitch('video', true); | ||
| var bufferLevel = dashMetrics.getCurrentBufferLevel('video', true); | ||
| var bitrate = repSwitch ? Math.round(dashAdapter.getBandwidthForRepresentation(repSwitch.to, periodIdx) / 1000) : NaN; | ||
| document.getElementById('currentBufferLevel').innerText = bufferLevel + " secs"; | ||
| document.getElementById('reportedBitrate').innerText = bitrate + " Kbps"; | ||
| } | ||
| }, 1000); | ||
| } | ||
| </script> | ||
|
|
||
| <script class="code"> | ||
| function applySettings() { | ||
| var stableBuffer = parseInt(document.getElementById('stableBuffer').value, 10); | ||
| var bufferAtTopQuality = parseInt(document.getElementById('topQualityBuffer').value, 10); | ||
| var minBitrate = parseInt(document.getElementById('minBitrate').value, 10); | ||
| var maxBitrate = parseInt(document.getElementById('maxBitrate').value, 10); | ||
| var limitByPortal = document.getElementById('limitByPortal').checked; | ||
|
|
||
| player.updateSettings({ | ||
| 'streaming': { | ||
| 'stableBufferTime': stableBuffer, | ||
| 'bufferTimeAtTopQualityLongForm': bufferAtTopQuality, | ||
| 'abr': { | ||
| 'minBitrate': { | ||
| 'video': minBitrate | ||
| }, | ||
| 'maxBitrate': { | ||
| 'video': maxBitrate | ||
| }, | ||
| 'limitBitrateByPortal': limitByPortal | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| video { | ||
| width: 70%; | ||
| } | ||
|
|
||
| #container { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| fieldset { | ||
| width: 70%; | ||
| } | ||
| fieldset > div { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .description { | ||
| font-size: 0.9em; | ||
| color: #888888; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="container"> | ||
| <div class="video-container"> | ||
| <video data-dashjs-player autoplay controls="true"> | ||
| </video> | ||
| </div> | ||
| <fieldset> | ||
| <legend>Configuration parameters</legend> | ||
| <div> | ||
| Max stable buffer (seconds): <input type="number" id="stableBuffer" value="20"> (Current Buffer: <span id="currentBufferLevel")>0</span> seconds) | ||
| <div class="description">The time that the internal buffer target will be set to post startup/seeks (NOT top quality).</div> | ||
| </div> | ||
| <div> | ||
| Buffer lenght at top quality (seconds): <input type="number" id="topQualityBuffer" value="20"> | ||
| <div class="description">The time that the internal buffer target will be set to once playing the top quality.</div> | ||
| </div> | ||
| <div> | ||
| Max selectable bitrate (Kbps): <input type="number" id="maxBitrate" value="5000"> (Downloading bitrate: <span id="reportedBitrate")>0</span>) | ||
| <div class="description">The maximum bitrate selectable by the ABR algorithms will choose. Use -1 for no limit.</div> | ||
| </div> | ||
| <div> | ||
| Min selectable bitrate (Kbps): <input type="number" id="minBitrate" value="-1"> | ||
| <div class="description">The minimum bitrate that the ABR algorithms will choose. Use -1 for no limit.</div> | ||
| </div> | ||
| <div> | ||
| Limit Bitrate By Portal Size: <input type="checkbox" id="limitByPortal"> | ||
| <div class="description">If true, the size of the video portal will limit the max chosen video resolution.</div> | ||
| </div> | ||
| <div> | ||
| <button onclick="applySettings()">Apply changes</button> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| init(); | ||
| }); | ||
| </script> | ||
| <script src="../highlighter.js"></script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters