videojs-max-quality-selector
Version:
A Videojs Plugin to help you list out resolutions and bit-rates from Live, Adaptive and Progressive streams.
80 lines (69 loc) • 5.23 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>videojs-max-quality-selector Demo/Tester</title>
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKBrDv/x7OT/tXUf/ztE5/86Lub/OovP/zzM8f8+lLH/L2/+/083Bv/27+T/oGsO/wAAAAAAAAAAAAAAAAAAAACfdBf/gFYO/7V1H/88jfj/OXP//zmEqf86uOD/QZrS/zJ4//9PNwb/YkIL/3pZEv8AAAAAAAAAAAAAAAAAAAAAn4Ai/////+O1dR//MWf//y1I//8xZ/D/LmGV/zl6y/86t///TzcG/////+N6Yhr/AAAAAAAAAAAAAAAAAAAAAJ2LLv9+ZBz/tXUf/6xvHf+eZxr/j10W/35TEv9sSA3/XT8K/083Bv9hTRb/eWsj/wAAAAAAAAAAAAAAAAAAAACclTj/////47V1H/84jP//NV3i/zR75v85bez/OYL//y+d+f9PNwb/////43hzK/8AAAAAAAAAAAAAAAAAAAAAm59C/31xKf+1dR//PFKz/zqB7/85geb/PrPl/zxXwP8odP//TzcG/2BXIP93ejP/AAAAAAAAAAAAAAAAAAAAAJumSf/////jtXUf/ztE5/86Lub/OqLc/zzM8f8+lLH/L2/+/083Bv/////jd4A4/wAAAAAAAAAAAAAAAAAAAACarE7/fHkw/7V1H/88jfj/OXP//zmEqf86ptD/Qo7K/zJ4//9PNwb/X10l/3aEPP8AAAAAAAAAAAAAAAAAAAAAmq1P/////+O1dR//MWf//y1I//8xZ/D/LmGV/zl6y/86t///TzcG/////+N2hT3/AAAAAAAAAAAAAAAAAAAAAJqrTf98eDD/tXUf/6xvHf+eZxr/j10W/35TEv9sSA3/XT8K/083Bv9fXCX/doM7/wAAAAAAAAAAAAAAAAAAAACbpkj/////47V1H/84jP//NV3i/zR75v85bez/OYL//y+d+f9PNwb/////43eAN/8AAAAAAAAAAAAAAAAAAAAAm55A/31wKP+1dR//PFKz/zqB7/85geb/Pqje/zxXwP8odP//TzcG/2BWH/93eTH/AAAAAAAAAAAAAAAAAAAAAJyVN//////jtXUf/ztE5/86Lub/OpfW/zzM8f8+nr3/L2/+/083Bv/////jeHMq/wAAAAAAAAAAAAAAAAAAAACdii3/fmMc/7V1H/88jfj/OXP//zmEqf86ptD/QZrS/zJ4//9PNwb/YUwW/3lqI/8AAAAAAAAAAAAAAAAAAAAAn38i/wAAAAC1dR//MWf//y1I//8xZ/D/LmGV/zl6y/86t///TzcG/wAAAAB6Yhr/AAAAAAAAAAAAAAAAAAAAAJ90F/+phR7/tXUf/6xvHf+eZxr/j10W/35TEv9sSA3/XT8K/083Bv+CZhf/elkS/wAAAAAAAAAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADQCwAAwAMAAA==" rel="icon" type="image/x-icon" />
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="dist/videojs-max-quality-selector.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h5 class="nav">
<ul>
<li><a href="https://github.com/FoxCouncil/videojs-max-quality-selector" target="_blank" class="text">Max Quality Selector <span id="pluginVer"></span></a></li>
<li><a href="/test/debug.html">Tests</a></li>
<li><a href="docs/api/">Docs</a></li>
<li><a href="https://github.com/videojs/video.js" target="_blank" class="text">VideoJS <span id="videojsVer"></span></a></li>
<li><a href="https://github.com/videojs/videojs-contrib-quality-levels" target="_blank" class="text">Contrib <span id="qlVer"></span></a></li>
</ul>
<div style="clear: both;"></div>
</h5>
<video id="videojs-max-quality-selector-player" crossorigin="anonymous" class="video-js vjs-default-skin" controls autoplay></video>
<div class="settings">
<table id="control-list" width="50%">
<tr>
<td class="option">sortEnabled: <button class="options-button bool true" data-type="bool" data-name="sortEnabled">true</button></td>
<td class="option">sort: <button class="options-button enum" data-type="enum" data-name="sort" data-enum='["desc", "asc"]'>desc</button></td>
</tr>
<tr>
<td class="option">showBitrates: <button class="options-button bool false" data-type="bool" data-name="showBitrates">false</button></td>
<td class="option">showSingleItemMenu: <button class="options-button bool false" data-type="bool" data-name="showSingleItemMenu">false</button></td>
</tr>
<tr>
<td class="option">filterDuplicates: <button class="options-button bool true" data-type="bool" data-name="filterDuplicates">true</button></td>
<td class="option">filterDuplicateHeights: <button class="options-button bool true" data-type="bool" data-name="filterDuplicateHeights">true</button></td>
</tr>
<tr>
<td class="option">disableAuto: <button class="options-button bool false" data-type="bool" data-name="disableAuto">false</button></td>
<td class="option">defaultQuality: <button class="options-button enum" data-type="enum" data-name="defaultQuality" data-enum='["default", "low", "high"]'>default</button></td>
</tr>
<tr>
<td class="option">displayMode: <button class="options-button enum" data-type="enum" data-name="displayMode" data-enum='["both", "resolution", "name"]'>both</button></td>
</tr>
</table>
<pre id="output">{}</pre>
</div>
<div class="sources">
<table id="source-list" width="100%">
<thead>
<tr>
<th width="33%">Progressive</th>
<th width="33%">Adaptive</th>
<th width="33%">Live</th>
</tr>
</thead>
<tbody>
<tr>
<td onmouseover="mouseEffect(true, this)" onmouseout="mouseEffect(false, this)"><ul id="progressive"></ul></td>
<td onmouseover="mouseEffect(true, this)" onmouseout="mouseEffect(false, this)"><ul id="adaptive"></ul></td>
<td onmouseover="mouseEffect(true, this)" onmouseout="mouseEffect(false, this)"><ul id="live"></ul></td>
</tr>
</tbody>
</table>
</div>
<script src="node_modules/video.js/dist/video.js" defer></script>
<script src="dist/videojs-max-quality-selector.js" defer></script>
<script src="index.js" defer></script>
</body>
</html>