mirror of
https://github.com/videojs/video.js.git
synced 2024-12-21 01:39:04 +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
42 lines
2.0 KiB
HTML
42 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Video.js Dev Server</title>
|
|
</head>
|
|
<body>
|
|
<h2>Navigation</h2>
|
|
<ul>
|
|
<li><a href="test/debug.html">Run unit tests in browser.</a></li>
|
|
<li><a href="docs/api/">view api docs</a></li>
|
|
<li><a href="sandbox/index.html">Simple Demo (also seen below)</a></li>
|
|
<li><a href="sandbox/plugin.html">Plugin Demo</a></li>
|
|
<li><a href="sandbox/responsive.html">Responsive Demo</a></li>
|
|
<li><a href="sandbox/middleware-play.html">Middleware Play Demo</a></li>
|
|
<li><a href="sandbox/icons.html">Icons Demo</a></li>
|
|
<li><a href="sandbox/svg-icons.html">SVG Icons Directory</a></li>
|
|
<li><a href="sandbox/svg-icons-enabled.html">SVG Icons Demo</a></li>
|
|
<li><a href="sandbox/focus-visible.html">Focus Visible Demo</a></li>
|
|
<li><a href="sandbox/embeds.html">Embeds Demo</a></li>
|
|
<li><a href="sandbox/descriptions.html">Descriptions Demo</a></li>
|
|
<li><a href="sandbox/combined-tracks.html">Combined Tracks Demo</a></li>
|
|
<li><a href="sandbox/live.html">Live Demo</a></li>
|
|
<li><a href="sandbox/liveui.html">LiveUI Demo</a></li>
|
|
<li><a href="sandbox/vertical-volume.html">Vertical Volume Demo</a></li>
|
|
<li><a href="sandbox/language.html">Language Demo</a></li>
|
|
<li><a href="sandbox/load-media.html"><code>loadMedia</code> Demo</a></li>
|
|
<li><a href="sandbox/hls.html">Hls Demo</a></li>
|
|
<li><a href="sandbox/quality-levels.html">QualityLevels Demo</a></li>
|
|
<li><a href="sandbox/autoplay-tests.html">Autoplay Tests</a></li>
|
|
<li><a href="sandbox/noUITitleAttributes.html">noUITitleAttributes Demo</a></li>
|
|
<li><a href="sandbox/docpip.html">Document Picture-In-Picture Demo</a></li>
|
|
<li><a href="sandbox/skip-buttons.html">Skip Buttons demo</a></li>
|
|
<li><a href="sandbox/transient-button.html">Transient Button demo</a></li>
|
|
<li><a href="sandbox/debug.html">Videojs debug build test page</a></li>
|
|
</ul>
|
|
|
|
<h2>Simple Demo (in an iframe)</h2>
|
|
<iframe src="sandbox/index.html" width=700 height=500></iframe>
|
|
</body>
|
|
</html>
|