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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video.js Sandbox</title>
<link href="../dist/video-js.css" rel="stylesheet" type="text/css" />
<script src="../dist/video.js"></script>
<style>
article {
max-width: 800px;
margin: 0 auto;
}
.vjs-transient-button.unmute-button span::before {
content: "\f104";
font-family: "VideoJS";
vertical-align: middle;
padding-right: 0.3em;
}
</style>
</head>
<body>
<article>
<h1>Transient button demo</h1>
<video-js
id="vid1"
class="vjs-fluid"
controls
muted
preload="auto"
poster="https://vjs.zencdn.net/v/oceans.png"
>
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
<source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
<source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
<track
kind="captions"
src="../docs/examples/shared/example-captions.vtt"
srclang="en"
label="English"
/>
</video-js>
</article>
<p>An unmute transient button will show after playback starts if muted.</p>
<p>
Transient buttons to skip into / credits / recap display at times defined
in a metadata track.
</p>
<script>
const player = videojs("#vid1");
player.ready(function () {
// Adds an unmute button that umutes and goes away when clicked
player.one("playing", function () {
if (this.muted()) {
const unmuteButton = player.addChild(
"TransientButton",
{
controlText: "Unmute",
position: ["top", "left"],
className: "unmute-button",
clickHandler: function () {
this.player().muted(false);
this.dispose();
},
},
player.children().indexOf(player.getChild("ControlBar"))
);
unmuteButton.show();
}
});
// A track that defines skippable parts
const track = player.addRemoteTextTrack({
src:
"data:text/vtt;base64," +
btoa(`WEBVTT
00:01.000 --> 00:10.000
Recap
00:15.000 --> 00:20.000
Intro
00:40.000 --> 00:47.000
Credits
`),
kind: "metadata",
label: "skip_sections",
}).track;
let skipButtons = [];
track.addEventListener("cuechange", function () {
const cue = track.activeCues[0];
if (cue) {
const skipButton = player.addChild(
"TransientButton",
{
controlText: `Skip ${cue.text}`,
position: ["bottom", "right"],
clickHandler: () => {
player.currentTime(cue.endTime);
},
takeFocus: true,
},
player.children().indexOf(player.getChild("ControlBar"))
);
skipButtons.push(skipButton);
skipButton.show();
} else {
while (skipButtons.length > 0) {
skipButtons.shift().dispose();
}
}
});
track.mode = "hidden";
});
</script>
</body>
</html>
|
