mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
1afe5049e6
## Description Adds a `TransientButton` component for the types of button that are shown on top of the video briefly during playback and reappear when there is user activity. e.g. Unmute buttons, skip intro. It aims is to be a generic button type to be extended. Some basic styles are provided but kept light to not complicate customisation. It's important to insert a transient button before the control bar for the tab order to make sense. _Optionally_ takes focus when shown. ## Specific Changes proposed Adds `TransientButton` component. ## Requirements Checklist - [x] Feature implemented / Bug fixed - [ ] If necessary, more likely in a feature request than a bug fix - [x] Change has been verified in an actual browser (Chrome, Firefox, IE) - [x] Unit Tests updated or fixed - [ ] Docs/guides updated - [x] Example: https://deploy-preview-8629--videojs-preview.netlify.app/sandbox/transient-button.html - [x] Has no DOM changes which impact accessiblilty or trigger warnings (e.g. Chrome issues tab) - [x] Has no changes to JSDoc which cause `npm run docs:api` to error - [ ] Reviewed by Two Core Contributors
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>
|