UNPKG

3.48 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <title>videojs-http-streaming Demo</title>
6 <link rel="icon" href="logo.svg">
7 <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
8 <link href="node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css" rel="stylesheet">
9 <style>
10 body {
11 font-family: Arial, sans-serif;
12 margin: 20px;
13 }
14 .info {
15 background-color: #eee;
16 border: thin solid #333;
17 border-radius: 3px;
18 padding: 0 5px;
19 margin: 20px 0;
20 }
21 label {
22 display: block;
23 width: 700px;
24 width: fit-content;
25 margin-top: 4px;
26 }
27 .options label {
28 background-color: hsl(0, 0%, 90%);
29 padding: 0.25em;
30 margin: 0.25em;
31 }
32 input[type=url], select {
33 min-width: 600px;
34 }
35 #preload {
36 min-width: auto;
37 }
38 h3 {
39 margin-bottom: 5px;
40 }
41 #keysystems {
42 display: block;
43 }
44 </style>
45
46</head>
47<body>
48 <div id="player-fixture">
49 </div>
50 <label>Representations</label>
51 <select id='representations'></select>
52 <h3>Options</h3>
53
54 <div class="options">
55 <label>
56 <input id=minified type="checkbox">
57 Minified VHS (reloads player)
58 </label>
59 <label>
60 <input id=sync-workers type="checkbox">
61 Synchronous Web Workers (reloads player)
62 </label>
63 <label>
64 <input id=liveui type="checkbox">
65 Enable the live UI (reloads player)
66 </label>
67 <label>
68 <input id=debug type="checkbox">
69 Debug Logging
70 </label>
71 <label>
72 <input id=muted type="checkbox">
73 Muted
74 </label>
75 <label>
76 <input id=autoplay type="checkbox">
77 Autoplay
78 </label>
79 <label>
80 <input id=partial type="checkbox">
81 Handle Partial (reloads player)
82 </label>
83 <label>
84 <input id=buffer-water type="checkbox">
85 [EXPERIMENTAL] Use Buffer Level for ABR (reloads player)
86 </label>
87 <label>
88 <input id=override-native type="checkbox" checked>
89 Override Native (reloads player)
90 </label>
91 <label>
92 <input id=mirror-source type="checkbox" checked>
93 Mirror sources from player.src (reloads player, uses EXPERIMENTAL sourceset option)
94 </label>
95 <label>
96 Preload (reloads player)
97 <select id=preload>
98 <option selected>auto</option>
99 <option>none</option>
100 <option>metadata</option>
101 </select>
102 </div>
103
104 <h3>Load a URL</h3>
105 <label>Url:</label>
106 <input id=url type=url>
107 <label>Type: (uses url extension if blank, usually application/x-mpegURL or application/dash+xml)</label>
108 <input id=type type=text>
109 <label>Optional Keystems JSON:</label>
110 <textarea id=keysystems cols=100 rows=5></textarea>
111 <button id=load-url type=button>Load</button>
112 <h3>Load a Source</h3>
113 <select id=load-source>
114 <optgroup label="hls">
115 </optgroup>
116 <optgroup label="dash">
117 </optgroup>
118 <optgroup label="drm">
119 </optgroup>
120 <optgroup label="live">
121 </optgroup>
122 <optgroup label="low latency live">
123 </optgroup>
124 </select>
125 <h3>Navigation</h3>
126 <ul>
127 <li><a href="test/debug.html">Run unit tests in browser.</a></li>
128 <li><a href="docs/api/">Read generated docs.</a></li>
129 <li><a href="utils/stats/">Stats</a></li>
130 </ul>
131
132 <script src="scripts/index-demo-page.js"></script>
133 <script>
134 window.startDemo(function(player) {
135 // do something with setup player
136 });
137 </script>
138 </body>
139</html>