web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-02 06:32:07 +02:00
Code Releases Activity

Merge branch 'main' into feat-mediasession

Browse Source
This commit is contained in:
mister-ben 2023-12-04 20:11:16 +01:00 committed by GitHub
commit e6c541c8e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
119 changed files with 4337 additions and 2251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.babelrc
View File

@ -12,9 +12,7 @@
"not baidu 7", "not baidu 7",
"not and_qq 11", "not and_qq 11",
"not and_uc 12", "not and_uc 12",
"not kaios 2", "not op_mini all"
"not op_mini all",
"not op_mob 64"
], ],
"bugfixes": true, "bugfixes": true,
"loose": true "loose": true

2
.browserslistrc
View File

@ -8,6 +8,4 @@ not ie 11
not baidu 7 not baidu 7
not and_qq 11 not and_qq 11
not and_uc 12 not and_uc 12
not kaios 2
not op_mini all not op_mini all
not op_mob 64

71
CHANGELOG.md
View File

@ -1,3 +1,74 @@
<a name="8.6.1"></a>
## [8.6.1](https://github.com/videojs/video.js/compare/v8.6.0...v8.6.1) (2023-10-12)
### Bug Fixes
* **control-bar:** incorrect display when control bar display is locked ([#8435](https://github.com/videojs/video.js/issues/8435)) ([473176f](https://github.com/videojs/video.js/commit/473176f))
* **error:** chromium reset mediaError when the poster is invalid ([#8410](https://github.com/videojs/video.js/issues/8410)) ([68f1429](https://github.com/videojs/video.js/commit/68f1429)), closes [#8409](https://github.com/videojs/video.js/issues/8409)
* Resolves captions sizing issue when minified ([#8442](https://github.com/videojs/video.js/issues/8442)) ([9267c46](https://github.com/videojs/video.js/commit/9267c46))
* **types:** improves quality of typescript definitions ([#8218](https://github.com/videojs/video.js/issues/8218)) ([781eb43](https://github.com/videojs/video.js/commit/781eb43))
* **types:** use typeof for registerComponent and registerPlugin ([#8451](https://github.com/videojs/video.js/issues/8451)) ([2c36d25](https://github.com/videojs/video.js/commit/2c36d25))
### Chores
* **types:** fix issues in exported types ([#8333](https://github.com/videojs/video.js/issues/8333)) ([bad086d](https://github.com/videojs/video.js/commit/bad086d))
* update VHS and mux.js versions ([#8462](https://github.com/videojs/video.js/issues/8462)) ([9701de9](https://github.com/videojs/video.js/commit/9701de9))
<a name="8.6.0"></a>
# [8.6.0](https://github.com/videojs/video.js/compare/v8.5.3...v8.6.0) (2023-09-25)
### Features
* enhanced logger ([#8444](https://github.com/videojs/video.js/issues/8444)) ([cf681e0](https://github.com/videojs/video.js/commit/cf681e0))
### Chores
* **package:** Update VHS version ([#8447](https://github.com/videojs/video.js/issues/8447)) ([372b816](https://github.com/videojs/video.js/commit/372b816))
<a name="8.5.3"></a>
## [8.5.3](https://github.com/videojs/video.js/compare/v8.5.2...v8.5.3) (2023-08-23)
### Bug Fixes
* **error-display:** avoids displaying visual components when an error occurs ([#8389](https://github.com/videojs/video.js/issues/8389)) ([42e17b2](https://github.com/videojs/video.js/commit/42e17b2))
* **svg-icons:** default icons color ([#8382](https://github.com/videojs/video.js/issues/8382)) ([b95cd7a](https://github.com/videojs/video.js/commit/b95cd7a))
* **svg-icons:** icon size consistency ([#8380](https://github.com/videojs/video.js/issues/8380)) ([d040881](https://github.com/videojs/video.js/commit/d040881))
<a name="8.5.2"></a>
## [8.5.2](https://github.com/videojs/video.js/compare/v8.5.1...v8.5.2) (2023-08-14)
### Bug Fixes
* **text:** caption settings typo ([560b81a](https://github.com/videojs/video.js/commit/560b81a))
### Chores
* **package:** bump VHS version from 3.3.1 to 3.5.3 ([#8400](https://github.com/videojs/video.js/issues/8400)) ([9aff3de](https://github.com/videojs/video.js/commit/9aff3de))
<a name="8.5.1"></a>
## [8.5.1](https://github.com/videojs/video.js/compare/v8.5.0...v8.5.1) (2023-07-21)
### Bug Fixes
* Add skip button text for Spanish ([#8340](https://github.com/videojs/video.js/issues/8340)) ([e2f9231](https://github.com/videojs/video.js/commit/e2f9231))
* Check for VTTCue ([#8370](https://github.com/videojs/video.js/issues/8370)) ([da15810](https://github.com/videojs/video.js/commit/da15810))
* Don't use copyStyleSheets with documentPIP ([#8314](https://github.com/videojs/video.js/issues/8314)) ([8dd98f6](https://github.com/videojs/video.js/commit/8dd98f6))
* Fullscreen styles for older Safari ([#8346](https://github.com/videojs/video.js/issues/8346)) ([c11d213](https://github.com/videojs/video.js/commit/c11d213))
* **lang:** add skip button text for French ([#8341](https://github.com/videojs/video.js/issues/8341)) ([97ba60f](https://github.com/videojs/video.js/commit/97ba60f))
* **lang:** add skip button text for Portuguese ([#8342](https://github.com/videojs/video.js/issues/8342)) ([6dac145](https://github.com/videojs/video.js/commit/6dac145))
* make compatible with chrome 53 ([#8354](https://github.com/videojs/video.js/issues/8354)) ([c66bf40](https://github.com/videojs/video.js/commit/c66bf40))
* **play-toggle:** missing svg play icon ([#8337](https://github.com/videojs/video.js/issues/8337)) ([b34cb2c](https://github.com/videojs/video.js/commit/b34cb2c)), closes [#8336](https://github.com/videojs/video.js/issues/8336)
* **progress:** mouse-time-display overlaps the play-progress svg icon ([#8338](https://github.com/videojs/video.js/issues/8338)) ([e06465f](https://github.com/videojs/video.js/commit/e06465f))
* **tests:** Fixes for old Safari ([#8368](https://github.com/videojs/video.js/issues/8368)) ([6fc1fd4](https://github.com/videojs/video.js/commit/6fc1fd4))
* **tests:** Skip a test on old Safari ([#8356](https://github.com/videojs/video.js/issues/8356)) ([452a918](https://github.com/videojs/video.js/commit/452a918))
<a name="8.5.0"></a>
# [8.5.0](https://github.com/videojs/video.js/compare/v8.4.2...v8.5.0) (2023-06-12)
### Features
* Add useSVGIcons option ([#8260](https://github.com/videojs/video.js/issues/8260)) ([6fc0dc7](https://github.com/videojs/video.js/commit/6fc0dc7))
<a name="8.4.2"></a> <a name="8.4.2"></a>
## [8.4.2](https://github.com/videojs/video.js/compare/v8.4.1...v8.4.2) (2023-06-06) ## [8.4.2](https://github.com/videojs/video.js/compare/v8.4.1...v8.4.2) (2023-06-06)

2
CONTRIBUTING.md
View File

@ -47,7 +47,7 @@ There's also other Video.js projects where you can help. (check the [video.js or
[GitHub Issues](https://github.com/videojs/video.js/issues) are used for all discussions around the codebase, including **bugs**, **features**, and other **enhancements**. [GitHub Issues](https://github.com/videojs/video.js/issues) are used for all discussions around the codebase, including **bugs**, **features**, and other **enhancements**.
When filling out an issue, make sure to fill out the questions in the When filling out an issue, please respond to all of the questions in the template, including as much information as possible.
### Reporting a Bug ### Reporting a Bug

2
README.md
View File

@ -143,7 +143,7 @@ Video.js is [licensed][license] under the Apache License, Version 2.0.
[npm-link]: https://nodei.co/npm/video.js/ [npm-link]: https://nodei.co/npm/video.js/
[options]: docs/guides/options.md [options]: https://videojs.com/guides/options/
[plugins]: https://videojs.com/plugins/ [plugins]: https://videojs.com/plugins/

5
build/netlify.js
View File

@ -22,6 +22,9 @@ sh.rm('-rf', deployDir);
// make sure the directory exists // make sure the directory exists
sh.mkdir('-p', deployDir); sh.mkdir('-p', deployDir);
// create sub-directory for images
sh.mkdir('-p', `${deployDir}/src`);
// create nested directories // create nested directories
files files
.map((file) => path.dirname(file)) .map((file) => path.dirname(file))
@ -29,7 +32,7 @@ files
// copy files/folders to deploy dir // copy files/folders to deploy dir
files files
.concat('dist', 'index.html', 'sandbox', 'docs') .concat('dist', 'index.html', 'sandbox', 'docs', 'src/images')
.forEach((file) => sh.cp('-r', file, path.join(deployDir, file))); .forEach((file) => sh.cp('-r', file, path.join(deployDir, file)));
sh.rm(path.join(deployDir, 'dist', `video-js-${pkg.version}.zip`)); sh.rm(path.join(deployDir, 'dist', `video-js-${pkg.version}.zip`));

2
docs/index.md
View File

@ -8,7 +8,7 @@ The most useful API doc to start with is usually the [Player][api-player] class.
## Guides ## Guides
More in-depth instructional [guides](vjs-guides) are found on the main [Video.js website](vjs-website). The guides explain general topics and use cases (e.g. setup). More in-depth instructional [guides][vjs-guides] are found on the main [Video.js website][vjs-website]. The guides explain general topics and use cases (e.g. setup).
The full list of articles is on the [guides page][vjs-guides]. If you are looking for troubleshooting information, try the [FAQ][vjs-faq] and [troubleshooting][vjs-troubleshooting] pages. The full list of articles is on the [guides page][vjs-guides]. If you are looking for troubleshooting information, try the [FAQ][vjs-faq] and [troubleshooting][vjs-troubleshooting] pages.

55
docs/translations-needed.md
View File

@ -64,7 +64,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -135,7 +135,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -214,7 +214,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -309,7 +309,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -367,7 +367,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -394,9 +394,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Skip backward {1} seconds | | | Skip backward {1} seconds |
| | Skip forward {1} seconds | | | Skip forward {1} seconds |
| en-GB.json (has 1) | Needs manual checking. Can safely use most default strings. | | en-GB.json (has 1) | Needs manual checking. Can safely use most default strings. |
| es.json (missing 3) | Playing in Picture-in-Picture | | es.json (missing 1) | Playing in Picture-in-Picture |
| | Skip backward {1} seconds |
| | Skip forward {1} seconds |
| et.json (missing 8) | No content | | et.json (missing 8) | No content |
| | Color | | | Color |
| | Opacity | | | Opacity |
@ -413,12 +411,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| | Skip backward {1} seconds | | | Skip backward {1} seconds |
| | Skip forward {1} seconds | | | Skip forward {1} seconds |
| fa.json (missing 6) | No content | | fa.json (Complete) | |
| | Color |
| | Opacity |
| | Text Background |
| | Caption Area Background |
| | Playing in Picture-in-Picture |
| fi.json (missing 71) | Audio Player | | fi.json (missing 71) | Audio Player |
| | Video Player | | | Video Player |
| | Replay | | | Replay |
@ -464,7 +457,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -490,9 +483,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| | Skip backward {1} seconds | | | Skip backward {1} seconds |
| | Skip forward {1} seconds | | | Skip forward {1} seconds |
| fr.json (missing 3) | Playing in Picture-in-Picture | | fr.json (missing 1) | Playing in Picture-in-Picture |
| | Skip backward {1} seconds |
| | Skip forward {1} seconds |
| gd.json (missing 10) | Exit Picture-in-Picture | | gd.json (missing 10) | Exit Picture-in-Picture |
| | Picture-in-Picture | | | Picture-in-Picture |
| | No content | | | No content |
@ -579,7 +570,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -659,7 +650,8 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| | Skip backward {1} seconds | | | Skip backward {1} seconds |
| | Skip forward {1} seconds | | | Skip forward {1} seconds |
| pl.json (missing 7) | Color | | pl.json (missing 8) | Drop shadow |
| | Color |
| | Opacity | | | Opacity |
| | Text Background | | | Text Background |
| | Caption Area Background | | | Caption Area Background |
@ -676,7 +668,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| | Skip backward {1} seconds | | | Skip backward {1} seconds |
| | Skip forward {1} seconds | | | Skip forward {1} seconds |
| pt-PT.json (missing 56) | Audio Player | | pt-PT.json (missing 54) | Audio Player |
| | Video Player | | | Video Player |
| | Seek to live, currently behind live | | | Seek to live, currently behind live |
| | Seek to live, currently playing live | | | Seek to live, currently playing live |
@ -706,7 +698,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -730,9 +722,8 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Text Background | | | Text Background |
| | Caption Area Background | | | Caption Area Background |
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| | Skip backward {1} seconds | | ro.json (missing 9) | Drop shadow |
| | Skip forward {1} seconds | | | No content |
| ro.json (missing 8) | No content |
| | Color | | | Color |
| | Opacity | | | Opacity |
| | Text Background | | | Text Background |
@ -746,8 +737,9 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Text Background | | | Text Background |
| | Caption Area Background | | | Caption Area Background |
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| sk.json (missing 12) | Seek to live, currently behind live | | sk.json (missing 13) | Seek to live, currently behind live |
| | Seek to live, currently playing live | | | Seek to live, currently playing live |
| | Drop shadow |
| | Exit Picture-in-Picture | | | Exit Picture-in-Picture |
| | Picture-in-Picture | | | Picture-in-Picture |
| | No content | | | No content |
@ -817,7 +809,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Raised | | | Raised |
| | Depressed | | | Depressed |
| | Uniform | | | Uniform |
| | Dropshadow | | | Drop shadow |
| | Font Family | | | Font Family |
| | Proportional Sans-Serif | | | Proportional Sans-Serif |
| | Monospace Sans-Serif | | | Monospace Sans-Serif |
@ -876,8 +868,9 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| | Skip backward {1} seconds | | | Skip backward {1} seconds |
| | Skip forward {1} seconds | | | Skip forward {1} seconds |
| uk.json (missing 12) | Seek to live, currently behind live | | uk.json (missing 13) | Seek to live, currently behind live |
| | Seek to live, currently playing live | | | Seek to live, currently playing live |
| | Drop shadow |
| | Exit Picture-in-Picture | | | Exit Picture-in-Picture |
| | Picture-in-Picture | | | Picture-in-Picture |
| | No content | | | No content |
@ -888,8 +881,9 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| | Skip backward {1} seconds | | | Skip backward {1} seconds |
| | Skip forward {1} seconds | | | Skip forward {1} seconds |
| vi.json (missing 13) | Seek to live, currently behind live | | vi.json (missing 14) | Seek to live, currently behind live |
| | Seek to live, currently playing live | | | Seek to live, currently playing live |
| | Drop shadow |
| | {1} is loading. | | | {1} is loading. |
| | Exit Picture-in-Picture | | | Exit Picture-in-Picture |
| | Picture-in-Picture | | | Picture-in-Picture |
@ -901,7 +895,8 @@ This default value is hardcoded as a default to the localize method in the SeekB
| | Playing in Picture-in-Picture | | | Playing in Picture-in-Picture |
| | Skip backward {1} seconds | | | Skip backward {1} seconds |
| | Skip forward {1} seconds | | | Skip forward {1} seconds |
| zh-CN.json (missing 1) | Playing in Picture-in-Picture | | zh-CN.json (missing 2) | Drop shadow |
| | Playing in Picture-in-Picture |
| zh-TW.json (missing 1) | Playing in Picture-in-Picture | | zh-TW.json (missing 1) | Playing in Picture-in-Picture |
<!-- END langtable --> <!-- END langtable -->

2
index.html
View File

@ -14,6 +14,8 @@
<li><a href="sandbox/responsive.html">Responsive 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/middleware-play.html">Middleware Play Demo</a></li>
<li><a href="sandbox/icons.html">Icons 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/focus-visible.html">Focus Visible Demo</a></li>
<li><a href="sandbox/embeds.html">Embeds 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/descriptions.html">Descriptions Demo</a></li>

2
lang/ar.json
View File

@ -68,7 +68,7 @@
"Raised": "بارز", "Raised": "بارز",
"Depressed": "منخفض", "Depressed": "منخفض",
"Uniform": "منتظم", "Uniform": "منتظم",
"Dropshadow": "ظل خلفي", "Drop shadow": "ظل خلفي",
"Font Family": "عائلة الخطوط", "Font Family": "عائلة الخطوط",
"Proportional Sans-Serif": "Proportional Sans-Serif", "Proportional Sans-Serif": "Proportional Sans-Serif",
"Monospace Sans-Serif": "Monospace Sans-Serif", "Monospace Sans-Serif": "Monospace Sans-Serif",

97
lang/az.json Normal file
View File

@ -0,0 +1,97 @@
{
"Audio Player": "Audiopleyer",
"Video Player": "Videopleyer",
"Play": "Oynat",
"Pause": "Pauza",
"Replay": "Yenidən oynat",
"Current Time": "Cari Vaxt",
"Duration": "Müddət",
"Remaining Time": "Qalan vaxt",
"Stream Type": "Yayım növü",
"LIVE": "CANLI",
"Seek to live, currently behind live": "Canlı yayım axtarışı, hal-hazırda canlı yayımdan geridədir",
"Seek to live, currently playing live": "Canlı yayım axtarışı, hal-hazırda canlı yayım göstərilir",
"Loaded": "Yükləndi",
"Progress": "Yüklənmə",
"Progress Bar": "Yüklənmə göstəricisi",
"progress bar timing: currentTime={1} duration={2}": "{1} / {2}",
"Fullscreen": "Tam ekran",
"Exit Fullscreen": "Tam ekrandan çıx",
"Mute": "Səssizi qoş",
"Unmute": "Səssizi söndür",
"Playback Rate": "Oynatma sürəti",
"Subtitles": "Alt yazılar",
"subtitles off": "Alt yazıları söndür",
"Captions": "Başlıqlar",
"captions off": "Başlıqları söndür",
"Chapters": "Fəsillər",
"Descriptions": "Təsvirlər",
"descriptions off": "Təsvirləri söndür",
"Audio Track": "Audio Trek",
"Volume Level": "Səs Səviyyəsi",
"You aborted the media playback": "Siz medianın oxudulmasını dayandırdınız",
"A network error caused the media download to fail part-way.": "Şəbəkə xətası səbəbindən medianın endirilməsi yarıda qaldı.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "Yükləmə xətası.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Media faylının korlanması səbəbilə və ya media faylın brauzerinizin dəstəkləmədiyi funksiyalardan istifadə etdiyinə görə medianın oxudulması dayandırılıb.",
"No compatible source was found for this media.": "Bu media üçün uyğun mənbə tapılmadı.",
"The media is encrypted and we do not have the keys to decrypt it.": "Media faylı şifrələnib və onun şifrəsini açmaq üçün açarlar yoxdur.",
"Play Video": "Videonu oynat",
"Close": "Bağla",
"Close Modal Dialog": "Modal dialoqunu bağla",
"Modal Window": "Modal pəncərəsi",
"This is a modal window": "Bu modal pəncərəsidir",
"This modal can be closed by pressing the Escape key or activating the close button.": "Bu modal Escape düyməsini basmaqla və ya bağlama düyməsini sıxmaqla bağlana bilər.",
", opens captions settings dialog": ", başlıq parametrləri dialoqunu açır",
", opens subtitles settings dialog": ", altyazı parametrləri dialoqunu açır",
", opens descriptions settings dialog": ", təsvir parametrləri dialoqunu açır",
", selected": ", seçilmiş",
"captions settings": "başlıq parametrləri",
"subtitles settings": "altyazı parametrləri",
"descriptions settings": "təsvir parametrləri",
"Text": "Tekst",
"White": "Ağ",
"Black": "Qara",
"Red": "Qırmızı",
"Green": "Yaşıl",
"Blue": "Göy",
"Yellow": "Sarı",
"Magenta": "Bənövşəyi",
"Cyan": "Mavi",
"Background": "Fon",
"Window": "Pəncərə",
"Transparent": "Şəffaf",
"Semi-Transparent": "Yarım-Şəffaf",
"Opaque": "Qeyri-şəffaf",
"Font Size": "Şrift Ölçüsü",
"Text Edge Style": "Mətnin kənarlarının üslubu",
"None": "Heç biri",
"Raised": "Artırılmış",
"Depressed": "Azaldılmış",
"Uniform": "Ümumiləşdirilmiş",
"Drop shadow": "Arxa kölgə",
"Font Family": "Şrift Ailəsi",
"Proportional Sans-Serif": "Proporsional Sans-Serif",
"Monospace Sans-Serif": "Birenli Sans-Serif",
"Proportional Serif": "Proporsional Serif",
"Monospace Serif": "Birenli Serif",
"Casual": "Gündəlik",
"Script": "Skript",
"Small Caps": "Kiçik böyük hərflər",
"Reset": "Sıfırla",
"restore all settings to the default values": "bütün parametrləri susmaya görə bərpa edin",
"Done": "Bitdi",
"Caption Settings Dialog": "Başlıq Parametrləri Dialoqu",
"Beginning of dialog window. Escape will cancel and close the window.": "Dialoq pəncərəsinin başlanğıcı. Escape düyməsi ləğv edəcək və pəncərəni bağlayacaq.",
"End of dialog window.": "Dialoq pəncərəsinin sonu.",
"{1} is loading.": "{1} yüklənir.",
"Exit Picture-in-Picture": "Şəkil içində şəkil rejimindən çıxın",
"Picture-in-Picture": "Şəkil içində şəkil rejimi",
"No content": "Məzmun yoxdur",
"Color": "Rəng",
"Opacity": "Qeyri-şəffaflıq",
"Text Background": "Tekst Fonu",
"Caption Area Background": "Başlıq Sahəsinin Fonu",
"Playing in Picture-in-Picture": "Şəkil içində şəkil rejimində oynayır",
"Skip backward {1} seconds": "{1} saniyə geriyə keçin",
"Skip forward {1} seconds": "{1} saniyə qabağa keçin"
}

2
lang/bn.json
View File

@ -68,7 +68,7 @@
"Raised": "বাড়ানো হয়েছে", "Raised": "বাড়ানো হয়েছে",
"Depressed": "নামানো হয়েছে", "Depressed": "নামানো হয়েছে",
"Uniform": "ইউনিফর্ম", "Uniform": "ইউনিফর্ম",
"Dropshadow": "ড্রপশ্যাডো", "Drop shadow": "ড্রপশ্যাডো",
"Font Family": "অক্ষরের পরিবার", "Font Family": "অক্ষরের পরিবার",
"Proportional Sans-Serif": "সমানুপাতিক সানস-সেরিফ", "Proportional Sans-Serif": "সমানুপাতিক সানস-সেরিফ",
"Monospace Sans-Serif": "মনোস্পেস সানস-সেরিফ", "Monospace Sans-Serif": "মনোস্পেস সানস-সেরিফ",

99
lang/ca.json
View File

@ -1,26 +1,97 @@
{ {
"Play": "Reproducció", "Audio Player": "Reproductor d'àudio",
"Video Player": "Reproductor de vídeo",
"Play": "Reproduir",
"Pause": "Pausa", "Pause": "Pausa",
"Current Time": "Temps reproduït", "Replay": "Repetir",
"Duration": "Durada total", "Current Time": "Temps actual",
"Duration": "Durada",
"Remaining Time": "Temps restant", "Remaining Time": "Temps restant",
"Stream Type": "Tipus de seqüència", "Stream Type": "Tipus d'emissió",
"LIVE": "EN DIRECTE", "LIVE": "EN DIRECTE",
"Seek to live, currently behind live": "Anar en directe, actualment darrere de la retransmissió en directe",
"Seek to live, currently playing live": "Anar en directe, actualment en directe",
"Loaded": "Carregat", "Loaded": "Carregat",
"Progress": "Progrés", "Progress": "Progrés",
"Progress Bar": "Barra de progrés",
"progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
"Fullscreen": "Pantalla completa", "Fullscreen": "Pantalla completa",
"Exit Fullscreen": "Pantalla no completa", "Exit Fullscreen": "Sortir de pantalla completa",
"Mute": "Silencia", "Mute": "Silenciar",
"Unmute": "Amb so", "Unmute": "Activar el so",
"Playback Rate": "Velocitat de reproducció", "Playback Rate": "Velocitat de reproducció",
"Subtitles": "Subtítols", "Subtitles": "Subtítols",
"subtitles off": "Subtítols desactivats", "subtitles off": "Desactivar subtítols",
"Captions": "Llegendes", "Captions": "Llegendes",
"captions off": "Llegendes desactivades", "captions off": "Desactivar llegendes",
"Chapters": "Capítols", "Chapters": "Capítols",
"You aborted the media playback": "Heu interromput la reproducció del vídeo.", "Descriptions": "Descripcions",
"A network error caused the media download to fail part-way.": "Un error de la xarxa ha interromput la baixada del vídeo.", "descriptions off": "Desactivar descripcions",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "No s'ha pogut carregar el vídeo perquè el servidor o la xarxa han fallat, o bé perquè el seu format no és compatible.", "Audio Track": "Pista d'àudio",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducció de vídeo s'ha interrumput per un problema de corrupció de dades o bé perquè el vídeo demanava funcions que el vostre navegador no ofereix.", "Volume Level": "Nivell de volum",
"No compatible source was found for this media.": "No s'ha trobat cap font compatible amb el vídeo." "You aborted the media playback": "Has interromput la reproducció del contingut",
"A network error caused the media download to fail part-way.": "Un error de xarxa ha interromput la descàrrega del contingut.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "No s'ha pogut carregar el contingut, ja sigui perquè el servidor o la xarxa han fallat o perquè el format no està suportat.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducció del contingut s'ha interromput a causa d'un problema de corrupció o perquè el contingut fa servir funcions que el teu navegador no suporta.",
"No compatible source was found for this media.": "No s'ha trobat una font compatible per a aquest contingut.",
"The media is encrypted and we do not have the keys to decrypt it.": "El contingut està xifrat i no disposem de les claus per desxifrar-lo.",
"Play Video": "Reproduir vídeo",
"Close": "Tancar",
"Close Modal Dialog": "Tancar el diàleg modal",
"Modal Window": "Finestra modal",
"This is a modal window": "Aquesta és una finestra modal",
"This modal can be closed by pressing the Escape key or activating the close button.": "Aquesta finestra es pot tancar prement la tecla Escape o activant el botó de tancar.",
", opens captions settings dialog": ", obre el diàleg de configuració de subtítols",
", opens subtitles settings dialog": ", obre el diàleg de configuració de subtítols",
", opens descriptions settings dialog": ", obre el diàleg de configuració de descripcions",
", selected": ", seleccionat",
"captions settings": "configuració de subtítols",
"subtitles settings": "configuració de subtítols",
"descriptions settings": "configuració de descripcions",
"Text": "Text",
"White": "Blanc",
"Black": "Negre",
"Red": "Vermell",
"Green": "Verd",
"Blue": "Blau",
"Yellow": "Groc",
"Magenta": "Magenta",
"Cyan": "Cian",
"Background": "Fons",
"Window": "Finestra",
"Transparent": "Transparent",
"Semi-Transparent": "Semi-transparent",
"Opaque": "Opac",
"Font Size": "Mida de la lletra",
"Text Edge Style": "Estil de la vora del text",
"None": "Cap",
"Raised": "Rellevat",
"Depressed": "Premut",
"Uniform": "Uniforme",
"Drop shadow": "Ombra",
"Font Family": "Família tipogràfica",
"Proportional Sans-Serif": "Sense serif proporcional",
"Monospace Sans-Serif": "Monoespaiada sense serif",
"Proportional Serif": "Serif proporcional",
"Monospace Serif": "Monoespaiada amb serif",
"Casual": "Desenfadada",
"Script": "Script",
"Small Caps": "Minúscules",
"Reset": "Restablir",
"restore all settings to the default values": "restaurar totes les configuracions als valors predeterminats",
"Done": "Fet",
"Caption Settings Dialog": "Diàleg de configuració de subtítols",
"Beginning of dialog window. Escape will cancel and close the window.": "Inici del diàleg. L'Escape cancel·larà i tancarà la finestra.",
"End of dialog window.": "Fi del diàleg.",
"{1} is loading.": "S'està carregant {1}.",
"Exit Picture-in-Picture": "Sortir de la imatge en imatge",
"Picture-in-Picture": "Imatge en imatge",
"No content": "Sense contingut",
"Color": "Color",
"Opacity": "Opacitat",
"Text Background": "Fons del text",
"Caption Area Background": "Fons de l'àrea de subtítols",
"Playing in Picture-in-Picture": "Reproduint en imatge en imatge",
"Skip backward {1} seconds": "Salta enrere {1} segons",
"Skip forward {1} seconds": "Salta endavant {1} segons"
} }

2
lang/cs.json
View File

@ -66,7 +66,7 @@
"Raised": "Zvýšený", "Raised": "Zvýšený",
"Depressed": "Propadlý", "Depressed": "Propadlý",
"Uniform": "Rovnoměrný", "Uniform": "Rovnoměrný",
"Dropshadow": "Stínovaný", "Drop shadow": "Stínovaný",
"Font Family": "Rodina písma", "Font Family": "Rodina písma",
"Proportional Sans-Serif": "Proporcionální bezpatkové", "Proportional Sans-Serif": "Proporcionální bezpatkové",
"Monospace Sans-Serif": "Monospace bezpatkové", "Monospace Sans-Serif": "Monospace bezpatkové",

2
lang/cy.json
View File

@ -66,7 +66,7 @@
"Raised":"Uwch", "Raised":"Uwch",
"Depressed":"Is", "Depressed":"Is",
"Uniform":"Unffurf", "Uniform":"Unffurf",
"Dropshadow":"Cysgod cefn", "Drop shadow":"Cysgod cefn",
"Font Family":"Teulu y Ffont", "Font Family":"Teulu y Ffont",
"Proportional Sans-Serif":"Heb-Seriff Cyfraneddol", "Proportional Sans-Serif":"Heb-Seriff Cyfraneddol",
"Monospace Sans-Serif":"Heb-Seriff Unlled", "Monospace Sans-Serif":"Heb-Seriff Unlled",

2
lang/de.json
View File

@ -61,7 +61,7 @@
"Raised": "Erhoben", "Raised": "Erhoben",
"Depressed": "Gedrückt", "Depressed": "Gedrückt",
"Uniform": "Uniform", "Uniform": "Uniform",
"Dropshadow": "Schlagschatten", "Drop shadow": "Schlagschatten",
"Font Family": "Schriftfamilie", "Font Family": "Schriftfamilie",
"Proportional Sans-Serif": "Proportionale Sans-Serif", "Proportional Sans-Serif": "Proportionale Sans-Serif",
"Monospace Sans-Serif": "Monospace Sans-Serif", "Monospace Sans-Serif": "Monospace Sans-Serif",

2
lang/en.json
View File

@ -68,7 +68,7 @@
"Raised": "Raised", "Raised": "Raised",
"Depressed": "Depressed", "Depressed": "Depressed",
"Uniform": "Uniform", "Uniform": "Uniform",
"Dropshadow": "Dropshadow", "Drop shadow": "Drop shadow",
"Font Family": "Font Family", "Font Family": "Font Family",
"Proportional Sans-Serif": "Proportional Sans-Serif", "Proportional Sans-Serif": "Proportional Sans-Serif",
"Monospace Sans-Serif": "Monospace Sans-Serif", "Monospace Sans-Serif": "Monospace Sans-Serif",

6
lang/es.json
View File

@ -68,7 +68,7 @@
"Raised": "En relieve", "Raised": "En relieve",
"Depressed": "Hundido", "Depressed": "Hundido",
"Uniform": "Uniforme", "Uniform": "Uniforme",
"Dropshadow": "Sombra paralela", "Drop shadow": "Sombra paralela",
"Font Family": "Familia de fuente", "Font Family": "Familia de fuente",
"Proportional Sans-Serif": "Sans-Serif proporcional", "Proportional Sans-Serif": "Sans-Serif proporcional",
"Monospace Sans-Serif": "Sans-Serif monoespacio", "Monospace Sans-Serif": "Sans-Serif monoespacio",
@ -90,5 +90,7 @@
"Color": "Color", "Color": "Color",
"Opacity": "Opacidad", "Opacity": "Opacidad",
"Text Background": "Fondo del texto", "Text Background": "Fondo del texto",
"Caption Area Background": "Fondo del área de subtítulos" "Caption Area Background": "Fondo del área de subtítulos",
"Skip forward {1} seconds": "Avanza {1} segundos",
"Skip backward {1} seconds": "Retrocede {1} segundos"
} }

2
lang/et.json
View File

@ -68,7 +68,7 @@
"Raised": "Kõrgem", "Raised": "Kõrgem",
"Depressed": "Madalam", "Depressed": "Madalam",
"Uniform": "Ühtlane", "Uniform": "Ühtlane",
"Dropshadow": "Langeva varjuga", "Drop shadow": "Langeva varjuga",
"Font Family": "Fondipere", "Font Family": "Fondipere",
"Proportional Sans-Serif": "Seriifideta proportsionaalkiri", "Proportional Sans-Serif": "Seriifideta proportsionaalkiri",
"Monospace Sans-Serif": "Seriifideta püsisammkiri", "Monospace Sans-Serif": "Seriifideta püsisammkiri",

2
lang/eu.json
View File

@ -68,7 +68,7 @@
"Raised": "Jasoa", "Raised": "Jasoa",
"Depressed": "Hondoratua", "Depressed": "Hondoratua",
"Uniform": "Uniformea", "Uniform": "Uniformea",
"Dropshadow": "Itzalduna", "Drop shadow": "Itzalduna",
"Font Family": "Letra-tipoa", "Font Family": "Letra-tipoa",
"Proportional Sans-Serif": "Sans-Serif proportzionala", "Proportional Sans-Serif": "Sans-Serif proportzionala",
"Monospace Sans-Serif": "Tarte berdineko Sans-Serif", "Monospace Sans-Serif": "Tarte berdineko Sans-Serif",

2
lang/fa.json
View File

@ -68,7 +68,7 @@
"Raised": "برجسته", "Raised": "برجسته",
"Depressed": "فرورفته", "Depressed": "فرورفته",
"Uniform": "یکنواخت", "Uniform": "یکنواخت",
"Dropshadow": "سایه‌دار", "Drop shadow": "سایه‌دار",
"Font Family": "نوع قلم", "Font Family": "نوع قلم",
"Proportional Sans-Serif": "Sans-Serif متناسب", "Proportional Sans-Serif": "Sans-Serif متناسب",
"Monospace Sans-Serif": "Sans-Serif هم‌عرض", "Monospace Sans-Serif": "Sans-Serif هم‌عرض",

6
lang/fr.json
View File

@ -68,7 +68,7 @@
"Raised": "Élevé", "Raised": "Élevé",
"Depressed": "Enfoncé", "Depressed": "Enfoncé",
"Uniform": "Uniforme", "Uniform": "Uniforme",
"Dropshadow": "Ombre portée", "Drop shadow": "Ombre portée",
"Font Family": "Famille de polices", "Font Family": "Famille de polices",
"Proportional Sans-Serif": "Polices à chasse variable sans empattement (Proportional Sans-Serif)", "Proportional Sans-Serif": "Polices à chasse variable sans empattement (Proportional Sans-Serif)",
"Monospace Sans-Serif": "Polices à chasse fixe sans empattement (Monospace Sans-Serif)", "Monospace Sans-Serif": "Polices à chasse fixe sans empattement (Monospace Sans-Serif)",
@ -90,5 +90,7 @@
"Color": "Couleur", "Color": "Couleur",
"Opacity": "Opacité", "Opacity": "Opacité",
"Text Background": "Arrière-plan du texte", "Text Background": "Arrière-plan du texte",
"Caption Area Background": "Arrière-plan de la zone de sous-titre" "Caption Area Background": "Arrière-plan de la zone de sous-titre",
"Skip backward {1} seconds": "Reculer de {1} secondes",
"Skip forward {1} seconds": "Avancer de {1} secondes"
} }

2
lang/gd.json
View File

@ -68,7 +68,7 @@
"Raised": "Àrdaichte", "Raised": "Àrdaichte",
"Depressed": "Air a bhrùthadh", "Depressed": "Air a bhrùthadh",
"Uniform": "Cunbhalach", "Uniform": "Cunbhalach",
"Dropshadow": "Sgàil", "Drop shadow": "Sgàil",
"Font Family": "Teaghlach a’ chrutha-chlò", "Font Family": "Teaghlach a’ chrutha-chlò",
"Proportional Sans-Serif": "Sans-serif co-rèireach", "Proportional Sans-Serif": "Sans-serif co-rèireach",
"Monospace Sans-Serif": "Sans-serif aon-leud", "Monospace Sans-Serif": "Sans-serif aon-leud",

2
lang/gl.json
View File

@ -68,7 +68,7 @@
"Raised": "Érguida", "Raised": "Érguida",
"Depressed": "Caída", "Depressed": "Caída",
"Uniform": "Uniforme", "Uniform": "Uniforme",
"Dropshadow": "Sombra caída", "Drop shadow": "Sombra caída",
"Font Family": "Familia de letras", "Font Family": "Familia de letras",
"Proportional Sans-Serif": "Sans-Serif proporcional", "Proportional Sans-Serif": "Sans-Serif proporcional",
"Monospace Sans-Serif": "Sans-Serif monoespazo (caixa fixa)", "Monospace Sans-Serif": "Sans-Serif monoespazo (caixa fixa)",

2
lang/he.json
View File

@ -66,7 +66,7 @@
"Raised": "מורם", "Raised": "מורם",
"Depressed": "מורד", "Depressed": "מורד",
"Uniform": "אחיד", "Uniform": "אחיד",
"Dropshadow": "הטלת צל", "Drop shadow": "הטלת צל",
"Font Family": "משפחת גופן", "Font Family": "משפחת גופן",
"Proportional Sans-Serif": "פרופורציוני וללא תגיות (Proportional Sans-Serif)", "Proportional Sans-Serif": "פרופורציוני וללא תגיות (Proportional Sans-Serif)",
"Monospace Sans-Serif": "ברוחב אחיד וללא תגיות (Monospace Sans-Serif)", "Monospace Sans-Serif": "ברוחב אחיד וללא תגיות (Monospace Sans-Serif)",

2
lang/hi.json
View File

@ -68,7 +68,7 @@
"Raised": "उठा हुआ", "Raised": "उठा हुआ",
"Depressed": "उदास", "Depressed": "उदास",
"Uniform": "वर्दी", "Uniform": "वर्दी",
"Dropshadow": "परछाई", "Drop shadow": "परछाई",
"Font Family": "फॉण्ट परिवार", "Font Family": "फॉण्ट परिवार",
"Proportional Sans-Serif": "प्रोपोरशनल साँस-सेरिफ", "Proportional Sans-Serif": "प्रोपोरशनल साँस-सेरिफ",
"Monospace Sans-Serif": "मोनोस्पास साँस-सेरिफ", "Monospace Sans-Serif": "मोनोस्पास साँस-सेरिफ",

2
lang/hu.json
View File

@ -61,7 +61,7 @@
"Text Edge Style": "Szövegél stílus", "Text Edge Style": "Szövegél stílus",
"This is a modal window": "Ez egy felugró ablak", "This is a modal window": "Ez egy felugró ablak",
"Cyan": "Cián", "Cyan": "Cián",
"Dropshadow": "Árnyék", "Drop shadow": "Árnyék",
"End of dialog window.": "Párbeszédablak vége.", "End of dialog window.": "Párbeszédablak vége.",
"Progress Bar": "Folyamatjelző sáv", "Progress Bar": "Folyamatjelző sáv",
"Beginning of dialog window. Escape will cancel and close the window.": "Párbeszédablak eleje. Az Escape gomb befejezi és bezárja az ablakot.", "Beginning of dialog window. Escape will cancel and close the window.": "Párbeszédablak eleje. Az Escape gomb befejezi és bezárja az ablakot.",

2
lang/it.json
View File

@ -64,7 +64,7 @@
"Text Edge Style": "Stile dei bordi del testo", "Text Edge Style": "Stile dei bordi del testo",
"None": "Nessuno", "None": "Nessuno",
"Uniform": "Uniforme", "Uniform": "Uniforme",
"Dropshadow": "Ombreggiatura", "Drop shadow": "Ombreggiatura",
"Font Family": "Famiglia di caratteri", "Font Family": "Famiglia di caratteri",
"Proportional Sans-Serif": "Sans-Serif proporzionale", "Proportional Sans-Serif": "Sans-Serif proporzionale",
"Monospace Sans-Serif": "Sans-Serif monospazio", "Monospace Sans-Serif": "Sans-Serif monospazio",

2
lang/ja.json
View File

@ -68,7 +68,7 @@
"Raised": "浮き出し", "Raised": "浮き出し",
"Depressed": "浮き彫り", "Depressed": "浮き彫り",
"Uniform": "均一", "Uniform": "均一",
"Dropshadow": "影付き", "Drop shadow": "影付き",
"Font Family": "フォントの種類", "Font Family": "フォントの種類",
"Proportional Sans-Serif": "セリフなし可変幅フォント", "Proportional Sans-Serif": "セリフなし可変幅フォント",
"Monospace Sans-Serif": "セリフなし等幅フォント", "Monospace Sans-Serif": "セリフなし等幅フォント",

2
lang/ko.json
View File

@ -68,7 +68,7 @@
"Raised": "글자 위치 올림", "Raised": "글자 위치 올림",
"Depressed": "글자 위치 내림", "Depressed": "글자 위치 내림",
"Uniform": "균일", "Uniform": "균일",
"Dropshadow": "그림자 효과 넣기", "Drop shadow": "그림자 효과 넣기",
"Font Family": "폰트 모음", "Font Family": "폰트 모음",
"Proportional Sans-Serif": "비례 산세리프체", "Proportional Sans-Serif": "비례 산세리프체",
"Monospace Sans-Serif": "고정폭 산세리프체", "Monospace Sans-Serif": "고정폭 산세리프체",

2
lang/lv.json
View File

@ -68,7 +68,7 @@
"Raised": "Izvirzīts", "Raised": "Izvirzīts",
"Depressed": "Samazināts", "Depressed": "Samazināts",
"Uniform": "Vienmērīgs", "Uniform": "Vienmērīgs",
"Dropshadow": "Ēnots", "Drop shadow": "Ēnots",
"Font Family": "Šrifts", "Font Family": "Šrifts",
"Proportional Sans-Serif": "Proportional Sans-Serif", "Proportional Sans-Serif": "Proportional Sans-Serif",
"Monospace Sans-Serif": "Monospace Sans-Serif", "Monospace Sans-Serif": "Monospace Sans-Serif",

2
lang/nb.json
View File

@ -68,7 +68,7 @@
"Raised": "Uthevet", "Raised": "Uthevet",
"Depressed": "Nedtrykt", "Depressed": "Nedtrykt",
"Uniform": "Enkel", "Uniform": "Enkel",
"Dropshadow": "Skygge", "Drop shadow": "Skygge",
"Font Family": "Skrifttype", "Font Family": "Skrifttype",
"Proportional Sans-Serif": "Proporsjonal skrift uten seriffer", "Proportional Sans-Serif": "Proporsjonal skrift uten seriffer",
"Monospace Sans-Serif": "Fastbreddeskrift uten seriffer", "Monospace Sans-Serif": "Fastbreddeskrift uten seriffer",

2
lang/nl.json
View File

@ -68,7 +68,7 @@
"Raised": "Verhoogd", "Raised": "Verhoogd",
"Depressed": "Ingedrukt", "Depressed": "Ingedrukt",
"Uniform": "Uniform", "Uniform": "Uniform",
"Dropshadow": "Schaduw", "Drop shadow": "Schaduw",
"Font Family": "Lettertype", "Font Family": "Lettertype",
"Proportional Sans-Serif": "Proportioneel sans-serif", "Proportional Sans-Serif": "Proportioneel sans-serif",
"Monospace Sans-Serif": "Monospace sans-serif", "Monospace Sans-Serif": "Monospace sans-serif",

2
lang/nn.json
View File

@ -68,7 +68,7 @@
"Raised": "Utheva", "Raised": "Utheva",
"Depressed": "Nedtrykt", "Depressed": "Nedtrykt",
"Uniform": "Enkel", "Uniform": "Enkel",
"Dropshadow": "Skugge", "Drop shadow": "Skugge",
"Font Family": "Skrifttype", "Font Family": "Skrifttype",
"Proportional Sans-Serif": "Proporsjonal skrift utan seriffar", "Proportional Sans-Serif": "Proporsjonal skrift utan seriffar",
"Monospace Sans-Serif": "Fastbreddeskrift utan seriffar", "Monospace Sans-Serif": "Fastbreddeskrift utan seriffar",

2
lang/oc.json
View File

@ -68,7 +68,7 @@
"Raised": "Naut", "Raised": "Naut",
"Depressed": "Enfonsat", "Depressed": "Enfonsat",
"Uniform": "Unifòrme", "Uniform": "Unifòrme",
"Dropshadow": "Ombrat", "Drop shadow": "Ombrat",
"Font Family": "Familha de polissa", "Font Family": "Familha de polissa",
"Proportional Sans-Serif": "Sans-Serif proporcionala", "Proportional Sans-Serif": "Sans-Serif proporcionala",
"Monospace Sans-Serif": "Monospace Sans-Serif", "Monospace Sans-Serif": "Monospace Sans-Serif",

2
lang/pt-BR.json
View File

@ -67,7 +67,7 @@
"Raised": "Elevado", "Raised": "Elevado",
"Depressed": "Acachapado", "Depressed": "Acachapado",
"Uniform": "Uniforme", "Uniform": "Uniforme",
"Dropshadow": "Sombra de projeção", "Drop shadow": "Sombra de projeção",
"Font Family": "Família da Fonte", "Font Family": "Família da Fonte",
"Proportional Sans-Serif": "Sans-Serif(Sem serifa) Proporcional", "Proportional Sans-Serif": "Sans-Serif(Sem serifa) Proporcional",
"Monospace Sans-Serif": "Sans-Serif(Sem serifa) Monoespaçada", "Monospace Sans-Serif": "Sans-Serif(Sem serifa) Monoespaçada",

4
lang/pt-PT.json
View File

@ -37,5 +37,7 @@
", opens captions settings dialog": ", abre janela com definições de legendas", ", opens captions settings dialog": ", abre janela com definições de legendas",
", opens subtitles settings dialog": ", abre janela com definições de legendas", ", opens subtitles settings dialog": ", abre janela com definições de legendas",
", opens descriptions settings dialog": ", abre janela com definições de descrições", ", opens descriptions settings dialog": ", abre janela com definições de descrições",
", selected": ", seleccionado" ", selected": ", seleccionado",
"Skip backward {1} seconds": "Recuar de {1} segundos",
"Skip forward {1} seconds": "Avançar de {1} segundos"
} }

2
lang/ru.json
View File

@ -68,7 +68,7 @@
"Raised": "Поднятый", "Raised": "Поднятый",
"Depressed": "Пониженный", "Depressed": "Пониженный",
"Uniform": "Одинаковый", "Uniform": "Одинаковый",
"Dropshadow": "Тень", "Drop shadow": "Тень",
"Font Family": "Шрифт", "Font Family": "Шрифт",
"Proportional Sans-Serif": "Пропорциональный без засечек", "Proportional Sans-Serif": "Пропорциональный без засечек",
"Monospace Sans-Serif": "Моноширинный без засечек", "Monospace Sans-Serif": "Моноширинный без засечек",

2
lang/sl.json
View File

@ -68,7 +68,7 @@
"Raised": "Dvignjeno", "Raised": "Dvignjeno",
"Depressed": "Vtisnjeno", "Depressed": "Vtisnjeno",
"Uniform": "Enakomerno", "Uniform": "Enakomerno",
"Dropshadow": "S senco", "Drop shadow": "S senco",
"Font Family": "Družina pisave", "Font Family": "Družina pisave",
"Small Caps": "Male črke", "Small Caps": "Male črke",
"Reset": "Ponastavi", "Reset": "Ponastavi",

2
lang/sv.json
View File

@ -21,7 +21,7 @@
"Depressed": "Deprimerad", "Depressed": "Deprimerad",
"Descriptions": "Beskrivningar", "Descriptions": "Beskrivningar",
"Done": "Klar", "Done": "Klar",
"Dropshadow": "DropSkugga", "Drop shadow": "DropSkugga",
"Duration": "Total tid", "Duration": "Total tid",
"End of dialog window.": "Slutet av dialogfönster.", "End of dialog window.": "Slutet av dialogfönster.",
"Font Family": "Typsnittsfamilj", "Font Family": "Typsnittsfamilj",

2
lang/te.json
View File

@ -68,7 +68,7 @@
"Raised": "పెంచబడింది", "Raised": "పెంచబడింది",
"Depressed": "అణగారిన", "Depressed": "అణగారిన",
"Uniform": "ఏకరీతి", "Uniform": "ఏకరీతి",
"Dropshadow": "డ్రాప్‌షాడో", "Drop shadow": "డ్రాప్‌షాడో",
"Font Family": "ఫాంట్ కుటుంబం", "Font Family": "ఫాంట్ కుటుంబం",
"Proportional Sans-Serif": "ప్రొపోర్షన్ సాన్స్-సెరిఫ్", "Proportional Sans-Serif": "ప్రొపోర్షన్ సాన్స్-సెరిఫ్",
"Monospace Sans-Serif": "మోనోస్పేస్ సాన్స్-సెరిఫ్", "Monospace Sans-Serif": "మోనోస్పేస్ సాన్స్-సెరిఫ్",

2
lang/th.json
View File

@ -68,7 +68,7 @@
"Raised": "ยกขึ้น", "Raised": "ยกขึ้น",
"Depressed": "ปล่อยออก", "Depressed": "ปล่อยออก",
"Uniform": "รูปแบบ", "Uniform": "รูปแบบ",
"Dropshadow": "เพิ่มเงา", "Drop shadow": "เพิ่มเงา",
"Font Family": "ตระกูลแบบอักษร", "Font Family": "ตระกูลแบบอักษร",
"Proportional Sans-Serif": "Sans-Serif ตามสัดส่วน", "Proportional Sans-Serif": "Sans-Serif ตามสัดส่วน",
"Monospace Sans-Serif": "Sans-Serif ช่องว่างเดี่ยว", "Monospace Sans-Serif": "Sans-Serif ช่องว่างเดี่ยว",

2
lang/tr.json
View File

@ -68,7 +68,7 @@
"Raised": "Kabarık", "Raised": "Kabarık",
"Depressed": "Yassı", "Depressed": "Yassı",
"Uniform": "Düz", "Uniform": "Düz",
"Dropshadow": "Gölgeli", "Drop shadow": "Gölgeli",
"Font Family": "Yazı Tipi", "Font Family": "Yazı Tipi",
"Proportional Sans-Serif": "Orantılı Sans-Serif", "Proportional Sans-Serif": "Orantılı Sans-Serif",
"Monospace Sans-Serif": "Eşaralıklı Sans-Serif", "Monospace Sans-Serif": "Eşaralıklı Sans-Serif",

2
lang/zh-TW.json
View File

@ -67,7 +67,7 @@
"Raised": "浮雕", "Raised": "浮雕",
"Depressed": "壓低", "Depressed": "壓低",
"Uniform": "均勻", "Uniform": "均勻",
"Dropshadow": "下陰影", "Drop shadow": "下陰影",
"Font Family": "字型系列", "Font Family": "字型系列",
"Proportional Sans-Serif": "調和間距無襯線字型", "Proportional Sans-Serif": "調和間距無襯線字型",
"Monospace Sans-Serif": "等寬無襯線字型", "Monospace Sans-Serif": "等寬無襯線字型",

4471
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "video.js", "name": "video.js",
"description": "An HTML5 video player that supports HLS and DASH with a common API and skin.", "description": "An HTML5 video player that supports HLS and DASH with a common API and skin.",
"version": "8.4.2", "version": "8.6.1",
"main": "./dist/video.cjs.js", "main": "./dist/video.cjs.js",
"module": "./dist/video.es.js", "module": "./dist/video.es.js",
"style": "./dist/video-js.css", "style": "./dist/video-js.css",
@ -86,24 +86,25 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "3.3.1", "@videojs/http-streaming": "3.7.0",
"@videojs/vhs-utils": "^4.0.0", "@videojs/vhs-utils": "^4.0.0",
"@videojs/xhr": "2.6.0", "@videojs/xhr": "2.6.0",
"aes-decrypter": "^4.0.1", "aes-decrypter": "^4.0.1",
"global": "4.4.0", "global": "4.4.0",
"keycode": "2.2.0", "keycode": "2.2.0",
"m3u8-parser": "^6.0.0", "m3u8-parser": "^7.1.0",
"mpd-parser": "^1.0.1", "mpd-parser": "^1.2.2",
"mux.js": "^6.2.0", "mux.js": "^7.0.1",
"safe-json-parse": "4.0.0", "safe-json-parse": "4.0.0",
"videojs-contrib-quality-levels": "4.0.0", "videojs-contrib-quality-levels": "4.0.0",
"videojs-font": "4.1.0", "videojs-font": "4.1.0",
"videojs-vtt.js": "0.15.4" "videojs-vtt.js": "0.15.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.9.0", "@babel/core": "^7.9.0",
"@babel/plugin-transform-runtime": "^7.9.0", "@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0", "@babel/preset-env": "^7.9.0",
"@rollup/plugin-image": "^3.0.2",
"@rollup/plugin-replace": "^2.4.1", "@rollup/plugin-replace": "^2.4.1",
"@types/node": "^18.8.3", "@types/node": "^18.8.3",
"access-sniff": "^3.2.0", "access-sniff": "^3.2.0",
@ -155,6 +156,7 @@
"rollup-plugin-node-resolve": "^4.2.4", "rollup-plugin-node-resolve": "^4.2.4",
"rollup-plugin-progress": "^1.1.2", "rollup-plugin-progress": "^1.1.2",
"rollup-plugin-stub": "^1.2.0", "rollup-plugin-stub": "^1.2.0",
"rollup-plugin-svg": "^2.0.0",
"sass": "^1.34.0", "sass": "^1.34.0",
"semver": "^5.7.0", "semver": "^5.7.0",
"shelljs": "^0.8.5", "shelljs": "^0.8.5",

14
rollup.config.js
View File

@ -13,8 +13,10 @@ import multiEntry from 'rollup-plugin-multi-entry';
import stub from 'rollup-plugin-stub'; import stub from 'rollup-plugin-stub';
import isCI from 'is-ci'; import isCI from 'is-ci';
import replace from '@rollup/plugin-replace'; import replace from '@rollup/plugin-replace';
import image from '@rollup/plugin-image';
import istanbul from 'rollup-plugin-istanbul'; import istanbul from 'rollup-plugin-istanbul';
import externalGlobals from 'rollup-plugin-external-globals'; import externalGlobals from 'rollup-plugin-external-globals';
import svg from 'rollup-plugin-svg';
const excludeCoverage = [ const excludeCoverage = [
'test/**', 'test/**',
@ -67,9 +69,7 @@ const primedBabel = babel({
'not baidu 7', 'not baidu 7',
'not and_qq 11', 'not and_qq 11',
'not and_uc 12', 'not and_uc 12',
'not kaios 2', 'not op_mini all'
'not op_mini all',
'not op_mob 64'
], ],
bugfixes: true, bugfixes: true,
loose: true, loose: true,
@ -151,6 +151,7 @@ export default cliargs => [
primedExternalGlobals, primedExternalGlobals,
primedCjs, primedCjs,
primedBabel, primedBabel,
svg(),
cliargs.progress !== false ? progress() : {} cliargs.progress !== false ? progress() : {}
], ],
onwarn, onwarn,
@ -176,6 +177,7 @@ export default cliargs => [
primedExternalGlobals, primedExternalGlobals,
primedCjs, primedCjs,
primedBabel, primedBabel,
svg(),
cliargs.progress !== false ? progress() : {} cliargs.progress !== false ? progress() : {}
], ],
onwarn, onwarn,
@ -201,6 +203,7 @@ export default cliargs => [
primedCjs, primedCjs,
CI_TEST_TYPE === 'coverage' ? istanbul({exclude: excludeCoverage}) : {}, CI_TEST_TYPE === 'coverage' ? istanbul({exclude: excludeCoverage}) : {},
primedBabel, primedBabel,
image(),
cliargs.progress !== false ? progress() : {} cliargs.progress !== false ? progress() : {}
], ],
@ -238,6 +241,7 @@ export default cliargs => [
}), }),
json(), json(),
primedBabel, primedBabel,
svg(),
cliargs.progress !== false ? progress() : {} cliargs.progress !== false ? progress() : {}
], ],
onwarn, onwarn,
@ -264,6 +268,7 @@ export default cliargs => [
primedExternalGlobals, primedExternalGlobals,
primedCjs, primedCjs,
primedBabel, primedBabel,
svg(),
cliargs.progress !== false ? progress() : {} cliargs.progress !== false ? progress() : {}
], ],
onwarn, onwarn,
@ -289,6 +294,7 @@ export default cliargs => [
plugins: [ plugins: [
json(), json(),
primedBabel, primedBabel,
svg(),
cliargs.progress !== false ? progress() : {} cliargs.progress !== false ? progress() : {}
], ],
onwarn, onwarn,
@ -311,6 +317,7 @@ export default cliargs => [
primedExternalGlobals, primedExternalGlobals,
primedCjs, primedCjs,
primedBabel, primedBabel,
svg(),
cliargs.progress !== false ? progress() : {} cliargs.progress !== false ? progress() : {}
], ],
onwarn, onwarn,
@ -334,6 +341,7 @@ export default cliargs => [
primedExternalGlobals, primedExternalGlobals,
primedCjs, primedCjs,
primedBabel, primedBabel,
svg(),
cliargs.progress !== false ? progress() : {} cliargs.progress !== false ? progress() : {}
], ],
onwarn, onwarn,

36
sandbox/svg-icons-enabled.html.example Normal file
View File

@ -0,0 +1,36 @@
<!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>
</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 run `npm start` and open the svg-icons-enabled.html</p>
<pre>npm start</pre>
<pre>open http://localhost:9999/sandbox/svg-icons-enabled.html</pre>
</div>
<video-js
id="vid1"
controls
preload="auto"
width="640"
height="264"
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">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video-js>
<script>
var vid = document.getElementById('vid1');
var player = videojs(vid, {experimentalSvgIcons: true});
</script>
</body>
</html>

414
sandbox/svg-icons.html.example Normal file
View File

@ -0,0 +1,414 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VideoJS</title>
<link href="../../dist/video-js.css" rel="stylesheet" type="text/css">
<style>
body {
text-align: center;
}
.container-class {
display: flex;
flex-wrap: wrap;
}
/* Overwrite default height and width */
.vjs-svg-icon {
width: 24px;
height: 24px;
}
div:not(.container-class) {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #ccc;
width: 150px;
margin: 10px;
padding: 10px;
background-color: #5A5A5A;
}
div span:nth-of-type(2) {
color: white;
}
</style>
</head>
<body>
<h1>VideoJS SVG Icons</h1>
<p>In order to use SVG icons, the <code>experimentalSvgIcons</code> option must be enabled on the player. See: <a href="https://videojs.com/guides/options/#experimentalsvgicons">experimentalSvgIcons</a></p>
<p>SVG Icons are expected to be added to the player through components. Example: <code>myButton.setIcon('play');</code></p>
<div class="container-class vjs-svg-icons-enabled">
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-play" />
</svg>
</span>
<span>play</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-play-circle" />
</svg>
</span>
<span>play-circle</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-pause" />
</svg>
</span>
<span>pause</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-volume-mute" />
</svg>
</span>
<span>volume-mute</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-volume-low" />
</svg>
</span>
<span>volume-low</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-volume-medium" />
</svg>
</span>
<span>volume-medium</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-volume-high" />
</svg>
</span>
<span>volume-high</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-fullscreen-enter" />
</svg>
</span>
<span>fullscreen-enter</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-fullscreen-exit" />
</svg>
</span>
<span>fullscreen-exit</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-spinner" />
</svg>
</span>
<span>spinner</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-subtitles" />
</svg>
</span>
<span>subtitles</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-captions" />
</svg>
</span>
<span>captions</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-hd" />
</svg>
</span>
<span>hd</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-chapters" />
</svg>
</span>
<span>chapters</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-downloading" />
</svg>
</span>
<span>downloading</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-file-download" />
</svg>
</span>
<span>file-download</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-file-download-done" />
</svg>
</span>
<span>file-download-done</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-file-download-off" />
</svg>
</span>
<span>file-download-off</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-share" />
</svg>
</span>
<span>share</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-cog" />
</svg>
</span>
<span>cog</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-square" />
</svg>
</span>
<span>square</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-circle" />
</svg>
</span>
<span>circle</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-circle-outline" />
</svg>
</span>
<span>circle-outline</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-circle-inner-circle" />
</svg>
</span>
<span>circle-inner-circle</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-cancel" />
</svg>
</span>
<span>cancel</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-repeat" />
</svg>
</span>
<span>repeat</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-replay" />
</svg>
</span>
<span>replay</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-replay-5" />
</svg>
</span>
<span>replay-5</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-replay-10" />
</svg>
</span>
<span>replay-10</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-replay-30" />
</svg>
</span>
<span>replay-30</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-forward-5" />
</svg>
</span>
<span>forward-5</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-forward-10" />
</svg>
</span>
<span>forward-10</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-forward-30" />
</svg>
</span>
<span>forward-30</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-audio" />
</svg>
</span>
<span>audio</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-next-item" />
</svg>
</span>
<span>next-item</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-previous-item" />
</svg>
</span>
<span>previous-item</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-shuffle" />
</svg>
</span>
<span>shuffle</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-cast" />
</svg>
</span>
<span>cast</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-picture-in-picture-enter" />
</svg>
</span>
<span>picture-in-picture-enter</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-picture-in-picture-exit" />
</svg>
</span>
<span>picture-in-picture-exit</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-facebook" />
</svg>
</span>
<span>facebook</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-linkedin" />
</svg>
</span>
<span>linkedin</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-twitter" />
</svg>
</span>
<span>twitter</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-tumblr" />
</svg>
</span>
<span>tumblr</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-pinterest" />
</svg>
</span>
<span>pinterest</span>
</div>
<div>
<span class="vjs-icon-placeholder vjs-svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<use xmlns="http://www.w3.org/2000/svg" href="../src/images/icons.svg#vjs-icon-audio-description" />
</svg>
</span>
<span>audio-description</span>
</div>
</div>
</body>
</html>

29
src/css/_icons.scss Normal file
View File

@ -0,0 +1,29 @@
// CSS styles for SVG icons used throughout video.js.
//
// The goal is to replace all icons from the font family pulled from videojs/font entirely.
// This project currently uses fonts. We want to replace this with SVGs from
// images/icons.svg. This will ensure consitency between versions, as well as simplified
// and straight-forward customization.
// Default styling for all SVG icons
.vjs-svg-icon {
display: inline-block;
background-repeat: no-repeat;
background-position: center;
fill: currentColor;
height: 1.8em;
width: 1.8em;
// Overwrite any font content
&:before {
content: none !important;
}
}
// SVG shadow on hover and focus
.vjs-svg-icon:hover,
.vjs-control:focus .vjs-svg-icon {
-webkit-filter: drop-shadow(0 0 0.25em #fff);
filter: drop-shadow(0 0 0.25em #fff);
}

12
src/css/components/_big-play.scss
View File

@ -30,6 +30,16 @@
} }
} }
.vjs-big-play-button .vjs-svg-icon {
width: 1em;
height: 1em;
position: absolute;
top: 50%;
left: 50%;
line-height: 1;
transform: translate(-50%, -50%);
}
.video-js:hover .vjs-big-play-button, .video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus { .video-js .vjs-big-play-button:focus {
border-color: $primary-foreground-color; border-color: $primary-foreground-color;
@ -47,6 +57,6 @@
} }
// Show big play button if video is paused and .vjs-show-big-play-button-on-pause is set on video element // Show big play button if video is paused and .vjs-show-big-play-button-on-pause is set on video element
.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button { .vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
display: block; display: block;
} }

5
src/css/components/_captions-settings.scss
View File

@ -5,6 +5,11 @@
height: 70%; height: 70%;
} }
// Hide if an error occurs
.vjs-error .vjs-text-track-settings {
display: none;
}
// Layout divs // Layout divs
.vjs-text-track-settings .vjs-modal-dialog-content { .vjs-text-track-settings .vjs-modal-dialog-content {
display: table; display: table;

8
src/css/components/_control-bar.scss
View File

@ -10,6 +10,14 @@
@include background-color-with-alpha($primary-background-color, $primary-background-transparency); @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
} }
// Locks the display only if:
// - controls are not disabled
// - native controls are not used
// - there is no error
.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
display: flex !important;
}
// Video has started playing or we are in audioOnlyMode // Video has started playing or we are in audioOnlyMode
.vjs-has-started .vjs-control-bar, .vjs-has-started .vjs-control-bar,
.vjs-audio-only-mode .vjs-control-bar { .vjs-audio-only-mode .vjs-control-bar {

6
src/css/components/_control.scss
View File

@ -25,7 +25,11 @@
} }
.vjs-button > .vjs-icon-placeholder { .vjs-button > .vjs-icon-placeholder {
display: block; display: block;
}
.vjs-button > .vjs-svg-icon {
display: inline-block;
} }
// Replacement for focus outline // Replacement for focus outline

2
src/css/components/_layout.scss
View File

@ -142,6 +142,8 @@ body.vjs-pip-window .video-js {
height: 100% !important; height: 100% !important;
// Undo any aspect ratio padding for fluid layouts // Undo any aspect ratio padding for fluid layouts
padding-top: 0 !important; padding-top: 0 !important;
// Older Safari (<= 15.6) needs display: block in fullscreen.
display: block;
} }
.video-js.vjs-fullscreen.vjs-user-inactive { .video-js.vjs-fullscreen.vjs-user-inactive {

14
src/css/components/_live.scss
View File

@ -46,7 +46,21 @@
color: #888; color: #888;
} }
.vjs-svg-icons-enabled .vjs-seek-to-live-control {
line-height: 0;
}
.vjs-seek-to-live-control .vjs-svg-icon {
width: 1em;
height: 1em;
pointer-events: none;
fill: #888888;
}
// make the live circle red when at the live edge // make the live circle red when at the live edge
.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder { .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
color: red; color: red;
} }
.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon {
fill: red;
}

5
src/css/components/_loading.scss
View File

@ -27,6 +27,11 @@
animation: vjs-spinner-show 0s linear 0.3s forwards; animation: vjs-spinner-show 0s linear 0.3s forwards;
} }
// Hide if an error occurs
.vjs-error .vjs-loading-spinner {
display: none;
}
.vjs-loading-spinner:before, .vjs-loading-spinner:before,
.vjs-loading-spinner:after { .vjs-loading-spinner:after {
content: ""; content: "";

18
src/css/components/_progress.scss
View File

@ -80,6 +80,24 @@
} }
} }
// Remove content from play-progress when using SVGs.
.vjs-svg-icons-enabled .vjs-play-progress {
&:before {
content: none !important;
}
}
.vjs-play-progress .vjs-svg-icon {
position: absolute;
top: -0.35em;
right: -0.4em;
width: 0.9em;
height: 0.9em;
pointer-events: none;
line-height: 0.15em;
z-index: 1;
}
.video-js .vjs-load-progress { .video-js .vjs-load-progress {
background: rgba($secondary-background-color, $secondary-background-transparency); background: rgba($secondary-background-color, $secondary-background-transparency);
} }

8
src/css/components/_skip-buttons.scss
View File

@ -1,20 +1,20 @@
.video-js .vjs-skip-forward-5 { .video-js .vjs-skip-forward-5 {
cursor: pointer; cursor: pointer;
& .vjs-icon-placeholder { & .vjs-icon-placeholder {
@extend .vjs-icon-forward-5; @extend .vjs-icon-forward-5;
} }
} }
.video-js .vjs-skip-forward-10 { .video-js .vjs-skip-forward-10 {
cursor: pointer; cursor: pointer;
& .vjs-icon-placeholder { & .vjs-icon-placeholder {
@extend .vjs-icon-forward-10; @extend .vjs-icon-forward-10;
} }
} }
.video-js .vjs-skip-forward-30 { .video-js .vjs-skip-forward-30 {
cursor: pointer; cursor: pointer;
& .vjs-icon-placeholder { & .vjs-icon-placeholder {
@extend .vjs-icon-forward-30; @extend .vjs-icon-forward-30;
} }
} }
@ -37,4 +37,4 @@
& .vjs-icon-placeholder { & .vjs-icon-placeholder {
@extend .vjs-icon-replay-30; @extend .vjs-icon-replay-30;
} }
} }

5
src/css/components/_subs-caps.scss
View File

@ -14,6 +14,11 @@
@extend .vjs-icon-subtitles; @extend .vjs-icon-subtitles;
} }
.vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
width: 1.5em;
height: 1.5em;
}
.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder { .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;

5
src/css/components/_text-track.scss
View File

@ -8,6 +8,11 @@
pointer-events: none; pointer-events: none;
} }
// Hide if an error occurs
.vjs-error .vjs-text-track-display {
display: none;
}
// Move captions down when controls aren't being shown // Move captions down when controls aren't being shown
.video-js.vjs-controls-disabled .vjs-text-track-display, .video-js.vjs-controls-disabled .vjs-text-track-display,
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display { .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {

5
src/css/components/_title-bar.scss
View File

@ -22,6 +22,11 @@
width: 100%; width: 100%;
} }
// Hide if an error occurs
.vjs-error .vjs-title-bar {
display: none;
}
.vjs-title-bar-title, .vjs-title-bar-title,
.vjs-title-bar-description { .vjs-title-bar-description {
margin: 0; margin: 0;

26
src/css/components/_volume.scss
View File

@ -134,6 +134,21 @@
z-index: 1; z-index: 1;
} }
} }
// Remove content from volume-level when using SVGs.
.vjs-svg-icons-enabled .vjs-volume-level {
&:before {
content: none;
}
}
.vjs-volume-level .vjs-svg-icon {
position: absolute;
width: 0.9em;
height: 0.9em;
pointer-events: none;
z-index: 1;
}
.vjs-slider-horizontal .vjs-volume-level { .vjs-slider-horizontal .vjs-volume-level {
height: 0.3em; height: 0.3em;
@ -144,6 +159,17 @@
} }
} }
// here
// Update placement of circle icon when using SVG icons
.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
right: -0.3em;
transform: translateY(-50%);
}
.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
top: -0.55em;
transform: translateX(-50%);
}
.video-js .vjs-volume-panel.vjs-volume-panel-vertical { .video-js .vjs-volume-panel.vjs-volume-panel-vertical {
width: 4em; width: 4em;
} }

7
src/css/components/menu/_menu.scss
View File

@ -33,6 +33,8 @@
} }
.vjs-menu li { .vjs-menu li {
display: flex;
justify-content: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0.2em 0; padding: 0.2em 0;
@ -54,6 +56,11 @@
.js-focus-visible .vjs-menu li.vjs-selected:hover { .js-focus-visible .vjs-menu li.vjs-selected:hover {
background-color: $primary-foreground-color; background-color: $primary-foreground-color;
color: $primary-background-color; color: $primary-background-color;
// Change the SVG color when an item is selected
.vjs-svg-icon {
fill: #000000;
}
} }
.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible), .video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),

1
src/css/video-js.scss
View File

@ -1,3 +1,4 @@
@import "icons";
@import "variables"; @import "variables";
@import "private-variables"; @import "private-variables";
@import "utilities"; @import "utilities";

143
src/images/icons.svg Normal file
View File

@ -0,0 +1,143 @@
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol viewBox="0 0 48 48" id="vjs-icon-play">
<path d="M16 10v28l22-14z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-pause">
<path d="M12 38h8V10h-8v28zm16-28v28h8V10h-8z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-audio">
<path d="M24 2C14.06 2 6 10.06 6 20v14c0 3.31 2.69 6 6 6h6V24h-8v-4c0-7.73 6.27-14 14-14s14 6.27 14 14v4h-8v16h6c3.31 0 6-2.69 6-6V20c0-9.94-8.06-18-18-18z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-captions">
<path d="M38 8H10c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM22 22h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2zm14 0h-3v-1h-4v6h4v-1h3v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-subtitles">
<path d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-enter">
<path d="M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-fullscreen-exit">
<path d="M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-play-circle">
<path d="M20 33l12-9-12-9v18zm4-29C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-volume-mute">
<path d="M33 24c0-3.53-2.04-6.58-5-8.05v4.42l4.91 4.91c.06-.42.09-.85.09-1.28zm5 0c0 1.88-.41 3.65-1.08 5.28l3.03 3.03C41.25 29.82 42 27 42 24c0-8.56-5.99-15.72-14-17.54v4.13c5.78 1.72 10 7.07 10 13.41zM8.55 6L6 8.55 15.45 18H6v12h8l10 10V26.55l8.51 8.51c-1.34 1.03-2.85 1.86-4.51 2.36v4.13a17.94 17.94 0 0 0 7.37-3.62L39.45 42 42 39.45l-18-18L8.55 6zM24 8l-4.18 4.18L24 16.36V8z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-volume-low">
<path d="M14 18v12h8l10 10V8L22 18h-8z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-volume-medium">
<path d="M37 24c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zm-27-6v12h8l10 10V8L18 18h-8z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-volume-high">
<path d="M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-spinner">
<path d="M18.8 21l9.53-16.51C26.94 4.18 25.49 4 24 4c-4.8 0-9.19 1.69-12.64 4.51l7.33 12.69.11-.2zm24.28-3c-1.84-5.85-6.3-10.52-11.99-12.68L23.77 18h19.31zm.52 2H28.62l.58 1 9.53 16.5C41.99 33.94 44 29.21 44 24c0-1.37-.14-2.71-.4-4zm-26.53 4l-7.8-13.5C6.01 14.06 4 18.79 4 24c0 1.37.14 2.71.4 4h14.98l-2.31-4zM4.92 30c1.84 5.85 6.3 10.52 11.99 12.68L24.23 30H4.92zm22.54 0l-7.8 13.51c1.4.31 2.85.49 4.34.49 4.8 0 9.19-1.69 12.64-4.51L29.31 26.8 27.46 30z"></path>
</symbol>
<symbol viewBox="0 0 24 24" id="vjs-icon-hd">
<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-chapters">
<path d="M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z"></path>
</symbol>
<symbol viewBox="0 0 40 40" id="vjs-icon-downloading">
<path d="M18.208 36.875q-3.208-.292-5.979-1.729-2.771-1.438-4.812-3.729-2.042-2.292-3.188-5.229-1.146-2.938-1.146-6.23 0-6.583 4.334-11.416 4.333-4.834 10.833-5.5v3.166q-5.167.75-8.583 4.646Q6.25 14.75 6.25 19.958q0 5.209 3.396 9.104 3.396 3.896 8.562 4.646zM20 28.417L11.542 20l2.083-2.083 4.917 4.916v-11.25h2.916v11.25l4.875-4.916L28.417 20zm1.792 8.458v-3.167q1.833-.25 3.541-.958 1.709-.708 3.167-1.875l2.333 2.292q-1.958 1.583-4.25 2.541-2.291.959-4.791 1.167zm6.791-27.792q-1.541-1.125-3.25-1.854-1.708-.729-3.541-1.021V3.042q2.5.25 4.77 1.208 2.271.958 4.271 2.5zm4.584 21.584l-2.25-2.25q1.166-1.5 1.854-3.209.687-1.708.937-3.541h3.209q-.292 2.5-1.229 4.791-.938 2.292-2.521 4.209zm.541-12.417q-.291-1.833-.958-3.562-.667-1.73-1.833-3.188l2.375-2.208q1.541 1.916 2.458 4.208.917 2.292 1.167 4.75z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-file-download">
<path d="M10.8 40.55q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h26.35v-7.7h3.4v7.7q0 1.4-1 2.4t-2.4 1zM24 32.1L13.9 22.05l2.45-2.45 5.95 5.95V7.15h3.4v18.4l5.95-5.95 2.45 2.45z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-file-download-done">
<path d="M9.8 40.5v-3.45h28.4v3.45zm9.2-9.05L7.4 19.85l2.45-2.35L19 26.65l19.2-19.2 2.4 2.4z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-file-download-off">
<path d="M4.9 4.75L43.25 43.1 41 45.3l-4.75-4.75q-.05.05-.075.025-.025-.025-.075-.025H10.8q-1.35 0-2.375-1T7.4 37.15v-7.7h3.4v7.7h22.05l-7-7-1.85 1.8L13.9 21.9l1.85-1.85L2.7 7zm26.75 14.7l2.45 2.45-3.75 3.8-2.45-2.5zM25.7 7.15V21.1l-3.4-3.45V7.15z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-share">
<path d="M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31A5.83 5.83 0 1 0 36 32.17z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-cog">
<path d="M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97L29 4.84c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3a14.8 14.8 0 0 0-3.38 1.97L9.9 10.1a1 1 0 0 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31C9.06 22.69 9 23.34 9 24s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3a14.8 14.8 0 0 0 3.38-1.97l4.98 2.01a1 1 0 0 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zM24 31c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-square">
<path d="M36 8H12c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H12V12h24v24z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-circle">
<circle cx="24" cy="24" r="20"></circle>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-circle-outline">
<path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-circle-inner-circle">
<path d="M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm6-16c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6 6 2.69 6 6z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-cancel">
<path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-replay">
<path d="M24 10V2L14 12l10 10v-8c6.63 0 12 5.37 12 12s-5.37 12-12 12-12-5.37-12-12H8c0 8.84 7.16 16 16 16s16-7.16 16-16-7.16-16-16-16z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-repeat">
<path d="M14 14h20v6l8-8-8-8v6H10v12h4v-8zm20 20H14v-6l-8 8 8 8v-6h24V26h-4v8z"></path>
</symbol>
<symbol viewBox="0 96 48 48" id="vjs-icon-replay-5">
<path d="M17.689 98l-8.697 8.696 8.697 8.697 2.486-2.485-4.32-4.319h1.302c4.93 0 9.071 1.722 12.424 5.165 3.352 3.443 5.029 7.638 5.029 12.584h3.55c0-2.958-.553-5.73-1.658-8.313-1.104-2.583-2.622-4.841-4.555-6.774-1.932-1.932-4.19-3.45-6.773-4.555-2.584-1.104-5.355-1.657-8.313-1.657H15.5l4.615-4.615zm-8.08 21.659v13.861h11.357v5.008H9.609V143h12.7c.834 0 1.55-.298 2.146-.894.596-.597.895-1.31.895-2.145v-7.781c0-.835-.299-1.55-.895-2.147a2.929 2.929 0 0 0-2.147-.894h-8.227v-5.096H25.35v-4.384z"></path>
</symbol>
<symbol viewBox="0 96 48 48" id="vjs-icon-replay-10">
<path d="M42.315 125.63c0-4.997-1.694-9.235-5.08-12.713-3.388-3.479-7.571-5.218-12.552-5.218h-1.315l4.363 4.363-2.51 2.51-8.787-8.786L25.221 97l2.45 2.45-4.662 4.663h1.375c2.988 0 5.788.557 8.397 1.673 2.61 1.116 4.892 2.65 6.844 4.602 1.953 1.953 3.487 4.234 4.602 6.844 1.116 2.61 1.674 5.41 1.674 8.398zM8.183 142v-19.657H3.176V117.8h9.643V142zm13.63 0c-1.156 0-2.127-.393-2.912-1.178-.778-.778-1.168-1.746-1.168-2.902v-16.04c0-1.156.393-2.127 1.178-2.912.779-.779 1.746-1.168 2.902-1.168h7.696c1.156 0 2.126.392 2.911 1.177.779.78 1.168 1.747 1.168 2.903v16.04c0 1.156-.392 2.127-1.177 2.912-.779.779-1.746 1.168-2.902 1.168zm.556-4.636h6.583v-15.02H22.37z"></path>
</symbol>
<symbol viewBox="0 96 48 48" id="vjs-icon-replay-30">
<path d="M26.047 97l-8.733 8.732 8.733 8.733 2.496-2.494-4.336-4.338h1.307c4.95 0 9.108 1.73 12.474 5.187 3.367 3.458 5.051 7.668 5.051 12.635h3.565c0-2.97-.556-5.751-1.665-8.346-1.109-2.594-2.633-4.862-4.574-6.802-1.94-1.941-4.208-3.466-6.803-4.575-2.594-1.109-5.375-1.664-8.345-1.664H23.85l4.634-4.634zM2.555 117.531v4.688h10.297v5.25H5.873v4.687h6.979v5.156H2.555V142H13.36c1.061 0 1.95-.395 2.668-1.186.718-.79 1.076-1.772 1.076-2.94v-16.218c0-1.168-.358-2.149-1.076-2.94-.717-.79-1.607-1.185-2.668-1.185zm22.482.14c-1.149 0-2.11.39-2.885 1.165-.78.78-1.172 1.744-1.172 2.893v15.943c0 1.149.388 2.11 1.163 2.885.78.78 1.745 1.172 2.894 1.172h7.649c1.148 0 2.11-.388 2.884-1.163.78-.78 1.17-1.745 1.17-2.894v-15.943c0-1.15-.386-2.111-1.16-2.885-.78-.78-1.746-1.172-2.894-1.172zm.553 4.518h6.545v14.93H25.59z"></path>
</symbol>
<symbol viewBox="0 96 48 48" id="vjs-icon-forward-5">
<path d="M29.508 97l-2.431 2.43 4.625 4.625h-1.364c-2.965 0-5.742.554-8.332 1.66-2.589 1.107-4.851 2.629-6.788 4.566-1.937 1.937-3.458 4.2-4.565 6.788-1.107 2.59-1.66 5.367-1.66 8.331h3.557c0-4.957 1.68-9.16 5.04-12.611 3.36-3.45 7.51-5.177 12.451-5.177h1.304l-4.326 4.33 2.49 2.49 8.715-8.716zm-9.783 21.61v13.89h11.382v5.018H19.725V142h12.727a2.93 2.93 0 0 0 2.15-.896 2.93 2.93 0 0 0 .896-2.15v-7.798c0-.837-.299-1.554-.896-2.152a2.93 2.93 0 0 0-2.15-.896h-8.245V123h11.29v-4.392z"></path>
</symbol>
<symbol viewBox="0 96 48 48" id="vjs-icon-forward-10">
<path d="M23.119 97l-2.386 2.383 4.538 4.538h-1.339c-2.908 0-5.633.543-8.173 1.63-2.54 1.085-4.76 2.577-6.66 4.478-1.9 1.9-3.392 4.12-4.478 6.66-1.085 2.54-1.629 5.264-1.629 8.172h3.49c0-4.863 1.648-8.986 4.944-12.372 3.297-3.385 7.368-5.078 12.216-5.078h1.279l-4.245 4.247 2.443 2.442 8.55-8.55zm-9.52 21.45v4.42h4.871V142h4.513v-23.55zm18.136 0c-1.125 0-2.066.377-2.824 1.135-.764.764-1.148 1.709-1.148 2.834v15.612c0 1.124.38 2.066 1.139 2.824.764.764 1.708 1.145 2.833 1.145h7.489c1.125 0 2.066-.378 2.824-1.136.764-.764 1.145-1.709 1.145-2.833v-15.612c0-1.125-.378-2.067-1.136-2.825-.764-.764-1.708-1.145-2.833-1.145zm.54 4.42h6.408v14.617h-6.407z"></path>
</symbol>
<symbol viewBox="0 96 48 48" id="vjs-icon-forward-30">
<path d="M25.549 97l-2.437 2.434 4.634 4.635H26.38c-2.97 0-5.753.555-8.347 1.664-2.594 1.109-4.861 2.633-6.802 4.574-1.94 1.94-3.465 4.207-4.574 6.802-1.109 2.594-1.664 5.377-1.664 8.347h3.565c0-4.967 1.683-9.178 5.05-12.636 3.366-3.458 7.525-5.187 12.475-5.187h1.307l-4.335 4.338 2.495 2.494 8.732-8.732zm-11.553 20.53v4.689h10.297v5.249h-6.978v4.688h6.978v5.156H13.996V142h10.808c1.06 0 1.948-.395 2.666-1.186.718-.79 1.077-1.771 1.077-2.94v-16.217c0-1.169-.36-2.15-1.077-2.94-.718-.79-1.605-1.186-2.666-1.186zm21.174.168c-1.149 0-2.11.389-2.884 1.163-.78.78-1.172 1.745-1.172 2.894v15.942c0 1.15.388 2.11 1.162 2.885.78.78 1.745 1.17 2.894 1.17h7.649c1.149 0 2.11-.386 2.885-1.16.78-.78 1.17-1.746 1.17-2.895v-15.942c0-1.15-.387-2.11-1.161-2.885-.78-.78-1.745-1.172-2.894-1.172zm.552 4.516h6.542v14.931h-6.542z"></path>
</symbol>
<symbol viewBox="0 0 512 512" id="vjs-icon-audio-description">
<g fill-rule="evenodd"><path d="M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57"></path><path d="M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"></path><path d="M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z"></path></g>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-next-item">
<path d="M12 36l17-12-17-12v24zm20-24v24h4V12h-4z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-previous-item">
<path d="M12 12h4v24h-4zm7 12l17 12V12z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-shuffle">
<path d="M21.17 18.34L10.83 8 8 10.83l10.34 10.34 2.83-2.83zM29 8l4.09 4.09L8 37.17 10.83 40l25.09-25.09L40 19V8H29zm.66 18.83l-2.83 2.83 6.26 6.26L29 40h11V29l-4.09 4.09-6.25-6.26z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-cast">
<path d="M42 6H6c-2.21 0-4 1.79-4 4v6h4v-6h36v28H28v4h14c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zM2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm0-8v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22z"></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-picture-in-picture-enter">
<path d="M38 22H22v11.99h16V22zm8 16V9.96C46 7.76 44.2 6 42 6H6C3.8 6 2 7.76 2 9.96V38c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4zm-4 .04H6V9.94h36v28.1z"></path>
</symbol>
<symbol viewBox="0 0 22 18" id="vjs-icon-picture-in-picture-exit">
<path d="M18 4H4v10h14V4zm4 12V1.98C22 .88 21.1 0 20 0H2C.9 0 0 .88 0 1.98V16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H2V1.97h18v14.05z"></path>
<path fill="none" d="M-1-3h24v24H-1z"></path>
</symbol>
<symbol viewBox="0 0 1792 1792" id="vjs-icon-facebook">
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z"></path>
</symbol>
<symbol viewBox="0 0 1792 1792" id="vjs-icon-linkedin">
<path d="M477 625v991H147V625h330zm21-306q1 73-50.5 122T312 490h-2q-82 0-132-49t-50-122q0-74 51.5-122.5T314 148t133 48.5T498 319zm1166 729v568h-329v-530q0-105-40.5-164.5T1168 862q-63 0-105.5 34.5T999 982q-11 30-11 81v553H659q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5T1285 602q171 0 275 113.5t104 332.5z"></path>
</symbol>
<symbol viewBox="0 0 1792 1792" id="vjs-icon-twitter">
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5T1369.5 1125 1185 1335.5t-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5T285 1033q33 5 61 5 43 0 85-11-112-23-185.5-111.5T172 710v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5T884 653q-8-38-8-74 0-134 94.5-228.5T1199 256q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"></path>
</symbol>
<symbol viewBox="0 0 1792 1792" id="vjs-icon-tumblr">
<path d="M1328 1329l80 237q-23 35-111 66t-177 32q-104 2-190.5-26T787 1564t-95-106-55.5-120-16.5-118V676H452V461q72-26 129-69.5t91-90 58-102 34-99T779 12q1-5 4.5-8.5T791 0h244v424h333v252h-334v518q0 30 6.5 56t22.5 52.5 49.5 41.5 81.5 14q78-2 134-29z"></path>
</symbol>
<symbol viewBox="0 0 1792 1792" id="vjs-icon-pinterest">
<path d="M1664 896q0 209-103 385.5T1281.5 1561 896 1664q-111 0-218-32 59-93 78-164 9-34 54-211 20 39 73 67.5t114 28.5q121 0 216-68.5t147-188.5 52-270q0-114-59.5-214T1180 449t-255-63q-105 0-196 29t-154.5 77-109 110.5-67 129.5T377 866q0 104 40 183t117 111q30 12 38-20 2-7 8-31t8-30q6-23-11-43-51-61-51-151 0-151 104.5-259.5T904 517q151 0 235.5 82t84.5 213q0 170-68.5 289T980 1220q-61 0-98-43.5T859 1072q8-35 26.5-93.5t30-103T927 800q0-50-27-83t-77-33q-62 0-105 57t-43 142q0 73 25 122l-99 418q-17 70-13 177-206-91-333-281T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"></path>
</symbol>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

23
src/js/big-play-button.js
View File

@ -17,6 +17,8 @@ class BigPlayButton extends Button {
this.mouseused_ = false; this.mouseused_ = false;
this.setIcon('play');
this.on('mousedown', (e) => this.handleMouseDown(e)); this.on('mousedown', (e) => this.handleMouseDown(e));
} }
@ -34,7 +36,7 @@ class BigPlayButton extends Button {
* This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent} * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
* for more detailed information on what a click can be. * for more detailed information on what a click can be.
* *
* @param {KeyboardEvent} event * @param {KeyboardEvent|MouseEvent|TouchEvent} event
* The `keydown`, `tap`, or `click` event that caused this function to be * The `keydown`, `tap`, or `click` event that caused this function to be
* called. * called.
* *
@ -45,7 +47,7 @@ class BigPlayButton extends Button {
const playPromise = this.player_.play(); const playPromise = this.player_.play();
// exit early if clicked via the mouse // exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) { if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
silencePromise(playPromise); silencePromise(playPromise);
if (this.player_.tech(true)) { if (this.player_.tech(true)) {
@ -72,12 +74,29 @@ class BigPlayButton extends Button {
} }
} }
/**
* Event handler that is called when a `BigPlayButton` receives a
* `keydown` event.
*
* @param {KeyboardEvent} event
* The `keydown` event that caused this function to be called.
*
* @listens keydown
*/
handleKeyDown(event) { handleKeyDown(event) {
this.mouseused_ = false; this.mouseused_ = false;
super.handleKeyDown(event); super.handleKeyDown(event);
} }
/**
* Handle `mousedown` events on the `BigPlayButton`.
*
* @param {MouseEvent} event
* `mousedown` or `touchstart` event that triggered this function
*
* @listens mousedown
*/
handleMouseDown(event) { handleMouseDown(event) {
this.mouseused_ = true; this.mouseused_ = true;
} }

14
src/js/button.js
View File

@ -46,11 +46,13 @@ class Button extends ClickableComponent {
const el = createEl(tag, props, attributes); const el = createEl(tag, props, attributes);
el.appendChild(createEl('span', { if (!this.player_.options_.experimentalSvgIcons) {
className: 'vjs-icon-placeholder' el.appendChild(createEl('span', {
}, { className: 'vjs-icon-placeholder'
'aria-hidden': true }, {
})); 'aria-hidden': true
}));
}
this.createControlTextEl(el); this.createControlTextEl(el);
@ -104,7 +106,7 @@ class Button extends ClickableComponent {
* This gets called when a `Button` has focus and `keydown` is triggered via a key * This gets called when a `Button` has focus and `keydown` is triggered via a key
* press. * press.
* *
* @param {Event} event * @param {KeyboardEvent} event
* The event that caused this function to get called. * The event that caused this function to get called.
* *
* @listens keydown * @listens keydown

14
src/js/clickable-component.js
View File

@ -85,11 +85,13 @@ class ClickableComponent extends Component {
const el = Dom.createEl(tag, props, attributes); const el = Dom.createEl(tag, props, attributes);
el.appendChild(Dom.createEl('span', { if (!this.player_.options_.experimentalSvgIcons) {
className: 'vjs-icon-placeholder' el.appendChild(Dom.createEl('span', {
}, { className: 'vjs-icon-placeholder'
'aria-hidden': true }, {
})); 'aria-hidden': true
}));
}
this.createControlTextEl(el); this.createControlTextEl(el);
@ -231,7 +233,7 @@ class ClickableComponent extends Component {
* *
* By default, if the key is Space or Enter, it will trigger a `click` event. * By default, if the key is Space or Enter, it will trigger a `click` event.
* *
* @param {Event} event * @param {KeyboardEvent} event
* The `keydown` event that caused this function to be called. * The `keydown` event that caused this function to be called.
* *
* @listens keydown * @listens keydown

3
src/js/close-button.js
View File

@ -24,6 +24,7 @@ class CloseButton extends Button {
*/ */
constructor(player, options) { constructor(player, options) {
super(player, options); super(player, options);
this.setIcon('cancel');
this.controlText(options && options.controlText || this.localize('Close')); this.controlText(options && options.controlText || this.localize('Close'));
} }
@ -70,7 +71,7 @@ class CloseButton extends Button {
* *
* By default, if the key is Esc, it will trigger a `click` event. * By default, if the key is Esc, it will trigger a `click` event.
* *
* @param {Event} event * @param {KeyboardEvent} event
* The `keydown` event that caused this function to be called. * The `keydown` event that caused this function to be called.
* *
* @listens keydown * @listens keydown

76
src/js/component.js
View File

@ -3,6 +3,7 @@
* *
* @file component.js * @file component.js
*/ */
import document from 'global/document';
import window from 'global/window'; import window from 'global/window';
import evented from './mixins/evented'; import evented from './mixins/evented';
import stateful from './mixins/stateful'; import stateful from './mixins/stateful';
@ -159,8 +160,8 @@ class Component {
* @param {string|string[]} type * @param {string|string[]} type
* An event name or an array of event names. * An event name or an array of event names.
* *
* @param {Function} fn * @param {Function} [fn]
* The function to remove. * The function to remove. If not specified, all listeners managed by Video.js will be removed.
*/ */
off(type, fn) {} off(type, fn) {}
@ -528,8 +529,58 @@ class Component {
} }
/** /**
* Add a child `Component` inside the current `Component`. * Adds an SVG icon element to another element or component.
* *
* @param {string} iconName
* The name of icon. A list of all the icon names can be found at 'sandbox/svg-icons.html'
*
* @param {Element} [el=this.el()]
* Element to set the title on. Defaults to the current Component's element.
*
* @return {Element}
* The newly created icon element.
*/
setIcon(iconName, el = this.el()) {
// TODO: In v9 of video.js, we will want to remove font icons entirely.
// This means this check, as well as the others throughout the code, and
// the unecessary CSS for font icons, will need to be removed.
// See https://github.com/videojs/video.js/pull/8260 as to which components
// need updating.
if (!this.player_.options_.experimentalSvgIcons) {
return;
}
const xmlnsURL = 'http://www.w3.org/2000/svg';
// The below creates an element in the format of:
// <span><svg><use>....</use></svg></span>
const iconContainer = Dom.createEl('span', {
className: 'vjs-icon-placeholder vjs-svg-icon'
}, {'aria-hidden': 'true'});
const svgEl = document.createElementNS(xmlnsURL, 'svg');
svgEl.setAttributeNS(null, 'viewBox', '0 0 512 512');
const useEl = document.createElementNS(xmlnsURL, 'use');
svgEl.appendChild(useEl);
useEl.setAttributeNS(null, 'href', `#vjs-icon-${iconName}`);
iconContainer.appendChild(svgEl);
// Replace a pre-existing icon if one exists.
if (this.iconIsSet_) {
el.replaceChild(iconContainer, el.querySelector('.vjs-icon-placeholder'));
} else {
el.appendChild(iconContainer);
}
this.iconIsSet_ = true;
return iconContainer;
}
/**
* Add a child `Component` inside the current `Component`.
* *
* @param {string|Component} child * @param {string|Component} child
* The name or instance of a child to add. * The name or instance of a child to add.
@ -541,6 +592,7 @@ class Component {
* @param {number} [index=this.children_.length] * @param {number} [index=this.children_.length]
* The index to attempt to add a child into. * The index to attempt to add a child into.
* *
*
* @return {Component} * @return {Component}
* The `Component` that gets added as a child. When using a string the * The `Component` that gets added as a child. When using a string the
* `Component` will get created by this process. * `Component` will get created by this process.
@ -1024,9 +1076,8 @@ class Component {
* @param {boolean} [skipListeners] * @param {boolean} [skipListeners]
* Skip the componentresize event trigger * Skip the componentresize event trigger
* *
* @return {number|string} * @return {number|undefined}
* The width when getting, zero if there is no width. Can be a string * The width when getting, zero if there is no width
* postpixed with '%' or 'px'.
*/ */
width(num, skipListeners) { width(num, skipListeners) {
return this.dimension('width', num, skipListeners); return this.dimension('width', num, skipListeners);
@ -1042,9 +1093,8 @@ class Component {
* @param {boolean} [skipListeners] * @param {boolean} [skipListeners]
* Skip the componentresize event trigger * Skip the componentresize event trigger
* *
* @return {number|string} * @return {number|undefined}
* The width when getting, zero if there is no width. Can be a string * The height when getting, zero if there is no height
* postpixed with '%' or 'px'.
*/ */
height(num, skipListeners) { height(num, skipListeners) {
return this.dimension('height', num, skipListeners); return this.dimension('height', num, skipListeners);
@ -1090,7 +1140,7 @@ class Component {
* @param {boolean} [skipListeners] * @param {boolean} [skipListeners]
* Skip componentresize event trigger * Skip componentresize event trigger
* *
* @return {number} * @return {number|undefined}
* The dimension when getting or 0 if unset * The dimension when getting or 0 if unset
*/ */
dimension(widthOrHeight, num, skipListeners) { dimension(widthOrHeight, num, skipListeners) {
@ -1272,7 +1322,7 @@ class Component {
* delegates to `handleKeyDown`. This means anyone calling `handleKeyPress` * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
* will not see their method calls stop working. * will not see their method calls stop working.
* *
* @param {Event} event * @param {KeyboardEvent} event
* The event that caused this function to be called. * The event that caused this function to be called.
*/ */
handleKeyPress(event) { handleKeyPress(event) {
@ -1284,7 +1334,7 @@ class Component {
* support toggling the controls through a tap on the video. They get enabled * support toggling the controls through a tap on the video. They get enabled
* because every sub-component would have extra overhead otherwise. * because every sub-component would have extra overhead otherwise.
* *
* @private * @protected
* @fires Component#tap * @fires Component#tap
* @listens Component#touchstart * @listens Component#touchstart
* @listens Component#touchmove * @listens Component#touchmove
@ -1793,7 +1843,7 @@ class Component {
* @param {string} name * @param {string} name
* The Name of the component to get. * The Name of the component to get.
* *
* @return {Component} * @return {typeof Component}
* The `Component` that got registered under the given name. * The `Component` that got registered under the given name.
*/ */
static getComponent(name) { static getComponent(name) {

2
src/js/control-bar/audio-track-controls/audio-track-button.js
View File

@ -25,6 +25,8 @@ class AudioTrackButton extends TrackButton {
options.tracks = player.audioTracks(); options.tracks = player.audioTracks();
super(player, options); super(player, options);
this.setIcon('audio');
} }
/** /**

3
src/js/control-bar/fullscreen-toggle.js
View File

@ -23,6 +23,7 @@ class FullscreenToggle extends Button {
*/ */
constructor(player, options) { constructor(player, options) {
super(player, options); super(player, options);
this.setIcon('fullscreen-enter');
this.on(player, 'fullscreenchange', (e) => this.handleFullscreenChange(e)); this.on(player, 'fullscreenchange', (e) => this.handleFullscreenChange(e));
if (document[player.fsApi_.fullscreenEnabled] === false) { if (document[player.fsApi_.fullscreenEnabled] === false) {
@ -52,8 +53,10 @@ class FullscreenToggle extends Button {
handleFullscreenChange(event) { handleFullscreenChange(event) {
if (this.player_.isFullscreen()) { if (this.player_.isFullscreen()) {
this.controlText('Exit Fullscreen'); this.controlText('Exit Fullscreen');
this.setIcon('fullscreen-exit');
} else { } else {
this.controlText('Fullscreen'); this.controlText('Fullscreen');
this.setIcon('fullscreen-enter');
} }
} }

5
src/js/control-bar/mute-toggle.js
View File

@ -98,6 +98,8 @@ class MuteToggle extends Button {
const vol = this.player_.volume(); const vol = this.player_.volume();
let level = 3; let level = 3;
this.setIcon('volume-high');
// in iOS when a player is loaded with muted attribute // in iOS when a player is loaded with muted attribute
// and volume is changed with a native mute button // and volume is changed with a native mute button
// we want to make sure muted state is updated // we want to make sure muted state is updated
@ -106,10 +108,13 @@ class MuteToggle extends Button {
} }
if (vol === 0 || this.player_.muted()) { if (vol === 0 || this.player_.muted()) {
this.setIcon('volume-mute');
level = 0; level = 0;
} else if (vol < 0.33) { } else if (vol < 0.33) {
this.setIcon('volume-low');
level = 1; level = 1;
} else if (vol < 0.67) { } else if (vol < 0.67) {
this.setIcon('volume-medium');
level = 2; level = 2;
} }

4
src/js/control-bar/picture-in-picture-toggle.js
View File

@ -28,6 +28,8 @@ class PictureInPictureToggle extends Button {
constructor(player, options) { constructor(player, options) {
super(player, options); super(player, options);
this.setIcon('picture-in-picture-enter');
this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], (e) => this.handlePictureInPictureChange(e)); this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], (e) => this.handlePictureInPictureChange(e));
this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], (e) => this.handlePictureInPictureEnabledChange(e)); this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], (e) => this.handlePictureInPictureEnabledChange(e));
this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange()); this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
@ -101,8 +103,10 @@ class PictureInPictureToggle extends Button {
*/ */
handlePictureInPictureChange(event) { handlePictureInPictureChange(event) {
if (this.player_.isInPictureInPicture()) { if (this.player_.isInPictureInPicture()) {
this.setIcon('picture-in-picture-exit');
this.controlText('Exit Picture-in-Picture'); this.controlText('Exit Picture-in-Picture');
} else { } else {
this.setIcon('picture-in-picture-enter');
this.controlText('Picture-in-Picture'); this.controlText('Picture-in-Picture');
} }
this.handlePictureInPictureEnabledChange(); this.handlePictureInPictureEnabledChange();

5
src/js/control-bar/play-toggle.js
View File

@ -27,6 +27,8 @@ class PlayToggle extends Button {
// show or hide replay icon // show or hide replay icon
options.replay = options.replay === undefined || options.replay; options.replay = options.replay === undefined || options.replay;
this.setIcon('play');
this.on(player, 'play', (e) => this.handlePlay(e)); this.on(player, 'play', (e) => this.handlePlay(e));
this.on(player, 'pause', (e) => this.handlePause(e)); this.on(player, 'pause', (e) => this.handlePause(e));
@ -95,6 +97,7 @@ class PlayToggle extends Button {
this.removeClass('vjs-ended', 'vjs-paused'); this.removeClass('vjs-ended', 'vjs-paused');
this.addClass('vjs-playing'); this.addClass('vjs-playing');
// change the button text to "Pause" // change the button text to "Pause"
this.setIcon('pause');
this.controlText('Pause'); this.controlText('Pause');
} }
@ -110,6 +113,7 @@ class PlayToggle extends Button {
this.removeClass('vjs-playing'); this.removeClass('vjs-playing');
this.addClass('vjs-paused'); this.addClass('vjs-paused');
// change the button text to "Play" // change the button text to "Play"
this.setIcon('play');
this.controlText('Play'); this.controlText('Play');
} }
@ -125,6 +129,7 @@ class PlayToggle extends Button {
this.removeClass('vjs-playing'); this.removeClass('vjs-playing');
this.addClass('vjs-ended'); this.addClass('vjs-ended');
// change the button text to "Replay" // change the button text to "Replay"
this.setIcon('replay');
this.controlText('Replay'); this.controlText('Replay');
// on the next seek remove the replay button // on the next seek remove the replay button

1
src/js/control-bar/progress-control/play-progress-bar.js
View File

@ -26,6 +26,7 @@ class PlayProgressBar extends Component {
*/ */
constructor(player, options) { constructor(player, options) {
super(player, options); super(player, options);
this.setIcon('circle');
this.update = Fn.throttle(Fn.bind_(this, this.update), Fn.UPDATE_REFRESH_INTERVAL); this.update = Fn.throttle(Fn.bind_(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
} }

2
src/js/control-bar/seek-to-live.js
View File

@ -43,6 +43,8 @@ class SeekToLive extends Button {
className: 'vjs-seek-to-live-control vjs-control' className: 'vjs-seek-to-live-control vjs-control'
}); });
this.setIcon('circle', el);
this.textEl_ = Dom.createEl('span', { this.textEl_ = Dom.createEl('span', {
className: 'vjs-seek-to-live-text', className: 'vjs-seek-to-live-text',
textContent: this.localize('LIVE') textContent: this.localize('LIVE')

1
src/js/control-bar/skip-buttons/skip-backward.js
View File

@ -17,6 +17,7 @@ class SkipBackward extends Button {
this.skipTime = this.getSkipBackwardTime(); this.skipTime = this.getSkipBackwardTime();
if (this.skipTime && this.validOptions.includes(this.skipTime)) { if (this.skipTime && this.validOptions.includes(this.skipTime)) {
this.setIcon(`replay-${this.skipTime}`);
this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime])); this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
this.show(); this.show();
} else { } else {

1
src/js/control-bar/skip-buttons/skip-forward.js
View File

@ -17,6 +17,7 @@ class SkipForward extends Button {
this.skipTime = this.getSkipForwardTime(); this.skipTime = this.getSkipForwardTime();
if (this.skipTime && this.validOptions.includes(this.skipTime)) { if (this.skipTime && this.validOptions.includes(this.skipTime)) {
this.setIcon(`forward-${this.skipTime}`);
this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime])); this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
this.show(); this.show();
} else { } else {

2
src/js/control-bar/text-track-controls/captions-button.js
View File

@ -26,6 +26,8 @@ class CaptionsButton extends TextTrackButton {
*/ */
constructor(player, options, ready) { constructor(player, options, ready) {
super(player, options, ready); super(player, options, ready);
this.setIcon('captions');
} }
/** /**

2
src/js/control-bar/text-track-controls/chapters-button.js
View File

@ -30,6 +30,8 @@ class ChaptersButton extends TextTrackButton {
constructor(player, options, ready) { constructor(player, options, ready) {
super(player, options, ready); super(player, options, ready);
this.setIcon('chapters');
this.selectCurrentItem_ = () => { this.selectCurrentItem_ = () => {
this.items.forEach(item => { this.items.forEach(item => {
item.selected(this.track_.activeCues[0] === item.cue); item.selected(this.track_.activeCues[0] === item.cue);

2
src/js/control-bar/text-track-controls/descriptions-button.js
View File

@ -27,6 +27,8 @@ class DescriptionsButton extends TextTrackButton {
constructor(player, options, ready) { constructor(player, options, ready) {
super(player, options, ready); super(player, options, ready);
this.setIcon('audio-description');
const tracks = player.textTracks(); const tracks = player.textTracks();
const changeHandler = Fn.bind_(this, this.handleTracksChange); const changeHandler = Fn.bind_(this, this.handleTracksChange);

2
src/js/control-bar/text-track-controls/off-text-track-menu-item.js
View File

@ -5,7 +5,7 @@ import TextTrackMenuItem from './text-track-menu-item.js';
import Component from '../../component.js'; import Component from '../../component.js';
/** /**
* A special menu item for turning of a specific type of text track * A special menu item for turning off a specific type of text track
* *
* @extends TextTrackMenuItem * @extends TextTrackMenuItem
*/ */

2
src/js/control-bar/text-track-controls/subs-caps-button.js
View File

@ -32,8 +32,10 @@ class SubsCapsButton extends TextTrackButton {
// Although North America uses "captions" in most cases for // Although North America uses "captions" in most cases for
// "captions and subtitles" other locales use "subtitles" // "captions and subtitles" other locales use "subtitles"
this.label_ = 'subtitles'; this.label_ = 'subtitles';
this.setIcon('subtitles');
if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) { if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
this.label_ = 'captions'; this.label_ = 'captions';
this.setIcon('captions');
} }
this.menuButton_.controlText(toTitleCase(this.label_)); this.menuButton_.controlText(toTitleCase(this.label_));
} }

14
src/js/control-bar/text-track-controls/subs-caps-menu-item.js
View File

@ -18,11 +18,15 @@ class SubsCapsMenuItem extends TextTrackMenuItem {
const parentSpan = el.querySelector('.vjs-menu-item-text'); const parentSpan = el.querySelector('.vjs-menu-item-text');
if (this.options_.track.kind === 'captions') { if (this.options_.track.kind === 'captions') {
parentSpan.appendChild(createEl('span', { if (this.player_.options_.experimentalSvgIcons) {
className: 'vjs-icon-placeholder' this.setIcon('captions', el);
}, { } else {
'aria-hidden': true parentSpan.appendChild(createEl('span', {
})); className: 'vjs-icon-placeholder'
}, {
'aria-hidden': true
}));
}
parentSpan.appendChild(createEl('span', { parentSpan.appendChild(createEl('span', {
className: 'vjs-control-text', className: 'vjs-control-text',
// space added as the text will visually flow with the // space added as the text will visually flow with the

2
src/js/control-bar/text-track-controls/subtitles-button.js
View File

@ -25,6 +25,8 @@ class SubtitlesButton extends TextTrackButton {
*/ */
constructor(player, options, ready) { constructor(player, options, ready) {
super(player, options, ready); super(player, options, ready);
this.setIcon('subtitles');
} }
/** /**

2
src/js/control-bar/volume-control/volume-level.js
View File

@ -21,6 +21,8 @@ class VolumeLevel extends Component {
className: 'vjs-volume-level' className: 'vjs-volume-level'
}); });
this.setIcon('circle', el);
el.appendChild(super.createEl('span', { el.appendChild(super.createEl('span', {
className: 'vjs-control-text' className: 'vjs-control-text'
})); }));

5
src/js/error-display.js
View File

@ -23,7 +23,10 @@ class ErrorDisplay extends ModalDialog {
*/ */
constructor(player, options) { constructor(player, options) {
super(player, options); super(player, options);
this.on(player, 'error', (e) => this.open(e)); this.on(player, 'error', (e) => {
this.close();
this.open(e);
});
} }
/** /**

4
src/js/event-target.js
View File

@ -168,7 +168,7 @@ class EventTarget {
/** /**
* All event listeners should follow the following format. * All event listeners should follow the following format.
* *
* @callback EventTarget~EventListener * @callback EventListener
* @this {EventTarget} * @this {EventTarget}
* *
* @param {Event} event * @param {Event} event
@ -185,7 +185,7 @@ class EventTarget {
* will have extra functionality. See that function for more information. * will have extra functionality. See that function for more information.
* *
* @property EventTarget.prototype.allowedEvents_ * @property EventTarget.prototype.allowedEvents_
* @private * @protected
*/ */
EventTarget.prototype.allowedEvents_ = {}; EventTarget.prototype.allowedEvents_ = {};

11
src/js/menu/menu-button.js
View File

@ -160,6 +160,17 @@ class MenuButton extends Component {
}); });
} }
/**
* Overwrites the `setIcon` method from `Component`.
* In this case, we want the icon to be appended to the menuButton.
*
* @param {string} name
* The icon name to be added.
*/
setIcon(name) {
super.setIcon(name, this.menuButton_.el_);
}
/** /**
* Allow sub components to stack CSS class names for the wrapper element * Allow sub components to stack CSS class names for the wrapper element
* *

13
src/js/menu/menu-item.js
View File

@ -69,10 +69,17 @@ class MenuItem extends ClickableComponent {
}, props), attrs); }, props), attrs);
// swap icon with menu item text. // swap icon with menu item text.
el.replaceChild(createEl('span', { const menuItemEl = createEl('span', {
className: 'vjs-menu-item-text', className: 'vjs-menu-item-text',
textContent: this.localize(this.options_.label) textContent: this.localize(this.options_.label)
}), el.querySelector('.vjs-icon-placeholder')); });
// If using SVG icons, the element with vjs-icon-placeholder will be added separately.
if (this.player_.options_.experimentalSvgIcons) {
el.appendChild(menuItemEl);
} else {
el.replaceChild(menuItemEl, el.querySelector('.vjs-icon-placeholder'));
}
return el; return el;
} }
@ -81,7 +88,7 @@ class MenuItem extends ClickableComponent {
* Ignore keys which are used by the menu, but pass any other ones up. See * Ignore keys which are used by the menu, but pass any other ones up. See
* {@link ClickableComponent#handleKeyDown} for instances where this is called. * {@link ClickableComponent#handleKeyDown} for instances where this is called.
* *
* @param {Event} event * @param {KeyboardEvent} event
* The `keydown` event that caused this function to be called. * The `keydown` event that caused this function to be called.
* *
* @listens keydown * @listens keydown

2
src/js/menu/menu.js
View File

@ -205,7 +205,7 @@ class Menu extends Component {
/** /**
* Handle a `keydown` event on this menu. This listener is added in the constructor. * Handle a `keydown` event on this menu. This listener is added in the constructor.
* *
* @param {Event} event * @param {KeyboardEvent} event
* A `keydown` event that happened on the menu. * A `keydown` event that happened on the menu.
* *
* @listens keydown * @listens keydown

53
src/js/player.js
View File

@ -36,6 +36,7 @@ import {hooks} from './utils/hooks';
import {isObject} from './utils/obj'; import {isObject} from './utils/obj';
import keycode from 'keycode'; import keycode from 'keycode';
import { initMediaSession } from './mediasession.js'; import { initMediaSession } from './mediasession.js';
import icons from '../images/icons.svg';
// The following imports are used only to ensure that the corresponding modules // The following imports are used only to ensure that the corresponding modules
// are always included in the video.js package. Importing the modules will // are always included in the video.js package. Importing the modules will
@ -286,8 +287,8 @@ const DEFAULT_BREAKPOINTS = {
* *
* After an instance has been created it can be accessed globally in three ways: * After an instance has been created it can be accessed globally in three ways:
* 1. By calling `videojs.getPlayer('example_video_1');` * 1. By calling `videojs.getPlayer('example_video_1');`
* 2. By calling `videojs('example_video_1');` (not recomended) * 2. By calling `videojs('example_video_1');` (not recommended)
* 2. By using it directly via `videojs.players.example_video_1;` * 2. By using it directly via `videojs.players.example_video_1;`
* *
* @extends Component * @extends Component
* @global * @global
@ -308,6 +309,7 @@ class Player extends Component {
*/ */
constructor(tag, options, ready) { constructor(tag, options, ready) {
// Make sure tag ID exists // Make sure tag ID exists
// also here.. probably better
tag.id = tag.id || options.id || `vjs_video_${Guid.newGUID()}`; tag.id = tag.id || options.id || `vjs_video_${Guid.newGUID()}`;
// Set Options // Set Options
@ -517,6 +519,25 @@ class Player extends Component {
this.playbackRates(options.playbackRates); this.playbackRates(options.playbackRates);
if (options.experimentalSvgIcons) {
// Add SVG Sprite to the DOM
const parser = new window.DOMParser();
const parsedSVG = parser.parseFromString(icons, 'image/svg+xml');
const errorNode = parsedSVG.querySelector('parsererror');
if (errorNode) {
log.warn('Failed to load SVG Icons. Falling back to Font Icons.');
this.options_.experimentalSvgIcons = null;
} else {
const sprite = parsedSVG.documentElement;
sprite.style.display = 'none';
this.el_.appendChild(sprite);
this.addClass('vjs-svg-icons-enabled');
}
}
this.initChildren(); this.initChildren();
// Set isAudio based on whether or not an audio tag was used // Set isAudio based on whether or not an audio tag was used
@ -2144,7 +2165,9 @@ class Player extends Component {
handleTechError_() { handleTechError_() {
const error = this.tech_.error(); const error = this.tech_.error();
this.error(error); if (error) {
this.error(error);
}
} }
/** /**
@ -3079,22 +3102,22 @@ class Player extends Component {
return window.documentPictureInPicture.requestWindow({ return window.documentPictureInPicture.requestWindow({
// The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629 // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
width: this.videoWidth(), width: this.videoWidth(),
height: this.videoHeight(), height: this.videoHeight()
copyStyleSheets: true
}).then(pipWindow => { }).then(pipWindow => {
Dom.copyStyleSheetsToWindow(pipWindow);
this.el_.parentNode.insertBefore(pipContainer, this.el_); this.el_.parentNode.insertBefore(pipContainer, this.el_);
pipWindow.document.body.append(this.el_); pipWindow.document.body.appendChild(this.el_);
pipWindow.document.body.classList.add('vjs-pip-window'); pipWindow.document.body.classList.add('vjs-pip-window');
this.player_.isInPictureInPicture(true); this.player_.isInPictureInPicture(true);
this.player_.trigger('enterpictureinpicture'); this.player_.trigger('enterpictureinpicture');
// Listen for the PiP closing event to move the video back. // Listen for the PiP closing event to move the video back.
pipWindow.addEventListener('unload', (event) => { pipWindow.addEventListener('pagehide', (event) => {
const pipVideo = event.target.querySelector('.video-js'); const pipVideo = event.target.querySelector('.video-js');
pipContainer.replaceWith(pipVideo); pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
this.player_.isInPictureInPicture(false); this.player_.isInPictureInPicture(false);
this.player_.trigger('leavepictureinpicture'); this.player_.trigger('leavepictureinpicture');
}); });
@ -3126,7 +3149,7 @@ class Player extends Component {
*/ */
exitPictureInPicture() { exitPictureInPicture() {
if (window.documentPictureInPicture && window.documentPictureInPicture.window) { if (window.documentPictureInPicture && window.documentPictureInPicture.window) {
// With documentPictureInPicture, Player#leavepictureinpicture is fired in the unload handler // With documentPictureInPicture, Player#leavepictureinpicture is fired in the pagehide handler
window.documentPictureInPicture.window.close(); window.documentPictureInPicture.window.close();
return Promise.resolve(); return Promise.resolve();
} }
@ -3148,7 +3171,7 @@ class Player extends Component {
* This allows player-wide hotkeys (either as defined below, or optionally * This allows player-wide hotkeys (either as defined below, or optionally
* by an external function). * by an external function).
* *
* @param {Event} event * @param {KeyboardEvent} event
* The `keydown` event that caused this function to be called. * The `keydown` event that caused this function to be called.
* *
* @listens keydown * @listens keydown
@ -3586,6 +3609,16 @@ class Player extends Component {
this.loadTech_(this.options_.techOrder[0], null); this.loadTech_(this.options_.techOrder[0], null);
this.techCall_('reset'); this.techCall_('reset');
this.resetControlBarUI_(); this.resetControlBarUI_();
this.error(null);
if (this.titleBar) {
this.titleBar.update({
title: undefined,
description: undefined
});
}
if (isEvented(this)) { if (isEvented(this)) {
this.trigger('playerreset'); this.trigger('playerreset');
} }

16
src/js/plugin.js
View File

@ -81,7 +81,7 @@ const markPluginAsActive = (player, name) => {
* @param {Player} player * @param {Player} player
* A Video.js player instance. * A Video.js player instance.
* *
* @param {Plugin~PluginEventHash} hash * @param {PluginEventHash} hash
* A plugin event hash. * A plugin event hash.
* *
* @param {boolean} [before] * @param {boolean} [before]
@ -238,7 +238,7 @@ class Plugin {
* @param {Object} [hash={}] * @param {Object} [hash={}]
* An object to be used as event an event hash. * An object to be used as event an event hash.
* *
* @return {Plugin~PluginEventHash} * @return {PluginEventHash}
* An event hash object with provided properties mixed-in. * An event hash object with provided properties mixed-in.
*/ */
getEventHash(hash = {}) { getEventHash(hash = {}) {
@ -257,7 +257,7 @@ class Plugin {
* *
* @param {Object} [hash={}] * @param {Object} [hash={}]
* Additional data hash to merge with a * Additional data hash to merge with a
* {@link Plugin~PluginEventHash|PluginEventHash}. * {@link PluginEventHash|PluginEventHash}.
* *
* @return {boolean} * @return {boolean}
* Whether or not default was prevented. * Whether or not default was prevented.
@ -482,7 +482,7 @@ export default Plugin;
* Signals that a plugin is about to be set up on a player. * Signals that a plugin is about to be set up on a player.
* *
* @event Player#beforepluginsetup * @event Player#beforepluginsetup
* @type {Plugin~PluginEventHash} * @type {PluginEventHash}
*/ */
/** /**
@ -490,14 +490,14 @@ export default Plugin;
* is the name of the plugin. * is the name of the plugin.
* *
* @event Player#beforepluginsetup:$name * @event Player#beforepluginsetup:$name
* @type {Plugin~PluginEventHash} * @type {PluginEventHash}
*/ */
/** /**
* Signals that a plugin has just been set up on a player. * Signals that a plugin has just been set up on a player.
* *
* @event Player#pluginsetup * @event Player#pluginsetup
* @type {Plugin~PluginEventHash} * @type {PluginEventHash}
*/ */
/** /**
@ -505,11 +505,11 @@ export default Plugin;
* is the name of the plugin. * is the name of the plugin.
* *
* @event Player#pluginsetup:$name * @event Player#pluginsetup:$name
* @type {Plugin~PluginEventHash} * @type {PluginEventHash}
*/ */
/** /**
* @typedef {Object} Plugin~PluginEventHash * @typedef {Object} PluginEventHash
* *
* @property {string} instance * @property {string} instance
* For basic plugins, the return value of the plugin function. For * For basic plugins, the return value of the plugin function. For

10
src/js/tech/tech.js
View File

@ -22,7 +22,7 @@ import * as Guid from '../utils/guid.js';
* * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};` * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
* `var SourceString = 'http://example.com/some-video.mp4';` * `var SourceString = 'http://example.com/some-video.mp4';`
* *
* @typedef {Object|string} Tech~SourceObject * @typedef {Object|string} SourceObject
* *
* @property {string} src * @property {string} src
* The url to the source * The url to the source
@ -480,7 +480,7 @@ class Tech extends Component {
* > NOTE: This implementation is incomplete. It does not track the played `TimeRange`. * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.
* It only checks whether the source has played at all or not. * It only checks whether the source has played at all or not.
* *
* @return {TimeRange} * @return { import('../utils/time').TimeRange }
* - A single time range if this video has played * - A single time range if this video has played
* - An empty set of ranges if not. * - An empty set of ranges if not.
*/ */
@ -1280,7 +1280,7 @@ Tech.withSourceHandlers = function(_Tech) {
* *
* TODO: Answer question: should 'probably' be prioritized over 'maybe' * TODO: Answer question: should 'probably' be prioritized over 'maybe'
* *
* @param {Tech~SourceObject} source * @param {SourceObject} source
* The source object * The source object
* *
* @param {Object} options * @param {Object} options
@ -1308,7 +1308,7 @@ Tech.withSourceHandlers = function(_Tech) {
/** /**
* Check if the tech can support the given source. * Check if the tech can support the given source.
* *
* @param {Tech~SourceObject} srcObj * @param {SourceObject} srcObj
* The source object * The source object
* *
* @param {Object} options * @param {Object} options
@ -1371,7 +1371,7 @@ Tech.withSourceHandlers = function(_Tech) {
* and source handlers. * and source handlers.
* Should never be called unless a source handler was found. * Should never be called unless a source handler was found.
* *
* @param {Tech~SourceObject} source * @param {SourceObject} source
* A source object with src and type keys * A source object with src and type keys
*/ */
_Tech.prototype.setSource = function(source) { _Tech.prototype.setSource = function(source) {

2
src/js/tracks/audio-track-list.js
View File

@ -36,7 +36,7 @@ class AudioTrackList extends TrackList {
/** /**
* Create an instance of this class. * Create an instance of this class.
* *
* @param {AudioTrack[]} [tracks=[]] * @param { import('./audio-track').default[] } [tracks=[]]
* A list of `AudioTrack` to instantiate the list with. * A list of `AudioTrack` to instantiate the list with.
*/ */
constructor(tracks = []) { constructor(tracks = []) {

3
src/js/tracks/html-track-element.js
View File

@ -105,6 +105,9 @@ class HTMLTrackElement extends EventTarget {
} }
} }
/**
* @protected
*/
HTMLTrackElement.prototype.allowedEvents_ = { HTMLTrackElement.prototype.allowedEvents_ = {
load: 'load' load: 'load'
}; };

4
src/js/tracks/text-track-display.js
View File

@ -324,7 +324,9 @@ class TextTrackDisplay extends Component {
* a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired. * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
*/ */
updateDisplayOverlay() { updateDisplayOverlay() {
if (!this.player_.videoHeight()) { // inset-inline and inset-block are not supprted on old chrome, but these are
// only likely to be used on TV devices
if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
return; return;
} }

2
src/js/tracks/text-track-settings.js
View File

@ -87,7 +87,7 @@ const selectConfigs = {
['raised', 'Raised'], ['raised', 'Raised'],
['depressed', 'Depressed'], ['depressed', 'Depressed'],
['uniform', 'Uniform'], ['uniform', 'Uniform'],
['dropshadow', 'Dropshadow'] ['dropshadow', 'Drop shadow']
] ]
}, },

Some files were not shown because too many files have changed in this diff Show More