-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathdefault-ui.html
More file actions
146 lines (143 loc) · 6.86 KB
/
Copy pathdefault-ui.html
File metadata and controls
146 lines (143 loc) · 6.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>THEOplayer Open Video UI for Web: Default UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
<style>
theoplayer-default-ui:not(:defined) {
display: inline-block;
box-sizing: border-box;
aspect-ratio: 16 / 9;
}
theoplayer-default-ui {
width: 100%;
--theoplayer-aspect-ratio: 16 / 9;
font-family: 'Noto Sans', sans-serif;
background: #000;
}
</style>
<!-- WebXR polyfill: enables Cardboard VR on desktop and older mobile devices. -->
<script src="https://cdn.theoplayer.com/webxr/webxr-polyfill-patched.js"></script>
<script>
new WebXRPolyfill({ allowCardboardOnDesktop: true });
</script>
<!-- Modern browsers -->
<script type="importmap">
{
"imports": {
"theoplayer/chromeless": "../node_modules/theoplayer/THEOplayer.chromeless.esm.js",
"@theoplayer/web-ui": "../dist/THEOplayerUI.mjs",
"lit": "https://ga.jspm.io/npm:lit@3.3.1/index.js",
"lit/decorators.js": "https://ga.jspm.io/npm:lit@3.3.1/decorators.js",
"lit/directives/": "https://ga.jspm.io/npm:lit@3.3.1/directives/"
},
"scopes": {
"https://ga.jspm.io/": {
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.1.1/development/reactive-element.js",
"@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.1.1/development/decorators/",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.2.1/development/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.3.1/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@3.3.1/development/"
}
}
}
</script>
<!-- Import maps polyfill for browsers without import maps support (e.g. Safari 16.3) -->
<script async src="https://ga.jspm.io/npm:es-module-shims@2.6.2/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="module">
import * as THEOplayerUI from '@theoplayer/web-ui';
import './locale/nl.js';
self.THEOplayerUI = THEOplayerUI;
</script>
<!-- Legacy browsers -->
<script
nomodule
src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=es2015%2CglobalThis%2CReflect%2CqueueMicrotask%2CArray.prototype.flat"
></script>
<script nomodule src="../node_modules/theoplayer/THEOplayer.chromeless.js"></script>
<script nomodule src="../dist/THEOplayerUI.polyfills.js"></script>
<script nomodule src="../dist/THEOplayerUI.es5.js"></script>
</head>
<body>
<h1>Default UI</h1>
<theoplayer-default-ui configuration='{"libraryLocation":"../node_modules/theoplayer/","license":""}'></theoplayer-default-ui>
<div>
<label style="user-select: none">
Source:
<select id="source-select">
<option value="bigBuckBunny" selected>Big Buck Bunny</option>
<option value="elephantsDream">Elephant's Dream</option>
<option value="starWarsTrailer">Star Wars Episode VII Trailer</option>
<option value="vr">National Geographic (VR)</option>
</select>
</label>
</div>
<div>
<label style="user-select: none">
Language:
<select id="language-select">
<option value="en" selected>English</option>
<option value="nl">Nederlands (Dutch)</option>
</select>
</label>
</div>
<script>
const ui = document.querySelector('theoplayer-default-ui');
const sources = {
bigBuckBunny: {
sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' },
metadata: { title: 'Big Buck Bunny' },
textTracks: [
{
default: true,
src: 'https://cdn.theoplayer.com/video/big_buck_bunny/thumbnails.vtt',
label: 'thumbnails',
kind: 'metadata'
}
]
},
elephantsDream: {
sources: { src: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8' },
metadata: { title: "Elephant's Dream" },
textTracks: [
{
default: true,
src: 'https://cdn.theoplayer.com/video/elephants-dream/thumbnails.vtt',
label: 'thumbnails',
kind: 'metadata'
}
]
},
starWarsTrailer: {
sources: {
src: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8'
},
metadata: {
title: 'Star Wars Episode VII Trailer'
},
poster: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg'
},
vr: {
sources: {
src: 'https://demo.theoplayer.com/hubfs/videos/natgeo/playlist.m3u8'
},
vr: {
360: true
},
poster: 'https://demo.theoplayer.com/hubfs/videos/natgeo/poster.jpg'
}
};
ui.source = sources.bigBuckBunny;
document.querySelector('#source-select').addEventListener('change', (e) => {
ui.source = sources[e.target.value];
});
document.querySelector('#language-select').addEventListener('change', (e) => {
ui.lang = e.target.value;
});
</script>
</body>
</html>