mirror of
https://github.com/videojs/video.js.git
synced 2025-01-02 06:32:07 +02:00
122 lines
3.4 KiB
Plaintext
122 lines
3.4 KiB
Plaintext
|
<!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>
|