UNPKG

5.34 kBHTMLView Raw
1<!doctype html>
2<html>
3 <head>
4
5 <meta charset="utf-8">
6
7 <title>videojs-max-quality-selector Demo/Tester</title>
8
9 <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" />
10
11 <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
12 <link href="dist/videojs-max-quality-selector.css" rel="stylesheet">
13
14 <link href="index.css" rel="stylesheet">
15</head>
16<body>
17
18 <h5 class="nav">
19 <ul>
20 <li><a href="https://github.com/FoxCouncil/videojs-max-quality-selector" target="_blank" class="text">Max Quality Selector <span id="pluginVer"></span></a></li>
21 <li><a href="/test/debug.html">Tests</a></li>
22 <li><a href="docs/api/">Docs</a></li>
23 <li><a href="https://github.com/videojs/video.js" target="_blank" class="text">VideoJS <span id="videojsVer"></span></a></li>
24 <li><a href="https://github.com/videojs/videojs-contrib-quality-levels" target="_blank" class="text">Contrib <span id="qlVer"></span></a></li>
25 </ul>
26 <div style="clear: both;"></div>
27 </h5>
28
29 <video id="videojs-max-quality-selector-player" crossorigin="anonymous" class="video-js vjs-default-skin" controls autoplay></video>
30
31 <div class="settings">
32 <table id="control-list" width="50%">
33 <tr>
34 <td class="option">sortEnabled: <button class="options-button bool true" data-type="bool" data-name="sortEnabled">true</button></td>
35 <td class="option">sort: <button class="options-button enum" data-type="enum" data-name="sort" data-enum='["desc", "asc"]'>desc</button></td>
36 </tr>
37 <tr>
38 <td class="option">showBitrates: <button class="options-button bool false" data-type="bool" data-name="showBitrates">false</button></td>
39 <td class="option">showSingleItemMenu: <button class="options-button bool false" data-type="bool" data-name="showSingleItemMenu">false</button></td>
40 </tr>
41 <tr>
42 <td class="option">filterDuplicates: <button class="options-button bool true" data-type="bool" data-name="filterDuplicates">true</button></td>
43 <td class="option">filterDuplicateHeights: <button class="options-button bool true" data-type="bool" data-name="filterDuplicateHeights">true</button></td>
44 </tr>
45 <tr>
46 <td class="option">disableAuto: <button class="options-button bool false" data-type="bool" data-name="disableAuto">false</button></td>
47 <td class="option">defaultQuality: <button class="options-button enum" data-type="enum" data-name="defaultQuality" data-enum='["default", "low", "high"]'>default</button></td>
48 </tr>
49 <tr>
50 <td class="option">displayMode: <button class="options-button enum" data-type="enum" data-name="displayMode" data-enum='["both", "resolution", "name"]'>both</button></td>
51 </tr>
52 </table>
53 <pre id="output">{}</pre>
54 </div>
55
56 <div class="sources">
57 <table id="source-list" width="100%">
58 <thead>
59 <tr>
60 <th width="33%">Progressive</th>
61 <th width="33%">Adaptive</th>
62 <th width="33%">Live</th>
63 </tr>
64 </thead>
65 <tbody>
66 <tr>
67 <td onmouseover="mouseEffect(true, this)" onmouseout="mouseEffect(false, this)"><ul id="progressive"></ul></td>
68 <td onmouseover="mouseEffect(true, this)" onmouseout="mouseEffect(false, this)"><ul id="adaptive"></ul></td>
69 <td onmouseover="mouseEffect(true, this)" onmouseout="mouseEffect(false, this)"><ul id="live"></ul></td>
70 </tr>
71 </tbody>
72 </table>
73 </div>
74
75 <script src="node_modules/video.js/dist/video.js" defer></script>
76 <script src="node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.js" defer></script>
77 <script src="dist/videojs-max-quality-selector.js" defer></script>
78 <script src="index.js" defer></script>
79</body>
80</html>