UNPKG

3.61 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=llhls type="checkbox">
85 [EXPERIMENTAL] Enables support for ll-hls (reloads player)
86 </label>
87 <label>
88 <input id=buffer-water type="checkbox">
89 [EXPERIMENTAL] Use Buffer Level for ABR (reloads player)
90 </label>
91 <label>
92 <input id=override-native type="checkbox" checked>
93 Override Native (reloads player)
94 </label>
95 <label>
96 <input id=mirror-source type="checkbox" checked>
97 Mirror sources from player.src (reloads player, uses EXPERIMENTAL sourceset option)
98 </label>
99 <label>
100 Preload (reloads player)
101 <select id=preload>
102 <option selected>auto</option>
103 <option>none</option>
104 <option>metadata</option>
105 </select>
106 </div>
107
108 <h3>Load a URL</h3>
109 <label>Url:</label>
110 <input id=url type=url>
111 <label>Type: (uses url extension if blank, usually application/x-mpegURL or application/dash+xml)</label>
112 <input id=type type=text>
113 <label>Optional Keystems JSON:</label>
114 <textarea id=keysystems cols=100 rows=5></textarea>
115 <button id=load-url type=button>Load</button>
116 <h3>Load a Source</h3>
117 <select id=load-source>
118 <optgroup label="hls">
119 </optgroup>
120 <optgroup label="dash">
121 </optgroup>
122 <optgroup label="drm">
123 </optgroup>
124 <optgroup label="live">
125 </optgroup>
126 <optgroup label="low latency live">
127 </optgroup>
128 </select>
129 <h3>Navigation</h3>
130 <ul>
131 <li><a href="test/debug.html">Run unit tests in browser.</a></li>
132 <li><a href="docs/api/">Read generated docs.</a></li>
133 <li><a href="utils/stats/">Stats</a></li>
134 </ul>
135
136 <script src="scripts/index-demo-page.js"></script>
137 <script>
138 window.startDemo(function(player) {
139 // do something with setup player
140 });
141 </script>
142 </body>
143</html>