mirror of
https://github.com/videojs/video.js.git
synced 2024-12-25 02:42:10 +02:00
feat: Add a player option noUITitleAttributes to prevent title attributes in the UI (#7134)
Fixes #6767
This commit is contained in:
Owen Edwards
GitHub
parent
3dcf4f9ec2
commit
5f59391a74
@ -28,8 +28,11 @@
|
||||
* [language](#language)
|
||||
* [languages](#languages)
|
||||
* [liveui](#liveui)
|
||||
* [liveTracker.trackingThreshold](#livetrackertrackingthreshold)
|
||||
* [liveTracker.liveTolerance](#livetrackerlivetolerance)
|
||||
* [nativeControlsForTouch](#nativecontrolsfortouch)
|
||||
* [notSupportedMessage](#notsupportedmessage)
|
||||
* [noUITitleAttributes](#nouititleattributes)
|
||||
* [fullscreen](#fullscreen)
|
||||
* [options](#options)
|
||||
* [playbackRates](#playbackrates)
|
||||
@ -276,7 +279,6 @@ and you will not be able click the text to seek to the live edge. `liveui` will
|
||||
|
||||
An option for the liveTracker component of the player that controls when the liveui should be shown. By default if a stream has less than 30s on the seekBar then we do not show the new liveui even with the liveui option set.
|
||||
|
||||
|
||||
### `liveTracker.liveTolerance`
|
||||
|
||||
> Type: `number`
|
||||
@ -284,7 +286,6 @@ An option for the liveTracker component of the player that controls when the liv
|
||||
|
||||
An option for the liveTracker component of the player that controls how far from the seekable end should be considered live playback. By default anything further than 15s from the live seekable edge is considered behind live and everything else is considered live. Any user interaction to seek backwards will ignore this value as a user would expect.
|
||||
|
||||
|
||||
### `nativeControlsForTouch`
|
||||
|
||||
> Type: `boolean`
|
||||
@ -297,6 +298,13 @@ Explicitly set a default value for [the associated tech option](#nativecontrolsf
|
||||
|
||||
Allows overriding the default message that is displayed when Video.js cannot play back a media source.
|
||||
|
||||
### `noUITitleAttributes`
|
||||
|
||||
> Type: `boolean`
|
||||
> Default: `false`
|
||||
|
||||
Control whether UI elements have a `title` attribute. A `title` attribute is shown on mouse hover, which can be helpful for usability, but has drawbacks for accessibility. Setting `noUITitleAttributes` to `true` prevents the `title` attribute from being added to UI elements, allowing for more accessible tooltips to be added to controls by a plugin or external framework.
|
||||
|
||||
### `fullscreen`
|
||||
|
||||
> Type: `Object`
|
||||
@ -421,9 +429,7 @@ Defines the order in which Video.js techs are preferred. By default, this means
|
||||
|
||||
> Type: `boolean|function`
|
||||
|
||||
Controls how double-clicking on the player/tech operates. If set to `false`, double-clicking is disabled. If undefined or set to
|
||||
`true`, double-clicking is enabled and toggles fullscreen mode. To override the default double-click handling, set `userActions.doubleClick`
|
||||
to a function which accepts a `dblclick` event:
|
||||
Controls how double-clicking on the player/tech operates. If set to `false`, double-clicking is disabled. If undefined or set to `true`, double-clicking is enabled and toggles fullscreen mode. To override the default double-click handling, set `userActions.doubleClick` to a function which accepts a `dblclick` event:
|
||||
|
||||
```js
|
||||
function myDoubleClickHandler(event) = {
|
||||
|
||||
@ -13,6 +13,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
## Status of translations
|
||||
|
||||
<!-- START langtable -->
|
||||
|
||||
| Language file | Missing translations |
|
||||
| ----------------------- | ----------------------------------------------------------------------------------- |
|
||||
| ar.json (missing 3) | progress bar timing: currentTime={1} duration={2} |
|
||||
@ -944,4 +945,5 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| zh-CN.json (Complete) | |
|
||||
| zh-TW.json (missing 2) | Exit Picture-in-Picture |
|
||||
| | Picture-in-Picture |
|
||||
|
||||
<!-- END langtable -->
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<li><a href="sandbox/language.html">Laungage Demo</a></li>
|
||||
<li><a href="sandbox/hls.html">Hls 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/debug.html">Videojs debug build test page</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
41
sandbox/noUITitleAttributes.html.example
Normal file
41
sandbox/noUITitleAttributes.html.example
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Video.js without title attribute on UI controls example</title>
|
||||
|
||||
<!-- Load the source files -->
|
||||
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/video.js"></script>
|
||||
<script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
|
||||
<p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
|
||||
<pre><b>npm start</b> will automatically copy these files over from .example if they don't already exist.</pre>
|
||||
<pre>open http://localhost:9999/sandbox/noUITitleAttributes.html</pre>
|
||||
</div>
|
||||
|
||||
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
|
||||
poster="http://vjs.zencdn.net/v/oceans.png"
|
||||
data-setup='{"controlBar": {"volumePanel": {"inline": false}}, "noUITitleAttributes" : true}'>
|
||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
||||
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
|
||||
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
|
||||
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
|
||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||
</video>
|
||||
<p>This demo shows the effect of setting the <strong>noUITitleAttributes</strong> option for video.js. It also includes the <strong>:focus-visible</strong> polyfill (see focus-visible.html)</p>
|
||||
<script>
|
||||
var vid = document.getElementById("vid1");
|
||||
var player = videojs(vid);
|
||||
|
||||
</script>
|
||||
<script src="https://unpkg.com/focus-visible"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -129,7 +129,7 @@ class ClickableComponent extends Component {
|
||||
|
||||
this.controlText_ = text;
|
||||
Dom.textContent(this.controlTextEl_, localizedText);
|
||||
if (!this.nonIconControl) {
|
||||
if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
|
||||
// Set title attribute if only an icon is shown
|
||||
el.setAttribute('title', localizedText);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user