-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
157 lines (130 loc) · 4.04 KB
/
index.html
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
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pillarbox - Development Page</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" href="./scss/pillarbox.scss" />
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<video id="player" class="pillarbox-js" controls muted></video>
<script type="module">
import pillarbox from './src/pillarbox.js';
import './src/middleware/srgssr.js';
// Handle URL parameters
const searchParams = new URLSearchParams(location.search);
const audioOnlyMode = searchParams.has('audioOnlyMode');
let currentTime = searchParams.get('currentTime');
const debug = searchParams.has('debug');
const ilHost = searchParams.get('ilHost') || undefined;
const language = searchParams.get('language');
const resize = searchParams.has('resize');
let urn = searchParams.get('urn');
const urlHandler = searchParams.has('urlHandler') ? url => url : undefined;
// Default content
if (!urn) {
urn = 'urn:rts:video:9883196';
currentTime = 911;
}
// Media examples
window.mediaExamples = {
_blockedSegmentAndChapters: {
label: 'Blocked segment at 761 (12:42) and chapters',
src: 'urn:rts:video:10894383',
type: 'srgssr/urn'
},
_closingCredits: {
label: 'Closing credits at 2620 (43:40)',
src: 'urn:rts:video:14683290',
type: 'srgssr/urn'
},
_endDate: {
label: 'Block reason end date',
src: 'urn:rts:video:10894367',
type: 'srgssr/urn'
},
_externalSubtitles: {
label: 'Remote text tracks',
src: 'urn:swi:video:48864812',
type: 'srgssr/urn'
},
_pyby: {
label: 'Pierre-Yves joueur de badminton at 911',
src: 'urn:rts:video:9883196',
type: 'srgssr/urn'
}
};
// Expose Pillarbox and player in the window object for debugging
window.pillarbox = pillarbox;
// Allows to track comscore events until TC becomes Pillarbox-compatible
window.videojs = pillarbox;
window.player = new pillarbox('player', {
audioOnlyMode,
debug,
language,
srgOptions: {
dataProviderHost: ilHost,
dataProviderUrlHandler: urlHandler,
}
});
player.controlBar.lockShowing();
if (resize) {
/** @type {HTMLElement} */
const el = player.el();
el.style.resize = 'both';
el.style.overflow = 'hidden';
}
// Starts playback at a given position
player.on('loadedmetadata', () => {
if (!currentTime) return;
player.currentTime(currentTime);
currentTime = undefined;
});
// Listen blocked segments, chapters and intervals
player.on(['srgssr/blocked-segment', 'srgssr/chapter', 'srgssr/interval'], ({ type, data }) => {
// Title bar reset when outside a chapter
if ('srgssr/chapter' === type && !data) {
player.titleBar.update({
title: player.currentSource().mediaData.vendor,
description: player.currentSource().mediaData.title
});
return;
}
if (!data) return;
const cueContent = JSON.parse(data.text);
// Blocked segment
if ('srgssr/blocked-segment' === type) {
console.log('%cBlock reason', 'background-color: red', cueContent.blockReason);
return;
}
// Chapter
if ('srgssr/chapter' === type) {
// Update the title bar with the current chapter
player.titleBar.update({
title: cueContent.title,
description: cueContent.description
});
console.log('%cChapter', 'background-color: blue', cueContent.title);
return;
}
// Interval
console.log('%cInterval', 'background-color: green', cueContent.type);
});
player.src({
src: urn,
type: 'srgssr/urn',
});
</script>
</body>
</html>