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>
|