Comparar commits
450 Commits
| Autor | SHA1 | Data | |
|---|---|---|---|
| 692a0e9c09 | |||
| a7d6c350e7 | |||
| 9e34570c0f | |||
| c529f0898d | |||
| 3bf4afc831 | |||
| f3d7196a73 | |||
| 7ea1d8f544 | |||
| 6b612d8cdc | |||
| e4fbf27358 | |||
| 0af41818e0 | |||
| 1ffea6ce07 | |||
| bf8b62cc81 | |||
| f32ec15344 | |||
| 949bfa2d39 | |||
| bae224e4c4 | |||
| 64564c0dcd | |||
| 003c5ef38d | |||
| 7dc919c89e | |||
| 52667554dc | |||
| a0d8db9ed1 | |||
| d64205de79 | |||
| 527a33a252 | |||
| b3bbb17dd4 | |||
| 403afcf57d | |||
| 3c4c5a5aee | |||
| cfb688983b | |||
| bcf3f34dde | |||
| 4c42446d44 | |||
| 2619593691 | |||
| fa5116ffe7 | |||
| 49eeb600fd | |||
| 39fe83e1c0 | |||
| 8b5eb5089f | |||
| fa75d61cf8 | |||
| c5fb952935 | |||
| f00f354ab9 | |||
| 8afc2f919b | |||
| b2fbc8059b | |||
| 6921b552ef | |||
| aaa88c70f2 | |||
| 3da12eba29 | |||
| 14c64f197f | |||
| d10977ebf3 | |||
| f69881c276 | |||
| 116681771b | |||
| 11524ca2c3 | |||
| 624bf16070 | |||
| 0ddc344e76 | |||
| 781b4e59f5 | |||
| 0bc7ca0954 | |||
| 0ce57ae149 | |||
| f6ab92977e | |||
| 707d0e7660 | |||
| 951370dec9 | |||
| 5ef0da4ac6 | |||
| ae90526f2c | |||
| 540e7f0cb7 | |||
| cab595a5dd | |||
| 9217d5c2e7 | |||
| 34ad720626 | |||
| 97c7e4c759 | |||
| 738fa73949 | |||
| d3e03accce | |||
| edd2e11486 | |||
| 2466c76a57 | |||
| c794aeca34 | |||
| e17dd2c68d | |||
| 472988df58 | |||
| 6789c921f5 | |||
| b1c3bd4f84 | |||
| f6ba25ddf6 | |||
| 02949f5b91 | |||
| bb93a18ca8 | |||
| 3352346a74 | |||
| a97a002ed6 | |||
| fa635f835f | |||
| 2af481e0ec | |||
| 7debdea507 | |||
| a77e39f342 | |||
| da19fa3ead | |||
| d6d3dd1d4d | |||
| 926ccac6a7 | |||
| bdc89a0b24 | |||
| 392cbda095 | |||
| d5372545a2 | |||
| 813f28fb4d | |||
| 1378f566ab | |||
| ab520e9dd7 | |||
| 14ecc2fc89 | |||
| bdf6c54dbc | |||
| c0451fa674 | |||
| 5812d64154 | |||
| 3b60b9decd | |||
| b65eb0e5f3 | |||
| c9b1217e10 | |||
| 9e8a31065e | |||
| d24a9b48ac | |||
| 80147f0054 | |||
| fe6946d451 | |||
| b66ef806e5 | |||
| fc4d00c658 | |||
| 1448638285 | |||
| 0ee79afdfe | |||
| 8a05aa11a1 | |||
| 155781058e | |||
| 595a6131c1 | |||
| bb50466733 | |||
| 91aa06fe56 | |||
| 95173ebf7c | |||
| 6d78c95bb4 | |||
| 6116e3c3da | |||
| b2f6175a7b | |||
| 3720a2de12 | |||
| 39ae5178ee | |||
| e77f8c95d3 | |||
| 61a919d529 | |||
| 9d311640b1 | |||
| 17cb669047 | |||
| 71c0a72717 | |||
| aedaa17e3c | |||
| e3e836f41e | |||
| 7aeb288848 | |||
| 5edc3a5cbc | |||
| 3f9a2ca35b | |||
| 9a2bee9abf | |||
| d01de49ded | |||
| 1744d64142 | |||
| 956f3e03eb | |||
| 23ab370ab6 | |||
| bd66416b75 | |||
| 6bb92282c3 | |||
| f3ab261d5b | |||
| 38c394fc90 | |||
| a97bb5f74b | |||
| 4d05b6febb | |||
| 3189ec1a0b | |||
| b8f525cb81 | |||
| 46aa551e1e | |||
| 97c1f83dc7 | |||
| 0c3fb04acb | |||
| bad5130c8f | |||
| 8dfe0a4d06 | |||
| 047bd8f618 | |||
| d7f840a969 | |||
| 01567428b0 | |||
| 4235a3d8c1 | |||
| 4bb3a23331 | |||
| 7782eda524 | |||
| 92eac13caa | |||
| bcb69a0b23 | |||
| 3fd0c92c95 | |||
| a6718913be | |||
| 1df28ff311 | |||
| dbff62e3f0 | |||
| ef25557577 | |||
| 269f7b15c0 | |||
| adf4e507c1 | |||
| a5bc6884e2 | |||
| e7617bfdd4 | |||
| 27f0f789e0 | |||
| 3e5ef19212 | |||
| d96e008978 | |||
| 227700a236 | |||
| 923ce038f7 | |||
| 16eea0a1df | |||
| f4704ee74f | |||
| 8c9a4cc434 | |||
| f98012a471 | |||
| 65833f5231 | |||
| e8722ff522 | |||
| c1029eab16 | |||
| 46605739e2 | |||
| 31918fc46d | |||
| 3bafdeef51 | |||
| 2473d5bf7a | |||
| 4242fe3857 | |||
| da45dad831 | |||
| 2fca84435d | |||
| d8f721abf5 | |||
| 9d258742c5 | |||
| 35d7258973 | |||
| 4e0c2b366d | |||
| aa8d50b219 | |||
| 95c29e684f | |||
| c7e35e51de | |||
| d784f9d0d9 | |||
| 6a097c0236 | |||
| efe25c0b13 | |||
| 06e141df58 | |||
| 848cfd6620 | |||
| d3af3e0e07 | |||
| af50b8ee29 | |||
| aeb4aa3ada | |||
| 825de43819 | |||
| 066438670f | |||
| e8d36e0fab | |||
| a9ad77aa00 | |||
| b3b42e3822 | |||
| 88403221a9 | |||
| 2079af7320 | |||
| c8bd862e3e | |||
| 74c73969cd | |||
| c286c826db | |||
| 33f388366d | |||
| f363523551 | |||
| e87fe460cc | |||
| 2c12ed98a7 | |||
| 87ee28e6cb | |||
| e39557e790 | |||
| e2a1cac136 | |||
| d21019ad78 | |||
| 94ec725a66 | |||
| 75bd76f55c | |||
| fef6282d55 | |||
| f1d2aef048 | |||
| d1d97bfe9b | |||
| 0a1d4b2645 | |||
| 0c856ce9a4 | |||
| 817253b74f | |||
| f86e073f03 | |||
| 86c3f94c87 | |||
| d48d6cf99d | |||
| 0f2aadcfcd | |||
| 4daf1f173c | |||
| 61eb54afa8 | |||
| 799f1762ff | |||
| 416ee1b2a0 | |||
| 204bb84ecb | |||
| 5381f70d1c | |||
| 252ad3f466 | |||
| 80d7b5014a | |||
| 32e4d4c9d0 | |||
| d289a336b8 | |||
| e35083bc28 | |||
| 4051a9cbee | |||
| 26f6f4b0ea | |||
| cbefd37acf | |||
| 378d6ef482 | |||
| 02155c6b13 | |||
| 7a4c602be0 | |||
| b7cc2a8a4c | |||
| e7b1098563 | |||
| a64a5e27cf | |||
| bdeaae1c92 | |||
| e2b2d14f48 | |||
| 96c274de63 | |||
| 6244c39129 | |||
| e4b269e294 | |||
| f3166ad082 | |||
| 54609dc3f5 | |||
| 2005fe2136 | |||
| efd4822c6b | |||
| d538debb1d | |||
| 48230ea1a1 | |||
| 661cbd1eb0 | |||
| fe2b702e32 | |||
| d47435a18f | |||
| 7c772fbf3e | |||
| 4116d9ec14 | |||
| f155814cd9 | |||
| a0f929dd57 | |||
| cc5e515360 | |||
| 2e26703162 | |||
| 0ad8abfef1 | |||
| 61883ab4e2 | |||
| 0f854c751b | |||
| 5b133823e5 | |||
| 3e19d7621a | |||
| b0a6cf335a | |||
| ed78764379 | |||
| 7f44942c9b | |||
| e9da3350d4 | |||
| c6c49ac580 | |||
| 4b0db76d77 | |||
| 6b28ba268a | |||
| 5146c1fa4a | |||
| b98d719564 | |||
| 7aefee5d7d | |||
| c1e623bed7 | |||
| 333db84510 | |||
| 8f40fa4548 | |||
| 9c282811e1 | |||
| d68f5a93a5 | |||
| 1dd8a15655 | |||
| 3336f1fe02 | |||
| 4fe74d52a9 | |||
| 0d58df8edb | |||
| f135b97ce0 | |||
| 051657334f | |||
| 7be94c3882 | |||
| 4f66e09595 | |||
| 1bb2c7ed57 | |||
| 1e781d14df | |||
| ee9a18d5ac | |||
| ce0c4b12d2 | |||
| 9e5dce5c14 | |||
| 88dca0a2e2 | |||
| 8aa2eb4719 | |||
| ecaf748e4f | |||
| c9cad9ca1e | |||
| 956aaa0425 | |||
| e062dec423 | |||
| 8b720ce45a | |||
| 5ab2504e90 | |||
| 310a0630c9 | |||
| 468b07c651 | |||
| 12c830049e | |||
| fe4c477da6 | |||
| 24125bbb63 | |||
| e73bb869ce | |||
| 5c907e1ce2 | |||
| 8c59405d86 | |||
| 7ade43d91d | |||
| 49656ab013 | |||
| 6f83d0b00e | |||
| 71ba5bb062 | |||
| 11e7028c25 | |||
| 7926c2d9a6 | |||
| 2b1291816f | |||
| 4d9d06e1c9 | |||
| 0fc76451f9 | |||
| 3cb41c7786 | |||
| 2d5ca1ebc2 | |||
| 1b45195f9d | |||
| 04c893208e | |||
| 453402a912 | |||
| 849521ee66 | |||
| ef1b239b2a | |||
| 4521c70173 | |||
| 28a4d29934 | |||
| 9975ed407a | |||
| 75a23135e6 | |||
| 4d2267c1bc | |||
| 44d6cac1b7 | |||
| e5294848f9 | |||
| 26c8d3f92c | |||
| a7d624affe | |||
| 4b254a07df | |||
| 07cd9800e8 | |||
| b23eba7c8c | |||
| 70ed4fcbb2 | |||
| d0f8b3e87e | |||
| 7184cb4b49 | |||
| c597605afd | |||
| d73bfb80b7 | |||
| 0dd210dcf3 | |||
| e25a9f3207 | |||
| e4b4906198 | |||
| 4dd776c334 | |||
| a8afe9c673 | |||
| 6a1c0bdd0c | |||
| 65767f77f8 | |||
| f5acb89d70 | |||
| f152c6a4be | |||
| cb78815e80 | |||
| ff1c9c5cf0 | |||
| dd8c25e8d5 | |||
| 1cd81ad258 | |||
| bf7dd32ff6 | |||
| 9088dfffc9 | |||
| a54d9cdae6 | |||
| 51b836d6be | |||
| 0a2167468c | |||
| 02eb2d3ee3 | |||
| 2825f74ba8 | |||
| 59a733f14e | |||
| 0dae44988e | |||
| dfe4543a0d | |||
| 0f38d27dcc | |||
| 024b031646 | |||
| ec1bea41a5 | |||
| b1f9450bb3 | |||
| 950072ad97 | |||
| 491b9b232b | |||
| a106924e6d | |||
| 6b73df950e | |||
| 7b23576afc | |||
| 166cc9c1ef | |||
| 81e49d4361 | |||
| 090bc0d12a | |||
| beb329ad71 | |||
| 2066474096 | |||
| 432b60f22c | |||
| 15a0d7dbb6 | |||
| c23ca5200c | |||
| 522f45f458 | |||
| df57b302da | |||
| 2aa09fd15a | |||
| 09f81c0c6c | |||
| 75b2171051 | |||
| 3248bc1258 | |||
| 1cab78347d | |||
| 0cbe95d615 | |||
| dcc19dcf04 | |||
| f3fcf9b5b8 | |||
| ef0d63b5ba | |||
| 7efcbd5e19 | |||
| c69290c39f | |||
| cb9447b2c3 | |||
| 875fc2ff32 | |||
| 1f06a0c6b3 | |||
| 2f716cddf4 | |||
| d653c25025 | |||
| c2abbb7568 | |||
| 9662736766 | |||
| b6c902a7b3 | |||
| 5308dd41d2 | |||
| 4e216cdddb | |||
| 847472f286 | |||
| df7c91ad92 | |||
| 10c3e46e95 | |||
| 48f6332f78 | |||
| d9bb81018b | |||
| 4e0128bb3d | |||
| 6c1adb79d2 | |||
| 7ee2f864b3 | |||
| c85d94a2ce | |||
| 4c6a12898b | |||
| 6e3eb5075e | |||
| f318eb9f1f | |||
| 9bfbceb047 | |||
| c56e6ed37c | |||
| 7a8d808b0e | |||
| 124c62fe24 | |||
| ba20239147 | |||
| 0c4ab0b449 | |||
| e0794cf4b4 | |||
| 3203c2c5ed | |||
| 9ec2556a7c | |||
| d3efe4b04c | |||
| f35ae5c44f | |||
| 14193c4308 | |||
| 1bef68a60b | |||
| e37e870d42 | |||
| c5a8cff129 | |||
| 61bc016637 | |||
| acf41c4882 | |||
| da3550a6d8 | |||
| 3640623147 | |||
| a6198efaca | |||
| f07caa2b97 | |||
| 2662ad9c96 | |||
| 13dbf23c3c | |||
| b2098e0efe | |||
| faea65a44e | |||
| 50adf355af | |||
| 1d05177627 | |||
| a94259cc73 | |||
| a49213e20c | |||
| 57c576f96c |
@@ -1,21 +0,0 @@
|
||||
/*
|
||||
Bunyip is a tool for multi-browser/device testing
|
||||
https://github.com/ryanseddon/bunyip
|
||||
It uses a few service under the hood including:
|
||||
Browsertack - http://browserstack.com
|
||||
Pagekite https://pagekite.net
|
||||
You'll need accounts at both to use bunyip
|
||||
You'll also need to download and install pagekite.py
|
||||
*/
|
||||
var config = {
|
||||
"browserstack": {
|
||||
"username": "your-browserstack-email@example.com",
|
||||
"password": "your browserstack password",
|
||||
"timeout": 300
|
||||
},
|
||||
"port": 9000,
|
||||
"tunnellink": "your-subdomain.pagekite.me",
|
||||
"tunnel": "pagekite.py <port> your-subdomain.pagekite.me"
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@@ -1,6 +1,7 @@
|
||||
.DS_Store
|
||||
dist/*
|
||||
build/files/*
|
||||
docs/api/*
|
||||
dev.html
|
||||
projects
|
||||
.zenflow-log
|
||||
@@ -18,3 +19,6 @@ sandbox/*
|
||||
*.swo
|
||||
|
||||
*.orig
|
||||
|
||||
*results.xml
|
||||
*.log
|
||||
|
||||
+7
-2
@@ -18,7 +18,11 @@
|
||||
"goog",
|
||||
"console",
|
||||
|
||||
"require",
|
||||
"require",
|
||||
"define",
|
||||
"module",
|
||||
"exports",
|
||||
"process",
|
||||
|
||||
"PlayerTest",
|
||||
"asyncTest",
|
||||
@@ -35,6 +39,7 @@
|
||||
"start",
|
||||
"stop",
|
||||
"strictEqual",
|
||||
"test"
|
||||
"test",
|
||||
"sinon"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
# Exclude everything but the contents of the dist directory.
|
||||
**/*
|
||||
!dist/**
|
||||
+12
-1
@@ -1,3 +1,14 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 0.8
|
||||
- 0.10
|
||||
before_script:
|
||||
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then curl https://gist.githubusercontent.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash; fi
|
||||
notifications:
|
||||
irc:
|
||||
channels:
|
||||
- "chat.freenode.net#videojs"
|
||||
use_notice: true
|
||||
env:
|
||||
global:
|
||||
- secure: K6JpKwMkfNaJix3Bb0tLjVMzHMJgtBXdd/dvfw1BMb9DCBpd81PqXbDs7yXCddUxnUPTBPxZCrQgWsw71Wn+qEoIG5MU3uOT5A2rBbx/yZonVAGv5ed/9w0xk0OzO383CmPMFqwqtp9YmdmqGjQBkYXVXJjTvNTOAExFSdhO+3U=
|
||||
- secure: GIbhjUJapvC70nIZVlhVyK+3KAD2TVKpiY/q412OO7V2izbvcM1tvU3LBoMZbROzrt5TT84tCoJDvHnrpL0OvxPwrzL5CUU7h4UTxhTOyQkEinbYAnWlW9wdrvtdczsEvANkFPqBZ53B3hVHZHMLOG8QRWaTBicF68vSHEJFqb4=
|
||||
|
||||
+131
-1
@@ -1,11 +1,141 @@
|
||||
CHANGELOG
|
||||
=========
|
||||
|
||||
## Unreleased (HEAD)
|
||||
## HEAD (Unreleased)
|
||||
_(none)_
|
||||
|
||||
--------------------
|
||||
|
||||
## 4.7.1 (2014-08-06)
|
||||
* Fixed the broken bower.json config ([view](https://github.com/videojs/video.js/pull/1401))
|
||||
|
||||
## 4.7.0 (2014-08-05)
|
||||
* Added cross-browser isArray for cross-frame support. fixes #1195 ([view](https://github.com/videojs/video.js/pull/1218))
|
||||
* Fixed support for webvtt chapters. Fixes #676. ([view](https://github.com/videojs/video.js/pull/1221))
|
||||
* Fixed issues around webvtt cue time parsing. Fixed #877, fixed #183. ([view](https://github.com/videojs/video.js/pull/1236))
|
||||
* Fixed an IE11 issue where clicking on the video wouldn't show the controls ([view](https://github.com/videojs/video.js/pull/1291))
|
||||
* Added a composer.json for PHP packages ([view](https://github.com/videojs/video.js/pull/1241))
|
||||
* Exposed the vertical option for slider controls ([view](https://github.com/videojs/video.js/pull/1303))
|
||||
* Fixed an error when disposing a tech using manual timeupdates ([view](https://github.com/videojs/video.js/pull/1312))
|
||||
* Exported missing Player API methods (remainingTime, supportsFullScreen, enterFullWindow, exitFullWindow, preload) ([view](https://github.com/videojs/video.js/pull/1328))
|
||||
* Added a base for running saucelabs tests from grunt ([view](https://github.com/videojs/video.js/pull/1215))
|
||||
* Added additional browsers for saucelabs testing ([view](https://github.com/videojs/video.js/pull/1216))
|
||||
* Added support for listening to multiple events through a types array ([view](https://github.com/videojs/video.js/pull/1231))
|
||||
* Exported the vertical option for the volume slider ([view](https://github.com/videojs/video.js/pull/1378))
|
||||
* Fixed Component trigger function arguments and docs ([view](https://github.com/videojs/video.js/pull/1310))
|
||||
* Now copying all attributes from the original video tag to the generated video element ([view](https://github.com/videojs/video.js/pull/1321))
|
||||
* Added files to be ignored in the bower.json ([view](https://github.com/videojs/video.js/pull/1337))
|
||||
* Fixed an error that could happen if Flash was diposed before the ready callback was fired ([view](https://github.com/videojs/video.js/pull/1340))
|
||||
* The up and down arrows can now be used to control sliders in addition to left and right ([view](https://github.com/videojs/video.js/pull/1345))
|
||||
* Added a player.currentType() function to get the MIME type of the current source ([view](https://github.com/videojs/video.js/pull/1320))
|
||||
* Fixed a potential conflict with other event listener shims ([view](https://github.com/videojs/video.js/pull/1363))
|
||||
* Added support for multiple time ranges in the load progress bar ([view](https://github.com/videojs/video.js/pull/1253))
|
||||
* Added vjs-waiting and vjs-seeking css classnames and updated the spinner to use them ([view](https://github.com/videojs/video.js/pull/1351))
|
||||
* Now restoring the original video tag attributes on a tech change to support webkit-playsinline ([view](https://github.com/videojs/video.js/pull/1369))
|
||||
* Fixed an issue where the user was unable to scroll/zoom page if touching the video ([view](https://github.com/videojs/video.js/pull/1373))
|
||||
* Added "sliding" class for when slider is sliding to help with handle styling ([view](https://github.com/videojs/video.js/pull/1385))
|
||||
|
||||
## 4.6.4 (2014-07-11)
|
||||
* Fixed an issue where Flash autoplay would not show the controls ([view](https://github.com/videojs/video.js/pull/1343))
|
||||
|
||||
## 4.6.3 (2014-06-12)
|
||||
* Updated to version 4.4.1 of the SWF ([view](https://github.com/videojs/video.js/pull/1285))
|
||||
* Fixed a minification issue with the fullscreen event. fixes #1282 ([view](https://github.com/videojs/video.js/pull/1286))
|
||||
|
||||
## 4.6.2 (2014-06-10)
|
||||
* Fixed an issue with the firstplay event not firing when autoplaying ([view](https://github.com/videojs/video.js/pull/1271))
|
||||
|
||||
## 4.6.1 (2014-05-20)
|
||||
* Udpated playbackRate menu to work in minified version ([view](https://github.com/videojs/video.js/pull/1223))
|
||||
|
||||
## 4.6.0 (2014-05-20)
|
||||
* Updated the UI to support live video ([view](https://github.com/videojs/video.js/pull/1121))
|
||||
* The UI now resets after a source change ([view](https://github.com/videojs/video.js/pull/1124))
|
||||
* Now assuming smart CSS defaults for sliders to prevent reflow on player init ([view](https://github.com/videojs/video.js/pull/1122))
|
||||
* Fixed the title element placement in menus [[view](https://github.com/videojs/video.js/pull/1114)]
|
||||
* Fixed title support for menu buttons ([view](https://github.com/videojs/video.js/pull/1128))
|
||||
* Fixed extra mousemove events on Windows caused by certain apps, not users [[view](https://github.com/videojs/video.js/pull/1068)]
|
||||
* Fixed error due to undefined tech when no source is supported [[view](https://github.com/videojs/video.js/pull/1172)]
|
||||
* Fixed the progress bar not finishing when manual timeupdate events are used [[view](https://github.com/videojs/video.js/pull/1173)]
|
||||
* Added a more informative and styled fallback message for non-html5 browsers [[view](https://github.com/videojs/video.js/pull/1181)]
|
||||
* Added the option to provide an array of child components instead of an object [[view](https://github.com/videojs/video.js/pull/1093)]
|
||||
* Fixed casing on webkitRequestFullscreen [[view](https://github.com/videojs/video.js/pull/1101)]
|
||||
* Made tap events on mobile less sensitive to touch moves [[view](https://github.com/videojs/video.js/pull/1111)]
|
||||
* Fixed the default flag for captions/subtitles tracks [[view](https://github.com/videojs/video.js/pull/1153)]
|
||||
* Fixed compilation failures with LESS v1.7.0 and GRUNT v0.4.4 [[view](https://github.com/videojs/video.js/pull/1180)]
|
||||
* Added better error handling across the library [[view](https://github.com/videojs/video.js/pull/1197)]
|
||||
* Updated captions/subtiles file fetching to support cross-origin requests in older IE browsers [[view](https://github.com/videojs/video.js/pull/1095)]
|
||||
* Added support for playback rate switching [[view](https://github.com/videojs/video.js/pull/1132)]
|
||||
* Fixed an issue with the loadstart event order that caused the big play button to not hide [[view](https://github.com/videojs/video.js/pull/1209)]
|
||||
* Modernized the fullscreen API and added support for IE11 [[view](https://github.com/videojs/video.js/pull/1205)]
|
||||
* Added cross-browser testing with SauceLabs, and added Karma as the default test runner ([view](https://github.com/videojs/video.js/pull/1187))
|
||||
* Fixed saucelabs integration to run on commits in TravisCI ([view](https://github.com/videojs/video.js/pull/1214))
|
||||
* Added a clearer error message when a tech is undefined ([view](https://github.com/videojs/video.js/pull/1210))
|
||||
* Added a cog icon to the font icons ([view](https://github.com/videojs/video.js/pull/1211))
|
||||
* Added a player option to offset the subtitles/captions timing ([view](https://github.com/videojs/video.js/pull/1212))
|
||||
|
||||
## 4.5.2 (2014-04-12)
|
||||
* Updated release versioning to include bower.json and component.json
|
||||
|
||||
## 4.5.1 (2014-03-27)
|
||||
* Fixed a bug from the last release where canPlaySource was no longer exported
|
||||
|
||||
## 4.5.0 (2014-03-27)
|
||||
* Added component(1) support ([view](https://github.com/videojs/video.js/pull/1032))
|
||||
* Captions now move down when controls are hidden ([view](https://github.com/videojs/video.js/pull/1053))
|
||||
* Added the .less source file to the distribution files ([view](https://github.com/videojs/video.js/pull/1056))
|
||||
* Changed src() to return the current selected source ([view](https://github.com/videojs/video.js/pull/968))
|
||||
* Added a grunt task for opening the next issue that needs addressing ([view](https://github.com/videojs/video.js/pull/1059))
|
||||
* Fixed Android 4.0+ devices' check for HLS support ([view](https://github.com/videojs/video.js/pull/1084))
|
||||
|
||||
## 4.4.3 (2014-03-06)
|
||||
* Fixed bugs in IE9 Windows 7N with no Media Player ([view](https://github.com/videojs/video.js/pull/1060))
|
||||
* Fixed a bug with setPoster() in the minified version ([view](https://github.com/videojs/video.js/pull/1062))
|
||||
|
||||
## 4.4.2 (2014-02-24)
|
||||
* Fixed module.exports in minified version ([view](https://github.com/videojs/video.js/pull/1038))
|
||||
|
||||
## 4.4.1 (2014-02-18)
|
||||
* Added .npmignore so dist files wouldn't be ignored in packages
|
||||
|
||||
## 4.4.0 (2014-02-18)
|
||||
* Made the poster updateable after initialization ([view](https://github.com/videojs/video.js/pull/838))
|
||||
* Exported more textTrack functions ([view](https://github.com/videojs/video.js/pull/815))
|
||||
* Moved player ID generation to support video tags with no IDs ([view](https://github.com/videojs/video.js/pull/845))
|
||||
* Moved to using QUnit as a dependency ([view](https://github.com/videojs/video.js/pull/850))
|
||||
* Added the util namespace for public utility functions ([view](https://github.com/videojs/video.js/pull/862))
|
||||
* Fixed an issue with calling duration before Flash is loaded ([view](https://github.com/videojs/video.js/pull/861))
|
||||
* Added player methods to externs so they can be overridden ([view](https://github.com/videojs/video.js/pull/878))
|
||||
* Fixed html5 playback when switching between media techs ([view](https://github.com/videojs/video.js/pull/887))
|
||||
* Fixed Firefox+Flash mousemove events so controls don't hide permanently ([view](https://github.com/videojs/video.js/pull/899))
|
||||
* Fixed a test for touch detection ([view](https://github.com/videojs/video.js/pull/962))
|
||||
* Updated the src file list for karma tests ([view](https://github.com/videojs/video.js/pull/948))
|
||||
* Added more tests for API properties after minification ([view](https://github.com/videojs/video.js/pull/906))
|
||||
* Updated projet to use npm version of videojs-swf ([view](https://github.com/videojs/video.js/pull/930))
|
||||
* Added support for dist zipping on windows ([view](https://github.com/videojs/video.js/pull/944))
|
||||
* Fixed iOS fullscreen issue ([view](https://github.com/videojs/video.js/pull/977))
|
||||
* Fixed touch event bubbling ([view](https://github.com/videojs/video.js/pull/992))
|
||||
* Fixed ARIA role attribute for button and slider ([view](https://github.com/videojs/video.js/pull/988))
|
||||
* Fixed an issue where a component's dispose event would bubble up ([view](https://github.com/videojs/video.js/pull/981))
|
||||
* Quieted down deprecation warnings ([view](https://github.com/videojs/video.js/pull/971))
|
||||
* Updated the seek handle to contain the current time ([view](https://github.com/videojs/video.js/pull/902))
|
||||
* Added requirejs and browserify support (UMD) ([view](https://github.com/videojs/video.js/pull/998))
|
||||
|
||||
## 4.3.0 (2013-11-04)
|
||||
* Added Karma for cross-browser unit testing ([view](https://github.com/videojs/video.js/pull/714))
|
||||
* Unmuting when the volume is changed ([view](https://github.com/videojs/video.js/pull/720))
|
||||
* Fixed an accessibility issue with the big play button ([view](https://github.com/videojs/video.js/pull/777))
|
||||
* Exported user activity methods ([view](https://github.com/videojs/video.js/pull/783))
|
||||
* Added a classname to center the play button and new spinner options ([view](https://github.com/videojs/video.js/pull/784))
|
||||
* Added API doc generation ([view](https://github.com/videojs/video.js/pull/801))
|
||||
* Added support for codecs in Flash mime types ([view](https://github.com/videojs/video.js/pull/805))
|
||||
|
||||
## 4.2.2 (2013-10-15)
|
||||
* Fixed a race condition that would cause videos to fail in Firefox ([view](https://github.com/videojs/video.js/pull/776))
|
||||
|
||||
## 4.2.1 (2013-09-09)
|
||||
* Fixed an infinite loop caused by loading the library asynchronously ([view](https://github.com/videojs/video.js/pull/727))
|
||||
|
||||
## 4.2.0 (2013-09-04)
|
||||
* Added LESS as a CSS preprocessor for the default skin ([view](https://github.com/videojs/video.js/pull/644))
|
||||
* Exported MenuButtons for use in the API ([view](https://github.com/videojs/video.js/pull/648))
|
||||
|
||||
+23
-4
@@ -148,6 +148,16 @@ grunt
|
||||
grunt test
|
||||
```
|
||||
|
||||
Video.js is also configured to run tests with Karma. Karma is installed as a grunt plugin to run QUnit tests in real browsers, as opposed to simply running the tests in phantomjs, a headless browser.
|
||||
|
||||
To run the QUnit test suite in Karma, do the following:
|
||||
1. Copy test/karma.conf.js.example and rename the copy test/karma.conf.js. Please note that if you decide to name the file something other than karma.conf.js, or if you decide to change the location of your conf.js file from the test/ folder, you will need to change references to karma.conf.js in Gruntfile and .gitignore to your new file name and location, so that you don't inadvertently add your conf.js file to any of your video.js pull requests.
|
||||
2. Open test/karma.conf.js in an editor, and configure the properties in it as desired. At a minimum, you'll want to add the browsers that you want to run your tests in. The karma.conf.js.example file has detailed information on usage in the file itself.
|
||||
After you've configured the desired properties in your karma.conf.js, run:
|
||||
```bash
|
||||
grunt karma:dev
|
||||
```
|
||||
|
||||
At this point you should have a built copy of video.js in a directory named `dist`, and all tests should be passing.
|
||||
|
||||
### Making Changes
|
||||
@@ -173,15 +183,24 @@ cp sandbox/index.html.example sandbox/index.html
|
||||
open sandbox/index.html
|
||||
```
|
||||
|
||||
> #### NOTE: Testing Flash Locally in Chrome
|
||||
> Chrome 21+ (as of 2013/01/01) doens't run Flash files that are local and loaded into a locally accessed page (file:///).
|
||||
|
||||
### Testing Locally
|
||||
A simple Connect server is available via the Grunt plugin. The commands below will allow you to setup a test sandbox and begin development.
|
||||
|
||||
```bash
|
||||
cp sandbox/index.html.example sandbox/index.html
|
||||
grunt connect
|
||||
open http://localhost:9999/sandbox/index.html
|
||||
```
|
||||
|
||||
> NOTES regarding local testing in Chrome 21+ (as of 2013/01/01)
|
||||
> Flash files that are local and loaded into a locally accessed page (file:///) will NOT run.
|
||||
> To get around this you can do either of the following:
|
||||
>
|
||||
> 1. Do your development and testing using a local HTTP server.
|
||||
> 1. Do your development and testing using a local HTTP server. See Grunt commands above.
|
||||
>
|
||||
> 2. [Disable the version of Flash included with Chrome](http://helpx.adobe.com/flash-player/kb/flash-player-google-chrome.html#How_can_I_run_debugger_or_alternate_versions_of_Flash_Player_in_Google_Chrome) and enable a system-wide version of Flash instead.
|
||||
|
||||
|
||||
Commit and push changes as you go (using git directly). Write thorough descriptions of your changes in your commit messages.
|
||||
|
||||
```bash
|
||||
|
||||
+419
-30
@@ -1,9 +1,10 @@
|
||||
module.exports = function(grunt) {
|
||||
var pkg, s3, semver, version, verParts, uglify;
|
||||
var pkg, s3, semver, version, verParts, uglify, exec;
|
||||
|
||||
semver = require('semver');
|
||||
pkg = grunt.file.readJSON('package.json');
|
||||
uglify = require('uglify-js');
|
||||
exec = require('child_process').exec;
|
||||
|
||||
try {
|
||||
s3 = grunt.file.readJSON('.s3config.json');
|
||||
@@ -20,10 +21,19 @@ module.exports = function(grunt) {
|
||||
};
|
||||
version.majorMinor = version.major + '.' + version.minor;
|
||||
|
||||
// loading predefined source order from source-loader.js
|
||||
// trust me, this is the easist way to do it so far
|
||||
/*jshint undef:false, evil:true */
|
||||
var blockSourceLoading = true;
|
||||
var sourceFiles; // Needed to satisfy jshint
|
||||
eval(grunt.file.read('./build/source-loader.js'));
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: pkg,
|
||||
|
||||
lang: {
|
||||
src: 'lang/*.json'
|
||||
},
|
||||
build: {
|
||||
src: 'src/js/dependencies.js',
|
||||
options: {
|
||||
@@ -45,12 +55,12 @@ module.exports = function(grunt) {
|
||||
minify: {
|
||||
source:{
|
||||
src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js'],
|
||||
externs: ['src/js/media/flash.externs.js'],
|
||||
externs: ['src/js/player.externs.js', 'src/js/media/flash.externs.js'],
|
||||
dest: 'build/files/minified.video.js'
|
||||
},
|
||||
tests: {
|
||||
src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js', 'test/unit/*.js', '!test/unit/api.js'],
|
||||
externs: ['src/js/media/flash.externs.js', 'test/qunit/qunit-externs.js'],
|
||||
src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js', 'test/unit/*.js'],
|
||||
externs: ['src/js/player.externs.js', 'src/js/media/flash.externs.js', 'test/qunit-externs.js', 'test/sinon-externs.js'],
|
||||
dest: 'build/files/test.minified.video.js'
|
||||
}
|
||||
},
|
||||
@@ -64,6 +74,14 @@ module.exports = function(grunt) {
|
||||
files: [ 'src/**/*', 'test/unit/*.js', 'Gruntfile.js' ],
|
||||
tasks: 'dev'
|
||||
},
|
||||
connect: {
|
||||
dev: {
|
||||
options: {
|
||||
port: 9999,
|
||||
keepalive: true
|
||||
}
|
||||
}
|
||||
},
|
||||
copy: {
|
||||
minor: {
|
||||
files: [
|
||||
@@ -118,9 +136,183 @@ module.exports = function(grunt) {
|
||||
'build/files/video-js.css': 'src/css/video-js.less'
|
||||
}
|
||||
}
|
||||
},
|
||||
karma: {
|
||||
// this config file applies to all following configs except if overwritten
|
||||
options: {
|
||||
configFile: 'test/karma.conf.js'
|
||||
},
|
||||
|
||||
// this only runs on PRs from the mainrepo on saucelabs
|
||||
saucelabs: {
|
||||
browsers: ['chrome_sl']
|
||||
},
|
||||
chrome_sl: {
|
||||
browsers: ['chrome_sl']
|
||||
},
|
||||
firefox_sl: {
|
||||
browsers: ['firefox_sl']
|
||||
},
|
||||
safari_sl: {
|
||||
browsers: ['safari_sl']
|
||||
},
|
||||
ipad_sl: {
|
||||
browsers: ['ipad_sl']
|
||||
},
|
||||
android_sl: {
|
||||
browsers: ['android_sl']
|
||||
},
|
||||
ie_sl: {
|
||||
browsers: ['ie_sl']
|
||||
},
|
||||
|
||||
// these are run locally on local browsers
|
||||
dev: {
|
||||
browsers: ['Chrome', 'Firefox', 'Safari']
|
||||
},
|
||||
chromecanary: {
|
||||
browsers: ['ChromeCanary']
|
||||
},
|
||||
chrome: {
|
||||
browsers: ['Chrome']
|
||||
},
|
||||
firefox: {
|
||||
browsers: ['Firefox']
|
||||
},
|
||||
safari: {
|
||||
browsers: ['Safari']
|
||||
},
|
||||
ie: {
|
||||
browsers: ['IE']
|
||||
},
|
||||
phantomjs: {
|
||||
browsers: ['PhantomJS']
|
||||
},
|
||||
|
||||
// This is all the minified tests run locally on local browsers
|
||||
minified_dev: {
|
||||
browsers: ['Chrome', 'Firefox', 'Safari'],
|
||||
configFile: 'test/karma.minified.conf.js'
|
||||
},
|
||||
minified_chromecanary: {
|
||||
browsers: ['ChromeCanary'],
|
||||
configFile: 'test/karma.minified.conf.js'
|
||||
},
|
||||
minified_chrome: {
|
||||
browsers: ['Chrome'],
|
||||
configFile: 'test/karma.minified.conf.js'
|
||||
},
|
||||
minified_firefox: {
|
||||
browsers: ['Firefox'],
|
||||
configFile: 'test/karma.minified.conf.js'
|
||||
},
|
||||
minified_safari: {
|
||||
browsers: ['Safari'],
|
||||
configFile: 'test/karma.minified.conf.js'
|
||||
},
|
||||
minified_ie: {
|
||||
browsers: ['IE'],
|
||||
configFile: 'test/karma.minified.conf.js'
|
||||
},
|
||||
minified_phantomjs: {
|
||||
browsers: ['PhantomJS'],
|
||||
configFile: 'test/karma.minified.conf.js'
|
||||
},
|
||||
|
||||
// This is all the minified api tests run locally on local browsers
|
||||
minified_api_dev: {
|
||||
browsers: ['Chrome', 'Firefox', 'Safari'],
|
||||
configFile: 'test/karma.minified.api.conf.js'
|
||||
},
|
||||
minified_api_chromecanary: {
|
||||
browsers: ['ChromeCanary'],
|
||||
configFile: 'test/karma.minified.api.conf.js'
|
||||
},
|
||||
minified_api_chrome: {
|
||||
browsers: ['Chrome'],
|
||||
configFile: 'test/karma.minified.api.conf.js'
|
||||
},
|
||||
minified_api_firefox: {
|
||||
browsers: ['Firefox'],
|
||||
configFile: 'test/karma.minified.api.conf.js'
|
||||
},
|
||||
minified_api_safari: {
|
||||
browsers: ['Safari'],
|
||||
configFile: 'test/karma.minified.api.conf.js'
|
||||
},
|
||||
minified_api_ie: {
|
||||
browsers: ['IE'],
|
||||
configFile: 'test/karma.minified.api.conf.js'
|
||||
},
|
||||
minified_api_phantomjs: {
|
||||
browsers: ['PhantomJS'],
|
||||
configFile: 'test/karma.minified.api.conf.js'
|
||||
}
|
||||
},
|
||||
vjsdocs: {
|
||||
all: {
|
||||
src: sourceFiles,
|
||||
dest: 'docs/api',
|
||||
options: {
|
||||
baseURL: 'https://github.com/videojs/video.js/blob/master/'
|
||||
}
|
||||
}
|
||||
},
|
||||
zip: {
|
||||
dist: {
|
||||
router: function (filepath) {
|
||||
var path = require('path');
|
||||
return path.relative('dist', filepath);
|
||||
},
|
||||
// compression: 'DEFLATE',
|
||||
src: ['dist/video-js/**/*'],
|
||||
dest: 'dist/video-js-' + version.full + '.zip'
|
||||
}
|
||||
},
|
||||
usebanner: {
|
||||
dist: {
|
||||
options: {
|
||||
position: 'top',
|
||||
banner: '/*! Video.js v' + version.full + ' <%= pkg.copyright %> */ ',
|
||||
linebreak: true
|
||||
},
|
||||
files: {
|
||||
src: [ 'build/files/minified.video.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
version: {
|
||||
options: {
|
||||
pkg: 'package.json'
|
||||
},
|
||||
major: {
|
||||
options: {
|
||||
release: 'major'
|
||||
},
|
||||
src: ['package.json', 'bower.json', 'component.json']
|
||||
},
|
||||
minor: {
|
||||
options: {
|
||||
release: 'minor'
|
||||
},
|
||||
src: ['package.json', 'bower.json', 'component.json']
|
||||
},
|
||||
patch: {
|
||||
options: {
|
||||
release: 'patch'
|
||||
},
|
||||
src: ['package.json', 'bower.json', 'component.json']
|
||||
}
|
||||
},
|
||||
tagrelease: {
|
||||
file: 'package.json',
|
||||
commit: true,
|
||||
message: 'Release %version%',
|
||||
prefix: 'v'
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
@@ -130,24 +322,128 @@ module.exports = function(grunt) {
|
||||
grunt.loadNpmTasks('grunt-contrib-less');
|
||||
grunt.loadNpmTasks('grunt-s3');
|
||||
grunt.loadNpmTasks('contribflow');
|
||||
grunt.loadNpmTasks('grunt-karma');
|
||||
grunt.loadNpmTasks('videojs-doc-generator');
|
||||
grunt.loadNpmTasks('grunt-zip');
|
||||
grunt.loadNpmTasks('grunt-banner');
|
||||
grunt.loadNpmTasks('grunt-version');
|
||||
grunt.loadNpmTasks('grunt-tagrelease');
|
||||
grunt.loadNpmTasks('chg');
|
||||
|
||||
// grunt.loadTasks('./docs/tasks/');
|
||||
// grunt.loadTasks('../videojs-doc-generator/tasks/');
|
||||
|
||||
grunt.registerTask('pretask', ['jshint', 'less', 'lang', 'build', 'minify', 'usebanner']);
|
||||
// Default task.
|
||||
grunt.registerTask('default', ['jshint', 'less', 'build', 'minify', 'dist']);
|
||||
grunt.registerTask('default', ['pretask', 'dist']);
|
||||
// Development watch task
|
||||
grunt.registerTask('dev', ['jshint', 'less', 'build', 'qunit:source']);
|
||||
grunt.registerTask('test', ['jshint', 'less', 'build', 'minify', 'qunit']);
|
||||
grunt.registerTask('dev', ['jshint', 'less', 'lang', 'build', 'qunit:source']);
|
||||
grunt.registerTask('test-qunit', ['pretask', 'qunit']);
|
||||
|
||||
// The test task will run `karma:saucelabs` when running in travis,
|
||||
// when running via a PR from a fork, it'll run qunit tests in phantom using
|
||||
// karma otherwise, it'll run the tests in chrome via karma
|
||||
// You can specify which browsers to build with by using grunt-style arguments
|
||||
// or separating them with a comma:
|
||||
// grunt test:chrome:firefox # grunt-style
|
||||
// grunt test:chrome,firefox # comma-separated
|
||||
grunt.registerTask('test', function() {
|
||||
var tasks = this.args,
|
||||
tasksMinified,
|
||||
tasksMinifiedApi;
|
||||
|
||||
grunt.task.run(['pretask']);
|
||||
|
||||
if (process.env.TRAVIS_PULL_REQUEST !== 'false') {
|
||||
grunt.task.run(['karma:phantomjs', 'karma:minified_phantomjs', 'karma:minified_api_phantomjs']);
|
||||
} else if (process.env.TRAVIS) {
|
||||
grunt.task.run(['karma:phantomjs', 'karma:minified_phantomjs', 'karma:minified_api_phantomjs']);
|
||||
//Disabling saucelabs until we figure out how to make it run reliably.
|
||||
//grunt.task.run([
|
||||
//'karma:chrome_sl',
|
||||
//'karma:firefox_sl',
|
||||
//'karma:safari_sl',
|
||||
//'karma:ipad_sl',
|
||||
//'karma:android_sl',
|
||||
//'karma:ie_sl'
|
||||
//]);
|
||||
} else {
|
||||
// if we aren't running this in a CI, but running it manually, we can
|
||||
// supply arguments to this task. These arguments are either colon (`:`)
|
||||
// separated which is the default grunt separator for arguments, or they
|
||||
// are comma (`,`) separated to make it easier.
|
||||
// The arguments are the names of which browsers you want. It'll then
|
||||
// make sure you have the `minified` and `minified_api` for those browsers
|
||||
// as well.
|
||||
if (tasks.length === 0) {
|
||||
tasks.push('chrome');
|
||||
}
|
||||
if (tasks.length === 1) {
|
||||
tasks = tasks[0].split(',');
|
||||
}
|
||||
|
||||
tasksMinified = tasks.slice();
|
||||
tasksMinifiedApi = tasks.slice();
|
||||
|
||||
tasksMinified = tasksMinified.map(function(task) {
|
||||
return 'minified_' + task;
|
||||
});
|
||||
|
||||
tasksMinifiedApi = tasksMinifiedApi.map(function(task) {
|
||||
return 'minified_api_' + task;
|
||||
});
|
||||
|
||||
tasks = tasks.concat(tasksMinified).concat(tasksMinifiedApi);
|
||||
tasks = tasks.map(function(task) {
|
||||
return 'karma:' + task;
|
||||
});
|
||||
|
||||
grunt.task.run(tasks);
|
||||
}
|
||||
});
|
||||
|
||||
grunt.registerTask('saucelabs', function() {
|
||||
var done = this.async();
|
||||
|
||||
if (this.args[0] == 'connect') {
|
||||
exec('curl https://gist.githubusercontent.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash',
|
||||
function(error, stdout, stderr) {
|
||||
if (error) {
|
||||
grunt.log.error(error);
|
||||
return done();
|
||||
}
|
||||
|
||||
grunt.verbose.error(stderr.toString());
|
||||
grunt.verbose.writeln(stdout.toString());
|
||||
grunt.task.run(['karma:saucelabs']);
|
||||
done();
|
||||
});
|
||||
} else {
|
||||
grunt.task.run(['karma:saucelabs']);
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
var fs = require('fs'),
|
||||
gzip = require('zlib').gzip;
|
||||
|
||||
grunt.registerMultiTask('build', 'Building Source', function(){
|
||||
/*jshint undef:false, evil:true */
|
||||
grunt.registerMultiTask('lang', 'Building Language Support', function() {
|
||||
var combined = '';
|
||||
|
||||
// Loading predefined source order from source-loader.js
|
||||
// Trust me, this is the easist way to do it so far.
|
||||
var blockSourceLoading = true;
|
||||
var sourceFiles; // Needed to satisfy jshint
|
||||
eval(grunt.file.read('./build/source-loader.js'));
|
||||
grunt.log.writeln('Building Language Support');
|
||||
|
||||
// Create a combined languages file
|
||||
this.files.forEach(function(file) {
|
||||
file.src.forEach(function(src){
|
||||
var code = src.replace('lang/', '').replace('.json', '');
|
||||
combined += 'videojs.options[\'languages\'][\''+code+'\'] = '+ grunt.file.read(src).trim() + ';\n';
|
||||
});
|
||||
});
|
||||
|
||||
grunt.file.write('build/files/combined.languages.js', combined);
|
||||
});
|
||||
|
||||
grunt.registerMultiTask('build', 'Building Source', function(){
|
||||
|
||||
// Fix windows file path delimiter issue
|
||||
var i = sourceFiles.length;
|
||||
@@ -162,11 +458,15 @@ module.exports = function(grunt) {
|
||||
});
|
||||
// Replace CDN version ref in js. Use major/minor version.
|
||||
combined = combined.replace(/GENERATED_CDN_VSN/g, version.majorMinor);
|
||||
|
||||
// Add Combined Langauges
|
||||
// combined += grunt.file.read('build/files/combined.languages.js');
|
||||
|
||||
grunt.file.write('build/files/combined.video.js', combined);
|
||||
|
||||
// Copy over other files
|
||||
// grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png');
|
||||
grunt.file.copy('src/swf/video-js.swf', 'build/files/video-js.swf');
|
||||
grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'build/files/video-js.swf');
|
||||
|
||||
// Inject version number into css file
|
||||
var css = grunt.file.read('build/files/video-js.css');
|
||||
@@ -210,7 +510,8 @@ module.exports = function(grunt) {
|
||||
+ ' --js_output_file=' + dest
|
||||
+ ' --create_source_map ' + dest + '.map --source_map_format=V3'
|
||||
+ ' --jscomp_warning=checkTypes --warning_level=VERBOSE'
|
||||
+ ' --output_wrapper "/*! Video.js v' + version.full + ' ' + pkg.copyright + ' */ (function() {%output%})();//@ sourceMappingURL=video.js.map"';
|
||||
+ ' --output_wrapper "(function() {%output%})();"';
|
||||
//@ sourceMappingURL=video.js.map
|
||||
|
||||
// Add each js file
|
||||
grunt.file.expand(filePatterns).forEach(function(file){
|
||||
@@ -238,9 +539,7 @@ module.exports = function(grunt) {
|
||||
});
|
||||
});
|
||||
|
||||
grunt.registerTask('dist', 'Creating distribution', function(){
|
||||
var exec = require('child_process').exec;
|
||||
var done = this.async();
|
||||
grunt.registerTask('dist-copy', 'Assembling distribution', function(){
|
||||
var css, jsmin, jsdev, cdnjs;
|
||||
|
||||
// Manually copy each source file
|
||||
@@ -248,9 +547,11 @@ module.exports = function(grunt) {
|
||||
grunt.file.copy('build/files/combined.video.js', 'dist/video-js/video.dev.js');
|
||||
grunt.file.copy('build/files/video-js.css', 'dist/video-js/video-js.css');
|
||||
grunt.file.copy('build/files/video-js.min.css', 'dist/video-js/video-js.min.css');
|
||||
grunt.file.copy('build/files/video-js.swf', 'dist/video-js/video-js.swf');
|
||||
grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'dist/video-js/video-js.swf');
|
||||
grunt.file.copy('build/demo-files/demo.html', 'dist/video-js/demo.html');
|
||||
grunt.file.copy('build/demo-files/demo.captions.vtt', 'dist/video-js/demo.captions.vtt');
|
||||
grunt.file.copy('src/css/video-js.less', 'dist/video-js/video-js.less');
|
||||
|
||||
|
||||
// Copy over font files
|
||||
grunt.file.recurse('build/files/font', function(absdir, rootdir, subdir, filename) {
|
||||
@@ -260,15 +561,22 @@ module.exports = function(grunt) {
|
||||
}
|
||||
});
|
||||
|
||||
// ds_store files sometime find their way in
|
||||
if (grunt.file.exists('dist/video-js/.DS_Store')) {
|
||||
grunt.file['delete']('dist/video-js/.DS_Store');
|
||||
}
|
||||
|
||||
// CDN version uses already hosted font files
|
||||
// Minified version only, doesn't need demo files
|
||||
grunt.file.copy('build/files/minified.video.js', 'dist/cdn/video.js');
|
||||
grunt.file.copy('build/files/video-js.min.css', 'dist/cdn/video-js.css');
|
||||
grunt.file.copy('build/files/video-js.swf', 'dist/cdn/video-js.swf');
|
||||
grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'dist/cdn/video-js.swf');
|
||||
grunt.file.copy('build/demo-files/demo.captions.vtt', 'dist/cdn/demo.captions.vtt');
|
||||
grunt.file.copy('build/demo-files/demo.html', 'dist/cdn/demo.html');
|
||||
|
||||
// Replace font urls with CDN versions
|
||||
css = grunt.file.read('dist/cdn/video-js.css');
|
||||
css = css.replace(/font\//g, '../f/1/');
|
||||
css = css.replace(/font\//g, '../f/3/');
|
||||
grunt.file.write('dist/cdn/video-js.css', css);
|
||||
|
||||
// Add CDN-specfic JS
|
||||
@@ -276,20 +584,101 @@ module.exports = function(grunt) {
|
||||
// GA Tracking Pixel (manually building the pixel URL)
|
||||
cdnjs = uglify.minify('src/js/cdn.js').code.replace('v0.0.0', 'v'+version.full);
|
||||
grunt.file.write('dist/cdn/video.js', jsmin + cdnjs);
|
||||
});
|
||||
|
||||
// Zip up into video-js-VERSION.zip
|
||||
exec('cd dist && zip -r video-js-'+version.full+'.zip video-js && cd ..', { maxBuffer: 500*1024 }, function(err, stdout, stderr){
|
||||
grunt.registerTask('cdn-links', 'Update the version of CDN links in docs', function(){
|
||||
var doc = grunt.file.read('docs/guides/setup.md');
|
||||
var version = pkg.version;
|
||||
|
||||
if (err) {
|
||||
grunt.warn(err);
|
||||
done(false);
|
||||
// remove the patch version to point to the latest patch
|
||||
version = version.replace(/(\d\.\d)\.\d/, '$1');
|
||||
|
||||
// update the version in http://vjs.zencdn.net/4.3/video.js
|
||||
doc = doc.replace(/(\/\/vjs\.zencdn\.net\/)\d\.\d(\.\d)?/g, '$1'+version);
|
||||
grunt.file.write('docs/guides/setup.md', doc);
|
||||
});
|
||||
|
||||
grunt.registerTask('dist', 'Creating distribution', ['dist-copy', 'zip:dist']);
|
||||
|
||||
grunt.registerTask('next-issue', 'Get the next issue that needs a response', function(){
|
||||
var done = this.async();
|
||||
var GitHubApi = require('github');
|
||||
var open = require('open');
|
||||
|
||||
var github = new GitHubApi({
|
||||
// required
|
||||
version: '3.0.0',
|
||||
// optional
|
||||
debug: true,
|
||||
protocol: 'https',
|
||||
// host: 'github.my-GHE-enabled-company.com',
|
||||
// pathPrefix: '/api/v3', // for some GHEs
|
||||
timeout: 5000
|
||||
});
|
||||
|
||||
github.issues.repoIssues({
|
||||
// optional:
|
||||
// headers: {
|
||||
// 'cookie': 'blahblah'
|
||||
// },
|
||||
user: 'videojs',
|
||||
repo: 'video.js',
|
||||
sort: 'updated',
|
||||
direction: 'asc',
|
||||
state: 'open',
|
||||
per_page: 100
|
||||
}, function(err, res) {
|
||||
var issueToOpen;
|
||||
var usersWithWrite = ['heff', 'mmcc'];
|
||||
var categoryLabels = ['enhancement', 'bug', 'question', 'feature'];
|
||||
|
||||
console.log('Number of issues: '+res.length);
|
||||
|
||||
// TODO: Find the best way to exclude an issue where a question has been asked of the
|
||||
// issue owner/submitter that hasn't been answerd yet.
|
||||
// A stupid simple first step would be to check for the needs: more info label
|
||||
// and exactly one comment (the question)
|
||||
|
||||
// find issues that need categorizing, no category labels
|
||||
res.some(function(issue){
|
||||
if (issue.labels.length === 0) {
|
||||
return issueToOpen = issue; // break
|
||||
}
|
||||
// look for category labels
|
||||
var categorized = issue.labels.some(function(label){
|
||||
return categoryLabels.indexOf(label.name) >= 0;
|
||||
});
|
||||
if (!categorized) {
|
||||
return issueToOpen = issue; // break
|
||||
}
|
||||
});
|
||||
if (issueToOpen) {
|
||||
open(issueToOpen.html_url);
|
||||
return done();
|
||||
}
|
||||
|
||||
if (stdout) {
|
||||
grunt.log.writeln(stdout);
|
||||
// find issues that need confirming or answering
|
||||
res.some(function(issue){
|
||||
// look for confirmed label
|
||||
var confirmed = issue.labels.some(function(label){
|
||||
return label.name === 'confirmed';
|
||||
});
|
||||
// Was exluding questions, but that might leave a lot of people hanging
|
||||
// var question = issue.labels.some(function(label){
|
||||
// return label.name === 'question';
|
||||
// });
|
||||
if (!confirmed) { // && !question
|
||||
return issueToOpen = issue; // break
|
||||
}
|
||||
});
|
||||
if (issueToOpen) {
|
||||
open(issueToOpen.html_url);
|
||||
return done();
|
||||
}
|
||||
|
||||
grunt.log.writeln('No next issue found');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
+2
-3
@@ -1,5 +1,4 @@
|
||||
|
||||
# [Video.js - HTML5 Video Player](http://videojs.com) [](https://travis-ci.org/zencoder/video-js)
|
||||
# [Video.js - HTML5 Video Player](http://videojs.com) [](https://travis-ci.org/videojs/video.js)
|
||||
|
||||
> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins](https://github.com/videojs/video.js/wiki/Plugins)). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 50,000 websites.
|
||||
|
||||
@@ -15,4 +14,4 @@ To build your own custom version read the section on [contributing code](CONTRIB
|
||||
|
||||
Video.js is licensed under the Apache License, Version 2.0. [View the license file](LICENSE)
|
||||
|
||||
Copyright 2013 Brightcove, Inc.
|
||||
Copyright 2014 Brightcove, Inc.
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"version": "4.7.1",
|
||||
"main": [
|
||||
"dist/video-js/video.js",
|
||||
"dist/video-js/video-js.css"
|
||||
],
|
||||
"keywords": [
|
||||
"videojs",
|
||||
"html5",
|
||||
"flash",
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests",
|
||||
"build"
|
||||
]
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
[
|
||||
{
|
||||
"os": "win",
|
||||
"browser": "chrome",
|
||||
"version": "27.0"
|
||||
},
|
||||
{
|
||||
"os": "win",
|
||||
"browser": "firefox",
|
||||
"version": "20.0"
|
||||
},
|
||||
{
|
||||
"os": "win",
|
||||
"browser": "ie",
|
||||
"version": "9.0"
|
||||
},
|
||||
{
|
||||
"os": "win",
|
||||
"browser": "ie",
|
||||
"version": "10.0"
|
||||
},
|
||||
{
|
||||
"os": "ios",
|
||||
"device": "iPhone 5",
|
||||
"version": "6.0"
|
||||
},
|
||||
{
|
||||
"os": "ios",
|
||||
"device": "iPad 3rd (6.0)",
|
||||
"version": "6.0"
|
||||
},
|
||||
{
|
||||
"os": "android",
|
||||
"device": "Samsung Galaxy Tab 2 10.1",
|
||||
"version": "4.0"
|
||||
}
|
||||
]
|
||||
@@ -394,7 +394,7 @@ goog.global.CLOSURE_BASE_PATH;
|
||||
* the deps are written.
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
goog.global.CLOSURE_NO_DEPS = true;
|
||||
// goog.global.CLOSURE_NO_DEPS = true;
|
||||
// goog.global.CLOSURE_NO_DEPS;
|
||||
|
||||
|
||||
|
||||
@@ -24,6 +24,8 @@
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
|
||||
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||
</video>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -19,12 +19,16 @@ var sourceFiles = [
|
||||
"src/js/core-object.js",
|
||||
"src/js/events.js",
|
||||
"src/js/lib.js",
|
||||
"src/js/util.js",
|
||||
"src/js/component.js",
|
||||
"src/js/button.js",
|
||||
"src/js/slider.js",
|
||||
"src/js/menu.js",
|
||||
"src/js/media-error.js",
|
||||
"src/js/fullscreen-api.js",
|
||||
"src/js/player.js",
|
||||
"src/js/control-bar/control-bar.js",
|
||||
"src/js/control-bar/live-display.js",
|
||||
"src/js/control-bar/play-toggle.js",
|
||||
"src/js/control-bar/time-display.js",
|
||||
"src/js/control-bar/fullscreen-toggle.js",
|
||||
@@ -32,9 +36,11 @@ var sourceFiles = [
|
||||
"src/js/control-bar/volume-control.js",
|
||||
"src/js/control-bar/mute-toggle.js",
|
||||
"src/js/control-bar/volume-menu-button.js",
|
||||
"src/js/control-bar/playback-rate-menu-button.js",
|
||||
"src/js/poster.js",
|
||||
"src/js/loading-spinner.js",
|
||||
"src/js/big-play-button.js",
|
||||
"src/js/error-display.js",
|
||||
"src/js/media/media.js",
|
||||
"src/js/media/html5.js",
|
||||
"src/js/media/flash.js",
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"version": "4.7.1",
|
||||
"keywords": [
|
||||
"videojs",
|
||||
"html5",
|
||||
"flash",
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"scripts": ["dist/video-js/video.dev.js"],
|
||||
"styles": ["dist/video-js/video-js.css"],
|
||||
"files": ["dist/video-js/video-js.swf"],
|
||||
"fonts": [
|
||||
"dist/video-js/font/vjs.eot",
|
||||
"dist/video-js/font/vjs.svg",
|
||||
"dist/video-js/font/vjs.ttf",
|
||||
"dist/video-js/font/vjs.woff"
|
||||
],
|
||||
"main": "dist/video-js/video.dev.js"
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "videojs/video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"type": "library",
|
||||
"keywords": [
|
||||
"videojs",
|
||||
"html5",
|
||||
"flash",
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"homepage": "http://www.videojs.com/",
|
||||
"license": "Apache-2.0"
|
||||
}
|
||||
+268
-5
@@ -1,7 +1,270 @@
|
||||
{
|
||||
"owner": "videojs",
|
||||
"project": "video.js",
|
||||
"developmentBranch": "master",
|
||||
"releaseBranch": "stable",
|
||||
"remote": "origin"
|
||||
"project": {
|
||||
"owner": "videojs",
|
||||
"name": "video.js",
|
||||
"requirements": [
|
||||
{
|
||||
"name": "git",
|
||||
"info": "http://git-scm.com"
|
||||
},
|
||||
{
|
||||
"name": "node.js",
|
||||
"info": "http://nodejs.org"
|
||||
}
|
||||
],
|
||||
"urls": {
|
||||
"git": "https://github.com/videojs/video.js.git",
|
||||
"repo_api": "https://api.github.com/repos/videojs/video.js",
|
||||
"repo_ui": "https://github.com/videojs/video.js"
|
||||
},
|
||||
"branches": {
|
||||
"development": "master",
|
||||
"release": "stable"
|
||||
}
|
||||
},
|
||||
|
||||
"install": [
|
||||
[ "git fetch origin", "Get all git branches" ],
|
||||
[ "git checkout -b stable origin/stable", "Create the stable branch for patches" ],
|
||||
[ "git remote add upstream {{project.urls.git}}", "Add the upstream project as a remote for pulling changes" ],
|
||||
[ "git fetch upstream", "Get all upstream branches and changes" ],
|
||||
{ "include": "update all" }
|
||||
],
|
||||
|
||||
"update": {
|
||||
"all": [
|
||||
{ "include": "update stable" },
|
||||
{ "include": "update master" },
|
||||
[ "npm install", "Download dependencies"],
|
||||
[ "grunt", "Build the library" ]
|
||||
],
|
||||
"master": [
|
||||
[ "git checkout master", "Switch to the development branch" ],
|
||||
[ "git pull upstream master", "Get any changes to master in the main project" ],
|
||||
[ "git push origin master", "Push any changes to your copy of the main project" ]
|
||||
],
|
||||
"stable": [
|
||||
[ "git checkout stable", "Switch to the release branch" ],
|
||||
[ "git pull upstream stable", "Get any changes to stable in the main project" ],
|
||||
[ "git push origin stable", "Push any changes to your copy of the main project" ]
|
||||
]
|
||||
},
|
||||
|
||||
"test": [ "grunt test" ],
|
||||
"watch": [ "grunt watch" ],
|
||||
"server": [ "grunt connect" ],
|
||||
|
||||
"feature": {
|
||||
"desc": "Create a new feature or general enhancement",
|
||||
"baseBranch": "master",
|
||||
"start": {
|
||||
"desc": "Start a new feature",
|
||||
"steps": [
|
||||
{ "include": "update {{project.branches.development}}" },
|
||||
{ "include": "branch start" }
|
||||
]
|
||||
},
|
||||
"submit": {
|
||||
"desc": "Submit a pull request for a feature when it's finished",
|
||||
"steps": [
|
||||
{ "include": "branch submit" }
|
||||
]
|
||||
},
|
||||
"delete": {
|
||||
"desc": "Delete the current feature branch",
|
||||
"steps": [
|
||||
{ "include": "branch delete" }
|
||||
]
|
||||
},
|
||||
"accept": {
|
||||
"steps": [
|
||||
{ "include": "update {{project.branches.development}}" },
|
||||
{ "include": "pull_request accept" }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
"patch": {
|
||||
"desc": "Create an urgent fix for the latest stable version",
|
||||
"baseBranch": "stable",
|
||||
"new": {
|
||||
"alias": "start",
|
||||
"desc": "Start a new patch",
|
||||
"finished": "Make your changes and then run `contrib patch submit`",
|
||||
"steps": [
|
||||
{ "include": "update {{project.branches.release}}" },
|
||||
{ "include": "branch start" }
|
||||
]
|
||||
},
|
||||
"submit": {
|
||||
"desc": "Submit a pull request for a patch when it's finished",
|
||||
"steps": [
|
||||
{ "include": "branch submit" }
|
||||
]
|
||||
},
|
||||
"delete": {
|
||||
"desc": "Delete the current patch branch",
|
||||
"steps": [
|
||||
{ "include": "branch delete" }
|
||||
]
|
||||
},
|
||||
"accept": {
|
||||
"steps": [
|
||||
{ "include": "update {{project.branches.release}}" },
|
||||
{ "include": "pull_request accept" }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
"report": {
|
||||
"desc": "Submit a bug report",
|
||||
"steps": [
|
||||
{ "prompt": "text", "desc": "Create a title that is descriptive of the problem", "id": "title" },
|
||||
{ "prompt": "text", "desc": "What did you do? (steps to reproduce)", "id": "reproduce" },
|
||||
{ "prompt": "text", "desc": "What did you expect to happen?", "id": "expected" },
|
||||
{ "prompt": "text", "desc": "What actually happened?", "id": "actual" },
|
||||
{ "prompt": "text", "desc": "What version of video.js are you using?", "id": "version" },
|
||||
{ "prompt": "text", "desc": "Are you using any video.js plugins?", "id": "plugins" },
|
||||
{ "prompt": "text", "desc": "What browsers/platforms did you experience this in (e.g. Win 7, IE10; Android 4, Chrome;)?", "id": "browsers" },
|
||||
{ "prompt": "text", "desc": "Is there a URL to a live example, or a jsbin (e.g. http://jsbin.com/axedog/9999/edit)?", "id": "example" },
|
||||
{ "prompt": "text", "desc": "Are there any other details you'd like to provide?", "id": "details" },
|
||||
{ "open": "{{project.urls.repo_ui}}/issues/new?title={{title}}&body=**Steps to reproduce:**\n> {{reproduce}}\n\n**What was expected:**\n> {{expected}}\n\n**What Happened:**\n> {{actual}}\n\n**Video.js Version:**\n> {{version}}\n\n**Plugins:**\n> {{plugins}}\n\n**Browsers experienced on:**\n> {{browsers}}\n\n**Example:**\n> {{example}}\n\n**Other details:**\n> {{details}}" }
|
||||
],
|
||||
"finished": "Thanks for submitting a bug report! One of our contributors will address it as soon as possible."
|
||||
},
|
||||
|
||||
"request": {
|
||||
"desc": "Submit a feature/enhancement request",
|
||||
"steps": [
|
||||
{ "prompt": "text", "desc": "Create a title that is descriptive of the enhancement", "id": "title" },
|
||||
{ "prompt": "text", "desc": "Describe the feature/enhancement (be as detailed as possible so it's clear who, why, and how it would be used)", "id": "describe" },
|
||||
{ "prompt": "text", "desc": "Is there any existing documentation or related specifications?", "id": "docs" },
|
||||
{ "prompt": "text", "desc": "Are there any existing examples?", "id": "examples" },
|
||||
{ "confirm": "You will be redirected to Github where you can submit this issue, OK?" },
|
||||
{ "open": "{{project.urls.repo_ui}}/issues/new?title={{ title }}&body=**Describe the feature/enhancement:**\n> {{ describe }}\n\n**Existing docs/specs:**\n> {{ docs }}\n\n**Existing examples:**\n> {{ examples }}" }
|
||||
],
|
||||
"finished": "Thanks for submitting a feature request! One of our contributors will address it as soon as possible."
|
||||
},
|
||||
|
||||
"release": {
|
||||
"desc": "Create and publish a release",
|
||||
"steps": [
|
||||
[ "git diff --exit-code", "Ensure there's no unadded changes" ],
|
||||
[ "git diff --cached --exit-code", "Ensure there's no added changes" ],
|
||||
{ "confirm": "Have the changes been merged into the release branch (stable)?" },
|
||||
{
|
||||
"id": "type",
|
||||
"desc": "Provide the release type",
|
||||
"prompt": {
|
||||
"message": "release type",
|
||||
"default": "patch",
|
||||
"type": "text"
|
||||
}
|
||||
},
|
||||
[ "git checkout stable", "Checkout the release branch" ],
|
||||
[ "git pull upstream stable", "Update the release branch" ],
|
||||
[ "grunt test", "Run tests" ],
|
||||
[ "grunt chg-release:{{ type }}", "Update the changelog with the new release" ],
|
||||
[ "grunt version:{{ type }}", "Bump package versions" ],
|
||||
[ "grunt", "Build the release" ],
|
||||
[ "git add dist/video-js --force", "Add the (otherwise ignored) release files" ],
|
||||
[ "grunt vjsdocs", "Rebuild the docs" ],
|
||||
[ "grunt cdn-links", "Update the cdn urls in the docs" ],
|
||||
[ "grunt tagrelease", "Tag the release" ],
|
||||
[ "git push upstream stable", "Push changes to the remote" ],
|
||||
[ "git push upstream --tags", "Push tags to the remote" ],
|
||||
[ "npm publish", "Publish to npm" ],
|
||||
[ "git checkout master", "Checkout the development branch" ],
|
||||
[ "git pull upstream master", "Update the development branch" ],
|
||||
[ "git merge stable", "Merge changes" ],
|
||||
[ "grunt clean:dist", "Remove built dist files to re-ignore them" ],
|
||||
[ "git add -u", "Add the changes for the removed dist files" ],
|
||||
[ "git commit -m 'Removed dist files'", "Commit the removed dist files" ],
|
||||
[ "git push upstream master", "Push development branch changes" ]
|
||||
]
|
||||
},
|
||||
|
||||
"branch": {
|
||||
"private": true,
|
||||
"start": {
|
||||
"steps": [
|
||||
{ "prompt": "Name the branch", "id": "name" },
|
||||
[ "git checkout -b {{name}} {{baseBranch}}", "Create the branch" ],
|
||||
[ "git push -u origin {{name}}", "Push the branch to your remote copy of the project" ]
|
||||
]
|
||||
},
|
||||
"submit": {
|
||||
"desc": "Submit a pull request for when the change is finished",
|
||||
"steps": [
|
||||
{ "exec": "git diff --exit-code", "desc": "Test for unadded changes {{ args.[0] }}", "fail": "Make sure all changes have been added and committed, or stashed, before switching branches" },
|
||||
{ "exec": "git diff --cached --exit-code", "desc": "Test for uncommitted changes", "fail": "Make sure all changes have been added and committed, or stashed, before switching branches" },
|
||||
{ "include": "test" },
|
||||
{ "exec": "git rev-parse --abbrev-ref HEAD", "desc": "Get the current branch", "id": "branch" },
|
||||
{ "confirm": "Are you sure {{branch}} is the branch you want to submit?" },
|
||||
{ "prompt": "Which github user or org are you submitting from?", "id": "user" },
|
||||
{ "open": "{{project.urls.repo_ui}}/compare/videojs:{{baseBranch}}...{{user}}:{{branch}}", "desc": "Open the github pull request page" }
|
||||
]
|
||||
},
|
||||
"delete": {
|
||||
"desc": "Delete the current branch",
|
||||
"steps": [
|
||||
{ "exec": "git rev-parse --abbrev-ref HEAD", "desc": "Get the current branch name", "id": "name" },
|
||||
{ "confirm": "Are you sure '{{name}}' is the branch you want to delete?" },
|
||||
{ "exec": "git branch -D {{name}}", "desc": "Delete the local copy of the branch" },
|
||||
{ "exec": "git push origin :{{name}}", "desc": "Delete the remote copy of the branch" }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
"pull_request": {
|
||||
"private": true,
|
||||
|
||||
"review": {
|
||||
"steps": [
|
||||
{ "prompt": "What is the the pull request number?", "id": "prNum" },
|
||||
{ "get": "{{project.urls.repo_api}}/pulls/{{prNum}}", "desc": "Get the PR information", "id": "pr" },
|
||||
[ "git fetch {{pr.head.repo.ssh_url}} {{pr.head.ref}}", "Get the pull request changes but don't merge them" ],
|
||||
[ "git merge-base master FETCH_HEAD", "Get the common ancestor commit", "base" ],
|
||||
[ "git checkout -b review-{{pr.user.login}}-{{pr.head.ref}} {{base}}", "Create a new local branch for the pull request that has a base of the common commit" ],
|
||||
[ "git merge FETCH_HEAD", "Merge in the pull request changes" ],
|
||||
[ "grunt test", "Build and run tests" ]
|
||||
]
|
||||
},
|
||||
|
||||
"modify": {
|
||||
"desc": "Submit a modification to an existing pull request",
|
||||
"steps": [
|
||||
{ "exec": "git diff --exit-code", "desc": "Test for unadded changes", "fail": "Make sure all changes have been added and committed before submitting changes" },
|
||||
{ "exec": "git diff --cached --exit-code", "desc": "Test for uncommitted changes", "fail": "Make sure all changes have been committed before submitting changes" },
|
||||
{ "include": "test" },
|
||||
{ "exec": "git rev-parse --abbrev-ref HEAD", "desc": "Get the current branch", "id": "branch" },
|
||||
{ "confirm": "Are you sure {{branch}} is the branch you want to submit?" },
|
||||
{ "prompt": "Which github user or org are you submitting from?", "id": "user" },
|
||||
{ "prompt": "What is the the pull request number?", "id": "prNum" },
|
||||
{ "get": "{{project.urls.repo_api}}/pulls/{{prNum}}", "desc": "Get the PR information", "id": "pr" },
|
||||
{ "exec": "git push -u origin {{branch}}", "desc": "Push the changes to the remote repo" },
|
||||
{ "open": "https://github.com/{{user}}/video.js/compare/{{pr.head.label}}...{{user}}:{{branch}}", "desc": "Open the github pull request page" }
|
||||
]
|
||||
},
|
||||
|
||||
"accept": [
|
||||
{ "prompt": "What is the the pull request number?", "id": "prNum" },
|
||||
{ "get": "{{project.urls.repo_api}}/pulls/{{prNum}}", "desc": "Get the PR information", "id": "pr" },
|
||||
{ "get": "{{project.urls.repo_api}}/pulls/{{prNum}}/commits", "desc": "Get the PR commits to access author info", "id": "prCommits" },
|
||||
[ "git checkout -b {{pr.user.login}}-{{pr.head.ref}} {{pr.base.ref}}", "Create a new branch for merging the changes" ],
|
||||
[ "git fetch {{pr.head.repo.ssh_url}} {{pr.head.ref}}", "Fetch the changes" ],
|
||||
[ "git merge --no-commit --squash FETCH_HEAD", "Merge the changes in without committing so they can be squashed" ],
|
||||
[ "grunt test", "Run tests to make sure they still pass" ],
|
||||
{ "prompt": "Describe this change in one line", "id": "line" },
|
||||
[ "grunt chg-add:'{{line}} ([view](https\\://github.com/videojs/video.js/pull/{{prNum}}))'", "Add a line to the changelog" ],
|
||||
[ "git add CHANGELOG.md", "Add the changlelog change to be committed" ],
|
||||
[ "git commit -a --author='{{prCommits.[0].commit.author.name}} <{{prCommits.[0].commit.author.email}}>' -m '{{line}}. closes #{{prNum}}'", "Commit the changes" ],
|
||||
{ "confirm": "Does everything look ok?" },
|
||||
[ "git checkout {{pr.base.ref}}", "Check out the base branch" ],
|
||||
[ "git merge {{pr.user.login}}-{{pr.head.ref}}", "Merge the changes" ],
|
||||
[ "git push origin {{pr.base.ref}}", "Push the changes to your remote copy of the project" ],
|
||||
[ "git push upstream {{pr.base.ref}}", "Push the changes to the main project" ],
|
||||
[ "git branch -D {{pr.user.login}}-{{pr.head.ref}}", "Delete the local branch used for merging" ]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
externo
+41
@@ -0,0 +1,41 @@
|
||||
WEBVTT
|
||||
|
||||
00:00.700 --> 00:04.110
|
||||
Captions describe all relevant audio for the hearing impaired.
|
||||
[ Heroic music playing for a seagull ]
|
||||
|
||||
00:04.500 --> 00:05.000
|
||||
[ Splash!!! ]
|
||||
|
||||
00:05.100 --> 00:06.000
|
||||
[ Sploosh!!! ]
|
||||
|
||||
00:08.000 --> 00:09.225
|
||||
[ Splash...splash...splash splash splash ]
|
||||
|
||||
00:10.525 --> 00:11.255
|
||||
[ Splash, Sploosh again ]
|
||||
|
||||
00:13.500 --> 00:14.984
|
||||
Dolphin: eeeEEEEEeeee!
|
||||
|
||||
00:14.984 --> 00:16.984
|
||||
Dolphin: Squawk! eeeEEE?
|
||||
|
||||
00:25.000 --> 00:28.284
|
||||
[ A whole ton of splashes ]
|
||||
|
||||
00:29.500 --> 00:31.000
|
||||
Mine. Mine. Mine.
|
||||
|
||||
00:34.300 --> 00:36.000
|
||||
Shark: Chomp
|
||||
|
||||
00:36.800 --> 00:37.900
|
||||
Shark: CHOMP!!!
|
||||
|
||||
00:37.861 --> 00:41.193
|
||||
EEEEEEOOOOOOOOOOWHALENOISE
|
||||
|
||||
00:42.593 --> 00:45.611
|
||||
[ BIG SPLASH ]
|
||||
externo
+32
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Video.js | HTML5 Video Player</title>
|
||||
|
||||
<!-- Chang URLs to wherever Video.js files will be hosted -->
|
||||
<link href="video-js.css" rel="stylesheet" type="text/css">
|
||||
<!-- video.js must be in the <head> for older IEs to work. -->
|
||||
<script src="video.js"></script>
|
||||
|
||||
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = "video-js.swf";
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
data-setup="{}">
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
|
||||
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||
</video>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
externo
BIN
Arquivo binário não exibido.
externo
+28
@@ -0,0 +1,28 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " d="" horiz-adv-x="512" />
|
||||
<glyph unicode="" d="M1024 960v-416l-160 160-192-192-96 96 192 192-160 160zM448 288l-192-192 160-160h-416v416l160-160 192 192z" />
|
||||
<glyph unicode="" d="M192 832l640-384-640-384z" />
|
||||
<glyph unicode="" d="M128 832h320v-768h-320zM576 832h320v-768h-320z" />
|
||||
<glyph unicode="" d="M401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
|
||||
<glyph unicode="" d="M549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
|
||||
<glyph unicode="" d="M719.53 128.47c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.592 126.53-190.076 126.53-305.468 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060zM549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
|
||||
<glyph unicode="" d="M890.040 37.96c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.746-18.744 49.136 0 67.882 87.638 87.642 135.904 204.16 135.904 328.1 0 123.938-48.266 240.458-135.904 328.098-18.744 18.746-18.744 49.138 0 67.882 18.744 18.744 49.138 18.744 67.882 0 105.77-105.772 164.022-246.4 164.022-395.98 0-149.582-58.252-290.208-164.022-395.98-9.372-9.374-21.656-14.060-33.94-14.060zM719.53 128.47c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.592 126.53-190.076 126.53-305.468 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060zM549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" horiz-adv-x="1088" />
|
||||
<glyph unicode="" d="M512 960l-320-512 320-512 320 512z" />
|
||||
<glyph unicode="" d="M0 960h1374.316v-1030.414h-1374.316v1030.414zM1245.462 449.276c-1.706 180.052-8.542 258.568-51.2 314.036-7.68 11.946-22.186 18.772-34.132 27.296-41.814 30.73-238.944 41.814-467.636 41.814-228.702 0-435.21-11.084-476.17-41.814-12.8-8.524-27.316-15.35-35.84-27.296-41.822-55.468-47.786-133.984-50.346-314.036 2.56-180.062 8.524-258.57 50.346-314.036 8.524-12.8 23.040-18.774 35.84-27.306 40.96-31.574 247.468-41.814 476.17-43.52 228.692 1.706 425.822 11.946 467.636 43.52 11.946 8.532 26.452 14.506 34.132 27.306 42.658 55.466 49.494 133.974 51.2 314.036zM662.358 495.904c-11.58 140.898-86.51 223.906-220.556 223.906-122.458 0-218.722-110.432-218.722-287.88 0-178.212 87.73-289.396 232.734-289.396 115.766 0 196.798 85.298 209.588 226.95h-138.302c-5.48-52.548-27.414-92.914-73.72-92.914-73.108 0-86.51 72.354-86.51 149.27 0 105.868 30.46 159.932 81.032 159.932 45.082 0 73.718-32.75 77.976-89.868h136.48zM1140.026 495.904c-11.57 140.898-86.51 223.906-220.546 223.906-122.466 0-218.722-110.432-218.722-287.88 0-178.212 87.73-289.396 232.734-289.396 115.758 0 196.788 85.298 209.58 226.95h-138.304c-5.47-52.548-27.404-92.914-73.71-92.914-73.116 0-86.518 72.354-86.518 149.27 0 105.868 30.468 159.932 81.030 159.932 45.084 0 73.728-32.75 77.986-89.868h136.47z" horiz-adv-x="1374" />
|
||||
<glyph unicode="" d="M128 832h768v-768h-768z" />
|
||||
<glyph unicode="" d="M384 832c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128zM655.53 719.53c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128zM832 448c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64zM719.53 176.47c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64zM448.002 64c0 0 0 0 0 0 0-35.346 28.654-64 64-64 35.346 0 64 28.654 64 64 0 0 0 0 0 0 0 0 0 0 0 0 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64s0 0 0 0zM176.472 176.47c0 0 0 0 0 0 0-35.346 28.654-64 64-64 35.346 0 64 28.654 64 64 0 0 0 0 0 0 0 0 0 0 0 0 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64s0 0 0 0zM144.472 719.53c0 0 0 0 0 0 0-53.019 42.981-96 96-96 53.019 0 96 42.981 96 96 0 0 0 0 0 0 0 0 0 0 0 0 0 53.019-42.981 96-96 96-53.019 0-96-42.981-96-96s0 0 0 0zM56 448c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.765-32.235 72-72 72-39.765 0-72-32.235-72-72z" />
|
||||
<glyph unicode="" d="M448 384v-416l-160 160-192-192-96 96 192 192-160 160zM1024 864l-192-192 160-160h-416v416l160-160 192 192z" />
|
||||
<glyph unicode="" d="M512 896c282.77 0 512-186.25 512-416 0-229.752-229.23-416-512-416-27.156 0-53.81 1.734-79.824 5.044-109.978-109.978-241.25-129.7-368.176-132.596v26.916c68.536 33.578 128 94.74 128 164.636 0 9.754-0.758 19.33-2.164 28.696-115.796 76.264-189.836 192.754-189.836 323.304 0 229.75 229.23 416 512 416z" />
|
||||
<glyph unicode="" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 704c141.384 0 256-114.616 256-256s-114.616-256-256-256-256 114.616-256 256 114.616 256 256 256zM817.47 142.53c-81.594-81.594-190.080-126.53-305.47-126.53-115.392 0-223.876 44.936-305.47 126.53-81.594 81.594-126.53 190.078-126.53 305.47 0 115.39 44.936 223.876 126.53 305.47l67.882-67.882c0 0 0 0 0 0-131.006-131.006-131.006-344.17 0-475.176 63.462-63.462 147.838-98.412 237.588-98.412 89.748 0 174.124 34.95 237.588 98.412 131.006 131.006 131.006 344.168 0 475.176l67.882 67.882c81.594-81.594 126.53-190.080 126.53-305.47 0-115.392-44.936-223.876-126.53-305.47z" />
|
||||
<glyph unicode="" d="M864 256c-45.16 0-85.92-18.738-115.012-48.83l-431.004 215.502c1.314 8.252 2.016 16.706 2.016 25.328s-0.702 17.076-2.016 25.326l431.004 215.502c29.092-30.090 69.852-48.828 115.012-48.828 88.366 0 160 71.634 160 160s-71.634 160-160 160-160-71.634-160-160c0-8.622 0.704-17.076 2.016-25.326l-431.004-215.504c-29.092 30.090-69.852 48.83-115.012 48.83-88.366 0-160-71.636-160-160 0-88.368 71.634-160 160-160 45.16 0 85.92 18.738 115.012 48.828l431.004-215.502c-1.312-8.25-2.016-16.704-2.016-25.326 0-88.368 71.634-160 160-160s160 71.632 160 160c0 88.364-71.634 160-160 160z" />
|
||||
<glyph unicode="" d="M1024 448c-1.278 66.862-15.784 133.516-42.576 194.462-26.704 61-65.462 116.258-113.042 161.92-47.552 45.696-103.944 81.82-164.984 105.652-61.004 23.924-126.596 35.352-191.398 33.966-64.81-1.282-129.332-15.374-188.334-41.356-59.048-25.896-112.542-63.47-156.734-109.576-44.224-46.082-79.16-100.708-102.186-159.798-23.114-59.062-34.128-122.52-32.746-185.27 1.286-62.76 14.964-125.148 40.134-182.206 25.088-57.1 61.476-108.828 106.11-151.548 44.61-42.754 97.472-76.504 154.614-98.72 57.118-22.304 118.446-32.902 179.142-31.526 60.708 1.29 120.962 14.554 176.076 38.914 55.15 24.282 105.116 59.48 146.366 102.644 41.282 43.14 73.844 94.236 95.254 149.43 13.034 33.458 21.88 68.4 26.542 103.798 1.246-0.072 2.498-0.12 3.762-0.12 35.346 0 64 28.652 64 64 0 1.796-0.094 3.572-0.238 5.332h0.238zM922.306 278.052c-23.472-53.202-57.484-101.4-99.178-141.18-41.67-39.81-91-71.186-144.244-91.79-53.228-20.678-110.29-30.452-166.884-29.082-56.604 1.298-112.596 13.736-163.82 36.474-51.25 22.666-97.684 55.49-135.994 95.712-38.338 40.198-68.528 87.764-88.322 139.058-19.87 51.284-29.228 106.214-27.864 160.756 1.302 54.552 13.328 108.412 35.254 157.69 21.858 49.3 53.498 93.97 92.246 130.81 38.73 36.868 84.53 65.87 133.874 84.856 49.338 19.060 102.136 28.006 154.626 26.644 52.5-1.306 104.228-12.918 151.562-34.034 47.352-21.050 90.256-51.502 125.624-88.782 35.396-37.258 63.21-81.294 81.39-128.688 18.248-47.392 26.782-98.058 25.424-148.496h0.238c-0.144-1.76-0.238-3.536-0.238-5.332 0-33.012 24.992-60.174 57.086-63.624-6.224-34.822-16.53-68.818-30.78-100.992z" />
|
||||
<glyph unicode="" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96 53.020 0 96 42.98 96 96 0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96-53.020 0-96-42.98-96-96 0-282.77 229.23-512 512-512z" />
|
||||
<glyph unicode="" d="M1024 351.906v192.188l-146.774 24.462c-5.958 18.132-13.222 35.668-21.694 52.5l86.454 121.034-135.896 135.898-120.826-86.304c-16.91 8.554-34.538 15.888-52.768 21.902l-24.402 146.414h-192.188l-24.402-146.416c-18.23-6.014-35.858-13.348-52.766-21.902l-120.828 86.304-135.898-135.898 86.454-121.036c-8.47-16.83-15.734-34.366-21.692-52.498l-146.774-24.46v-192.188l147.118-24.52c5.96-17.968 13.21-35.348 21.642-52.030l-86.748-121.448 135.898-135.896 121.654 86.894c16.602-8.35 33.89-15.528 51.764-21.434l24.578-147.472h192.188l24.578 147.474c17.874 5.906 35.162 13.084 51.766 21.432l121.652-86.892 135.896 135.896-86.744 121.446c8.432 16.682 15.678 34.062 21.64 52.032l147.118 24.518zM512 320c-70.692 0-128 57.306-128 128 0 70.692 57.308 128 128 128 70.694 0 128-57.308 128-128 0-70.694-57.306-128-128-128z" />
|
||||
</font></defs></svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 10 KiB |
externo
BIN
Arquivo binário não exibido.
externo
BIN
Arquivo binário não exibido.
externo
+920
@@ -0,0 +1,920 @@
|
||||
/*!
|
||||
Video.js Default Styles (http://videojs.com)
|
||||
Version 4.7.1
|
||||
Create your own skin at http://designer.videojs.com
|
||||
*/
|
||||
/* SKIN
|
||||
================================================================================
|
||||
The main class name for all skin-specific styles. To make your own skin,
|
||||
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
|
||||
skin name to your video tag instead of the default skin.
|
||||
e.g. <video class="video-js my-skin-name">
|
||||
*/
|
||||
.vjs-default-skin {
|
||||
color: #cccccc;
|
||||
}
|
||||
/* Custom Icon Font
|
||||
--------------------------------------------------------------------------------
|
||||
The control icons are from a custom font. Each icon corresponds to a character
|
||||
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'VideoJS';
|
||||
src: url('font/vjs.eot');
|
||||
src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype'), url('font/vjs.svg#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Base UI Component Classes
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
/* Slider - used for Volume bar and Seek bar */
|
||||
.vjs-default-skin .vjs-slider {
|
||||
/* Replace browser focus hightlight with handle highlight */
|
||||
outline: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
/* background-color-with-alpha */
|
||||
background-color: #333333;
|
||||
background-color: rgba(51, 51, 51, 0.9);
|
||||
}
|
||||
.vjs-default-skin .vjs-slider:focus {
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0 0 2em #ffffff;
|
||||
-moz-box-shadow: 0 0 2em #ffffff;
|
||||
box-shadow: 0 0 2em #ffffff;
|
||||
}
|
||||
.vjs-default-skin .vjs-slider-handle {
|
||||
position: absolute;
|
||||
/* Needed for IE6 */
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.vjs-default-skin .vjs-slider-handle:before {
|
||||
content: "\e009";
|
||||
font-family: VideoJS;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-shadow: 0em 0em 1em #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* Rotate the square icon to make a diamond */
|
||||
/* transform */
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
/* Control Bar
|
||||
--------------------------------------------------------------------------------
|
||||
The default control bar that is a container for most of the controls.
|
||||
*/
|
||||
.vjs-default-skin .vjs-control-bar {
|
||||
/* Start hidden */
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* Place control bar at the bottom of the player box/video.
|
||||
If you want more margin below the control bar, add more height. */
|
||||
bottom: 0;
|
||||
/* Use left/right to stretch to 100% width of player div */
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* Height includes any margin you want above or below control items */
|
||||
height: 3.0em;
|
||||
/* background-color-with-alpha */
|
||||
background-color: #07141e;
|
||||
background-color: rgba(7, 20, 30, 0.7);
|
||||
}
|
||||
/* Show the control bar only once the video has started playing */
|
||||
.vjs-default-skin.vjs-has-started .vjs-control-bar {
|
||||
display: block;
|
||||
/* Visibility needed to make sure things hide in older browsers too. */
|
||||
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
/* transition */
|
||||
-webkit-transition: visibility 0.1s, opacity 0.1s;
|
||||
-moz-transition: visibility 0.1s, opacity 0.1s;
|
||||
-o-transition: visibility 0.1s, opacity 0.1s;
|
||||
transition: visibility 0.1s, opacity 0.1s;
|
||||
}
|
||||
/* Hide the control bar when the video is playing and the user is inactive */
|
||||
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
/* transition */
|
||||
-webkit-transition: visibility 1s, opacity 1s;
|
||||
-moz-transition: visibility 1s, opacity 1s;
|
||||
-o-transition: visibility 1s, opacity 1s;
|
||||
transition: visibility 1s, opacity 1s;
|
||||
}
|
||||
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
|
||||
display: none;
|
||||
}
|
||||
.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
|
||||
display: none;
|
||||
}
|
||||
/* The control bar shouldn't show after an error */
|
||||
.vjs-default-skin.vjs-error .vjs-control-bar {
|
||||
display: none;
|
||||
}
|
||||
/* IE8 is flakey with fonts, and you have to change the actual content to force
|
||||
fonts to show/hide properly.
|
||||
- "\9" IE8 hack didn't work for this
|
||||
- Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
|
||||
*/
|
||||
@media \0screen {
|
||||
.vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
/* General styles for individual controls. */
|
||||
.vjs-default-skin .vjs-control {
|
||||
outline: none;
|
||||
position: relative;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 3.0em;
|
||||
width: 4em;
|
||||
}
|
||||
/* FontAwsome button icons */
|
||||
.vjs-default-skin .vjs-control:before {
|
||||
font-family: VideoJS;
|
||||
font-size: 1.5em;
|
||||
line-height: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
/* Replacement for focus outline */
|
||||
.vjs-default-skin .vjs-control:focus:before,
|
||||
.vjs-default-skin .vjs-control:hover:before {
|
||||
text-shadow: 0em 0em 1em #ffffff;
|
||||
}
|
||||
.vjs-default-skin .vjs-control:focus {
|
||||
/* outline: 0; */
|
||||
/* keyboard-only users cannot see the focus on several of the UI elements when
|
||||
this is set to 0 */
|
||||
|
||||
}
|
||||
/* Hide control text visually, but have it available for screenreaders */
|
||||
.vjs-default-skin .vjs-control-text {
|
||||
/* hide-visually */
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
/* Play/Pause
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-play-control {
|
||||
width: 5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.vjs-default-skin .vjs-play-control:before {
|
||||
content: "\e001";
|
||||
}
|
||||
.vjs-default-skin.vjs-playing .vjs-play-control:before {
|
||||
content: "\e002";
|
||||
}
|
||||
/* Playback toggle
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value {
|
||||
font-size: 1.5em;
|
||||
line-height: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
|
||||
width: 4em;
|
||||
left: -2em;
|
||||
list-style: none;
|
||||
}
|
||||
/* Volume/Mute
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vjs-default-skin .vjs-mute-control,
|
||||
.vjs-default-skin .vjs-volume-menu-button {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
.vjs-default-skin .vjs-mute-control:before,
|
||||
.vjs-default-skin .vjs-volume-menu-button:before {
|
||||
content: "\e006";
|
||||
}
|
||||
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
|
||||
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
|
||||
content: "\e003";
|
||||
}
|
||||
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
|
||||
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
|
||||
content: "\e004";
|
||||
}
|
||||
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
|
||||
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
|
||||
content: "\e005";
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-control {
|
||||
width: 5em;
|
||||
float: right;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-bar {
|
||||
width: 5em;
|
||||
height: 0.6em;
|
||||
margin: 1.1em auto 0;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
|
||||
height: 2.9em;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-level {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 0.5em;
|
||||
/* assuming volume starts at 1.0 */
|
||||
|
||||
width: 100%;
|
||||
background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
/* Assumes volume starts at 1.0. If you change the size of the
|
||||
handle relative to the volume bar, you'll need to update this value
|
||||
too. */
|
||||
|
||||
left: 4.5em;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-handle:before {
|
||||
font-size: 0.9em;
|
||||
top: -0.2em;
|
||||
left: -0.2em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
|
||||
width: 6em;
|
||||
left: -4em;
|
||||
}
|
||||
/* Progress
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-progress-control {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
font-size: 0.3em;
|
||||
height: 1em;
|
||||
/* Set above the rest of the controls. */
|
||||
top: -1em;
|
||||
/* Shrink the bar slower than it grows. */
|
||||
/* transition */
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
/* On hover, make the progress bar grow to something that's more clickable.
|
||||
This simply changes the overall font for the progress bar, and this
|
||||
updates both the em-based widths and heights, as wells as the icon font */
|
||||
.vjs-default-skin:hover .vjs-progress-control {
|
||||
font-size: .9em;
|
||||
/* Even though we're not changing the top/height, we need to include them in
|
||||
the transition so they're handled correctly. */
|
||||
|
||||
/* transition */
|
||||
-webkit-transition: all 0.2s;
|
||||
-moz-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
/* Box containing play and load progresses. Also acts as seek scrubber. */
|
||||
.vjs-default-skin .vjs-progress-holder {
|
||||
height: 100%;
|
||||
}
|
||||
/* Progress Bars */
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-load-progress,
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-load-progress div {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* updated by javascript during playback */
|
||||
|
||||
width: 0;
|
||||
/* Needed for IE6 */
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.vjs-default-skin .vjs-play-progress {
|
||||
/*
|
||||
Using a data URI to create the white diagonal lines with a transparent
|
||||
background. Surprisingly works in IE8.
|
||||
Created using http://www.patternify.com
|
||||
Changing the first color value will change the bar color.
|
||||
Also using a paralax effect to make the lines move backwards.
|
||||
The -50% left position makes that happen.
|
||||
*/
|
||||
|
||||
background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
|
||||
}
|
||||
.vjs-default-skin .vjs-load-progress {
|
||||
background: #646464 /* IE8- Fallback */;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
/* there are child elements of the load progress bar that represent the
|
||||
specific time ranges that have been buffered */
|
||||
.vjs-default-skin .vjs-load-progress div {
|
||||
background: #787878 /* IE8- Fallback */;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.vjs-default-skin .vjs-seek-handle {
|
||||
width: 1.5em;
|
||||
height: 100%;
|
||||
}
|
||||
.vjs-default-skin .vjs-seek-handle:before {
|
||||
padding-top: 0.1em /* Minor adjustment */;
|
||||
}
|
||||
/* Live Mode
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin.vjs-live .vjs-time-controls,
|
||||
.vjs-default-skin.vjs-live .vjs-time-divider,
|
||||
.vjs-default-skin.vjs-live .vjs-progress-control {
|
||||
display: none;
|
||||
}
|
||||
.vjs-default-skin.vjs-live .vjs-live-display {
|
||||
display: block;
|
||||
}
|
||||
/* Live Display
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-live-display {
|
||||
display: none;
|
||||
font-size: 1em;
|
||||
line-height: 3em;
|
||||
}
|
||||
/* Time Display
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-time-controls {
|
||||
font-size: 1em;
|
||||
/* Align vertically by making the line height the same as the control bar */
|
||||
line-height: 3em;
|
||||
}
|
||||
.vjs-default-skin .vjs-current-time {
|
||||
float: left;
|
||||
}
|
||||
.vjs-default-skin .vjs-duration {
|
||||
float: left;
|
||||
}
|
||||
/* Remaining time is in the HTML, but not included in default design */
|
||||
.vjs-default-skin .vjs-remaining-time {
|
||||
display: none;
|
||||
float: left;
|
||||
}
|
||||
.vjs-time-divider {
|
||||
float: left;
|
||||
line-height: 3em;
|
||||
}
|
||||
/* Fullscreen
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-fullscreen-control {
|
||||
width: 3.8em;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
.vjs-default-skin .vjs-fullscreen-control:before {
|
||||
content: "\e000";
|
||||
}
|
||||
/* Switch to the exit icon when the player is in fullscreen */
|
||||
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
|
||||
content: "\e00b";
|
||||
}
|
||||
/* Big Play Button (play button at start)
|
||||
--------------------------------------------------------------------------------
|
||||
Positioning of the play button in the center or other corners can be done more
|
||||
easily in the skin designer. http://designer.videojs.com/
|
||||
*/
|
||||
.vjs-default-skin .vjs-big-play-button {
|
||||
left: 0.5em;
|
||||
top: 0.5em;
|
||||
font-size: 3em;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
width: 4em;
|
||||
height: 2.6em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
/* Need a slightly gray bg so it can be seen on black backgrounds */
|
||||
/* background-color-with-alpha */
|
||||
background-color: #07141e;
|
||||
background-color: rgba(7, 20, 30, 0.7);
|
||||
border: 0.1em solid #3b4249;
|
||||
/* border-radius */
|
||||
-webkit-border-radius: 0.8em;
|
||||
-moz-border-radius: 0.8em;
|
||||
border-radius: 0.8em;
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
|
||||
-moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
|
||||
/* transition */
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
/* Optionally center */
|
||||
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
|
||||
/* Center it horizontally */
|
||||
left: 50%;
|
||||
margin-left: -2.1em;
|
||||
/* Center it vertically */
|
||||
top: 50%;
|
||||
margin-top: -1.4000000000000001em;
|
||||
}
|
||||
/* Hide if controls are disabled */
|
||||
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
|
||||
display: none;
|
||||
}
|
||||
/* Hide when video starts playing */
|
||||
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
|
||||
display: none;
|
||||
}
|
||||
/* Hide on mobile devices. Remove when we stop using native controls
|
||||
by default on mobile */
|
||||
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
|
||||
display: none;
|
||||
}
|
||||
.vjs-default-skin:hover .vjs-big-play-button,
|
||||
.vjs-default-skin .vjs-big-play-button:focus {
|
||||
outline: 0;
|
||||
border-color: #fff;
|
||||
/* IE8 needs a non-glow hover state */
|
||||
background-color: #505050;
|
||||
background-color: rgba(50, 50, 50, 0.75);
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0 0 3em #ffffff;
|
||||
-moz-box-shadow: 0 0 3em #ffffff;
|
||||
box-shadow: 0 0 3em #ffffff;
|
||||
/* transition */
|
||||
-webkit-transition: all 0s;
|
||||
-moz-transition: all 0s;
|
||||
-o-transition: all 0s;
|
||||
transition: all 0s;
|
||||
}
|
||||
.vjs-default-skin .vjs-big-play-button:before {
|
||||
content: "\e001";
|
||||
font-family: VideoJS;
|
||||
/* In order to center the play icon vertically we need to set the line height
|
||||
to the same as the button height */
|
||||
|
||||
line-height: 2.6em;
|
||||
text-shadow: 0.05em 0.05em 0.1em #000;
|
||||
text-align: center /* Needed for IE8 */;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.vjs-error .vjs-big-play-button {
|
||||
display: none;
|
||||
}
|
||||
/* Error Display
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-error-display {
|
||||
display: none;
|
||||
}
|
||||
.vjs-error .vjs-error-display {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.vjs-error .vjs-error-display:before {
|
||||
content: 'X';
|
||||
font-family: Arial;
|
||||
font-size: 4em;
|
||||
color: #666666;
|
||||
/* In order to center the play icon vertically we need to set the line height
|
||||
to the same as the button height */
|
||||
|
||||
line-height: 1;
|
||||
text-shadow: 0.05em 0.05em 0.1em #000;
|
||||
text-align: center /* Needed for IE8 */;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
.vjs-error-display div {
|
||||
position: absolute;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
.vjs-error-display a,
|
||||
.vjs-error-display a:visited {
|
||||
color: #F4A460;
|
||||
}
|
||||
/* Loading Spinner
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-loading-spinner {
|
||||
/* Should be hidden by default */
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: -0.5em;
|
||||
margin-top: -0.5em;
|
||||
opacity: 0.75;
|
||||
}
|
||||
/* Show the spinner when waiting for data and seeking to a new time */
|
||||
.vjs-waiting .vjs-loading-spinner,
|
||||
.vjs-seeking .vjs-loading-spinner {
|
||||
display: block;
|
||||
/* only animate when showing because it can be processor heavy */
|
||||
/* animation */
|
||||
-webkit-animation: spin 1.5s infinite linear;
|
||||
-moz-animation: spin 1.5s infinite linear;
|
||||
-o-animation: spin 1.5s infinite linear;
|
||||
animation: spin 1.5s infinite linear;
|
||||
}
|
||||
/* Errors are unrecoverable without user interaction so hide the spinner */
|
||||
.vjs-error .vjs-loading-spinner {
|
||||
display: none;
|
||||
/* ensure animation doesn't continue while hidden */
|
||||
/* animation */
|
||||
-webkit-animation: none;
|
||||
-moz-animation: none;
|
||||
-o-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
.vjs-default-skin .vjs-loading-spinner:before {
|
||||
content: "\e01e";
|
||||
font-family: VideoJS;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
text-shadow: 0em 0em 0.1em #000;
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% {
|
||||
-o-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-o-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
/* Menu Buttons (Captions/Subtitles/etc.)
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-menu-button {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0em;
|
||||
/* (Width of vjs-menu - width of button) / 2 */
|
||||
|
||||
width: 0em;
|
||||
height: 0em;
|
||||
margin-bottom: 3em;
|
||||
border-left: 2em solid transparent;
|
||||
border-right: 2em solid transparent;
|
||||
border-top: 1.55em solid #000000;
|
||||
/* Same width top as ul bottom */
|
||||
|
||||
border-top-color: rgba(7, 40, 50, 0.5);
|
||||
/* Same as ul background */
|
||||
|
||||
}
|
||||
/* Button Pop-up Menu */
|
||||
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 10em;
|
||||
bottom: 1.5em;
|
||||
/* Same bottom as vjs-menu border-top */
|
||||
|
||||
max-height: 15em;
|
||||
overflow: auto;
|
||||
left: -5em;
|
||||
/* Width of menu - width of button / 2 */
|
||||
|
||||
/* background-color-with-alpha */
|
||||
background-color: #07141e;
|
||||
background-color: rgba(7, 20, 30, 0.7);
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
|
||||
-moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
|
||||
box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
|
||||
display: block;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.3em 0 0.3em 0;
|
||||
line-height: 1.4em;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
|
||||
background-color: #000;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button ul li:focus,
|
||||
.vjs-default-skin .vjs-menu-button ul li:hover,
|
||||
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
|
||||
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
|
||||
outline: 0;
|
||||
color: #111;
|
||||
/* background-color-with-alpha */
|
||||
background-color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0 0 1em #ffffff;
|
||||
-moz-box-shadow: 0 0 1em #ffffff;
|
||||
box-shadow: 0 0 1em #ffffff;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
padding: 0;
|
||||
margin: 0 0 0.3em 0;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
/* Subtitles Button */
|
||||
.vjs-default-skin .vjs-subtitles-button:before {
|
||||
content: "\e00c";
|
||||
}
|
||||
/* Captions Button */
|
||||
.vjs-default-skin .vjs-captions-button:before {
|
||||
content: "\e008";
|
||||
}
|
||||
/* Chapters Button */
|
||||
.vjs-default-skin .vjs-chapters-button:before {
|
||||
content: "\e00c";
|
||||
}
|
||||
.vjs-default-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
|
||||
width: 24em;
|
||||
left: -12em;
|
||||
}
|
||||
/* Replacement for focus outline */
|
||||
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
|
||||
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0 0 1em #ffffff;
|
||||
-moz-box-shadow: 0 0 1em #ffffff;
|
||||
box-shadow: 0 0 1em #ffffff;
|
||||
}
|
||||
/*
|
||||
REQUIRED STYLES (be careful overriding)
|
||||
================================================================================
|
||||
When loading the player, the video tag is replaced with a DIV,
|
||||
that will hold the video tag or object tag for other playback methods.
|
||||
The div contains the video playback element (Flash or HTML5) and controls,
|
||||
and sets the width and height of the video.
|
||||
|
||||
** If you want to add some kind of border/padding (e.g. a frame), or special
|
||||
positioning, use another containing element. Otherwise you risk messing up
|
||||
control positioning and full window mode. **
|
||||
*/
|
||||
.video-js {
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
/* Start with 10px for base font size so other dimensions can be em based and
|
||||
easily calculable. */
|
||||
|
||||
font-size: 10px;
|
||||
/* Allow poster to be vertially aligned. */
|
||||
|
||||
vertical-align: middle;
|
||||
/* display: table-cell; */
|
||||
/*This works in Safari but not Firefox.*/
|
||||
|
||||
/* Provide some basic defaults for fonts */
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
/* Avoiding helvetica: issue #376 */
|
||||
|
||||
font-family: Arial, sans-serif;
|
||||
/* Turn off user selection (text highlighting) by default.
|
||||
The majority of player components will not be text blocks.
|
||||
Text areas will need to turn user selection back on. */
|
||||
|
||||
/* user-select */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/* Playback technology elements expand to the width/height of the containing div
|
||||
<video> or <object> */
|
||||
.video-js .vjs-tech {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
|
||||
checking fullScreenEnabled. */
|
||||
.video-js:-moz-full-screen {
|
||||
position: absolute;
|
||||
}
|
||||
/* Fullscreen Styles */
|
||||
body.vjs-full-window {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
/* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
|
||||
overflow-y: auto;
|
||||
}
|
||||
.video-js.vjs-fullscreen {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
/* IE6 full-window (underscore hack) */
|
||||
_position: absolute;
|
||||
}
|
||||
.video-js:-webkit-full-screen {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.video-js.vjs-fullscreen.vjs-user-inactive {
|
||||
cursor: none;
|
||||
}
|
||||
/* Poster Styles */
|
||||
.vjs-poster {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.vjs-poster img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-height: 100%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/* Hide the poster when native controls are used otherwise it covers them */
|
||||
.video-js.vjs-using-native-controls .vjs-poster {
|
||||
display: none;
|
||||
}
|
||||
/* Text Track Styles */
|
||||
/* Overall track holder for both captions and subtitles */
|
||||
.video-js .vjs-text-track-display {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 4em;
|
||||
/* Leave padding on left and right */
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
/* Move captions down when controls aren't being shown */
|
||||
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
|
||||
bottom: 1em;
|
||||
}
|
||||
/* Individual tracks */
|
||||
.video-js .vjs-text-track {
|
||||
display: none;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
margin-bottom: 0.1em;
|
||||
/* Transparent black background, or fallback to all black (oldIE) */
|
||||
/* background-color-with-alpha */
|
||||
background-color: #000000;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.video-js .vjs-subtitles {
|
||||
color: #ffffff /* Subtitles are white */;
|
||||
}
|
||||
.video-js .vjs-captions {
|
||||
color: #ffcc66 /* Captions are yellow */;
|
||||
}
|
||||
.vjs-tt-cue {
|
||||
display: block;
|
||||
}
|
||||
/* Hide disabled or unsupported controls */
|
||||
.vjs-default-skin .vjs-hidden {
|
||||
display: none;
|
||||
}
|
||||
.vjs-lock-showing {
|
||||
display: block !important;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
/* In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
|
||||
The .video-js classname on the video tag also isn't considered.
|
||||
This optional paragraph inside the video tag can provide a message to users
|
||||
about what's required to play video. */
|
||||
.vjs-no-js {
|
||||
padding: 20px;
|
||||
color: #ccc;
|
||||
background-color: #333;
|
||||
font-size: 18px;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.vjs-no-js a,
|
||||
.vjs-no-js a:visited {
|
||||
color: #F4A460;
|
||||
}
|
||||
/* -----------------------------------------------------------------------------
|
||||
The original source of this file lives at
|
||||
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
|
||||
externo
+1126
Diferenças do arquivo suprimidas por serem muito extensas
Carregar Diff
externo
+5
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
BIN
Arquivo binário não exibido.
externo
+8195
Diferenças do arquivo suprimidas por serem muito extensas
Carregar Diff
externo
+154
@@ -0,0 +1,154 @@
|
||||
/*! Video.js v4.7.1 Copyright 2014 Brightcove, Inc. https://github.com/videojs/video.js/blob/master/LICENSE */
|
||||
(function() {var b=void 0,f=!0,k=null,l=!1;function m(){return function(){}}function p(a){return function(){return this[a]}}function r(a){return function(){return a}}var s;document.createElement("video");document.createElement("audio");document.createElement("track");function t(a,c,d){if("string"===typeof a){0===a.indexOf("#")&&(a=a.slice(1));if(t.Ca[a])return t.Ca[a];a=t.w(a)}if(!a||!a.nodeName)throw new TypeError("The element or ID supplied is not valid. (videojs)");return a.player||new t.Player(a,c,d)}
|
||||
var videojs=window.videojs=t;t.Wb="4.7";t.Tc="https:"==document.location.protocol?"https://":"http://";t.options={techOrder:["html5","flash"],html5:{},flash:{},width:300,height:150,defaultVolume:0,playbackRates:[],children:{mediaLoader:{},posterImage:{},textTrackDisplay:{},loadingSpinner:{},bigPlayButton:{},controlBar:{},errorDisplay:{}},language:document.getElementsByTagName("html")[0].getAttribute("lang")||navigator.Wa&&navigator.Wa[0]||navigator.te||navigator.language||"en",languages:{},notSupportedMessage:"No compatible source was found for this video."};
|
||||
"GENERATED_CDN_VSN"!==t.Wb&&(videojs.options.flash.swf=t.Tc+"vjs.zencdn.net/"+t.Wb+"/video-js.swf");t.Ca={};"function"===typeof define&&define.amd?define([],function(){return videojs}):"object"===typeof exports&&"object"===typeof module&&(module.exports=videojs);t.ra=t.CoreObject=m();
|
||||
t.ra.extend=function(a){var c,d;a=a||{};c=a.init||a.j||this.prototype.init||this.prototype.j||m();d=function(){c.apply(this,arguments)};d.prototype=t.h.create(this.prototype);d.prototype.constructor=d;d.extend=t.ra.extend;d.create=t.ra.create;for(var e in a)a.hasOwnProperty(e)&&(d.prototype[e]=a[e]);return d};t.ra.create=function(){var a=t.h.create(this.prototype);this.apply(a,arguments);return a};
|
||||
t.d=function(a,c,d){if(t.h.isArray(c))return u(t.d,a,c,d);var e=t.getData(a);e.F||(e.F={});e.F[c]||(e.F[c]=[]);d.z||(d.z=t.z++);e.F[c].push(d);e.Y||(e.disabled=l,e.Y=function(c){if(!e.disabled){c=t.rc(c);var d=e.F[c.type];if(d)for(var d=d.slice(0),j=0,n=d.length;j<n&&!c.yc();j++)d[j].call(a,c)}});1==e.F[c].length&&(a.addEventListener?a.addEventListener(c,e.Y,l):a.attachEvent&&a.attachEvent("on"+c,e.Y))};
|
||||
t.p=function(a,c,d){if(t.uc(a)){var e=t.getData(a);if(e.F){if(t.h.isArray(c))return u(t.p,a,c,d);if(c){var g=e.F[c];if(g){if(d){if(d.z)for(e=0;e<g.length;e++)g[e].z===d.z&&g.splice(e--,1)}else e.F[c]=[];t.lc(a,c)}}else for(g in e.F)c=g,e.F[c]=[],t.lc(a,c)}}};t.lc=function(a,c){var d=t.getData(a);0===d.F[c].length&&(delete d.F[c],a.removeEventListener?a.removeEventListener(c,d.Y,l):a.detachEvent&&a.detachEvent("on"+c,d.Y));t.Ib(d.F)&&(delete d.F,delete d.Y,delete d.disabled);t.Ib(d)&&t.Fc(a)};
|
||||
t.rc=function(a){function c(){return f}function d(){return l}if(!a||!a.Jb){var e=a||window.event;a={};for(var g in e)"layerX"!==g&&("layerY"!==g&&"keyboardEvent.keyLocation"!==g)&&("returnValue"==g&&e.preventDefault||(a[g]=e[g]));a.target||(a.target=a.srcElement||document);a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement;a.preventDefault=function(){e.preventDefault&&e.preventDefault();a.returnValue=l;a.yd=c;a.defaultPrevented=f};a.yd=d;a.defaultPrevented=l;a.stopPropagation=function(){e.stopPropagation&&
|
||||
e.stopPropagation();a.cancelBubble=f;a.Jb=c};a.Jb=d;a.stopImmediatePropagation=function(){e.stopImmediatePropagation&&e.stopImmediatePropagation();a.yc=c;a.stopPropagation()};a.yc=d;if(a.clientX!=k){g=document.documentElement;var h=document.body;a.pageX=a.clientX+(g&&g.scrollLeft||h&&h.scrollLeft||0)-(g&&g.clientLeft||h&&h.clientLeft||0);a.pageY=a.clientY+(g&&g.scrollTop||h&&h.scrollTop||0)-(g&&g.clientTop||h&&h.clientTop||0)}a.which=a.charCode||a.keyCode;a.button!=k&&(a.button=a.button&1?0:a.button&
|
||||
4?1:a.button&2?2:0)}return a};t.l=function(a,c){var d=t.uc(a)?t.getData(a):{},e=a.parentNode||a.ownerDocument;"string"===typeof c&&(c={type:c,target:a});c=t.rc(c);d.Y&&d.Y.call(a,c);if(e&&!c.Jb()&&c.bubbles!==l)t.l(e,c);else if(!e&&!c.defaultPrevented&&(d=t.getData(c.target),c.target[c.type])){d.disabled=f;if("function"===typeof c.target[c.type])c.target[c.type]();d.disabled=l}return!c.defaultPrevented};
|
||||
t.V=function(a,c,d){function e(){t.p(a,c,e);d.apply(this,arguments)}if(t.h.isArray(c))return u(t.V,a,c,d);e.z=d.z=d.z||t.z++;t.d(a,c,e)};function u(a,c,d,e){t.jc.forEach(d,function(d){a(c,d,e)})}var w=Object.prototype.hasOwnProperty;t.e=function(a,c){var d;c=c||{};d=document.createElement(a||"div");t.h.Z(c,function(a,c){-1!==a.indexOf("aria-")||"role"==a?d.setAttribute(a,c):d[a]=c});return d};t.ba=function(a){return a.charAt(0).toUpperCase()+a.slice(1)};t.h={};
|
||||
t.h.create=Object.create||function(a){function c(){}c.prototype=a;return new c};t.h.Z=function(a,c,d){for(var e in a)w.call(a,e)&&c.call(d||this,e,a[e])};t.h.A=function(a,c){if(!c)return a;for(var d in c)w.call(c,d)&&(a[d]=c[d]);return a};t.h.md=function(a,c){var d,e,g;a=t.h.copy(a);for(d in c)w.call(c,d)&&(e=a[d],g=c[d],a[d]=t.h.Ua(e)&&t.h.Ua(g)?t.h.md(e,g):c[d]);return a};t.h.copy=function(a){return t.h.A({},a)};
|
||||
t.h.Ua=function(a){return!!a&&"object"===typeof a&&"[object Object]"===a.toString()&&a.constructor===Object};t.h.isArray=Array.isArray||function(a){return"[object Array]"===Object.prototype.toString.call(a)};t.bind=function(a,c,d){function e(){return c.apply(a,arguments)}c.z||(c.z=t.z++);e.z=d?d+"_"+c.z:c.z;return e};t.va={};t.z=1;t.expando="vdata"+(new Date).getTime();t.getData=function(a){var c=a[t.expando];c||(c=a[t.expando]=t.z++,t.va[c]={});return t.va[c]};
|
||||
t.uc=function(a){a=a[t.expando];return!(!a||t.Ib(t.va[a]))};t.Fc=function(a){var c=a[t.expando];if(c){delete t.va[c];try{delete a[t.expando]}catch(d){a.removeAttribute?a.removeAttribute(t.expando):a[t.expando]=k}}};t.Ib=function(a){for(var c in a)if(a[c]!==k)return l;return f};t.n=function(a,c){-1==(" "+a.className+" ").indexOf(" "+c+" ")&&(a.className=""===a.className?c:a.className+" "+c)};
|
||||
t.q=function(a,c){var d,e;if(-1!=a.className.indexOf(c)){d=a.className.split(" ");for(e=d.length-1;0<=e;e--)d[e]===c&&d.splice(e,1);a.className=d.join(" ")}};t.B=t.e("video");t.M=navigator.userAgent;t.Zc=/iPhone/i.test(t.M);t.Yc=/iPad/i.test(t.M);t.$c=/iPod/i.test(t.M);t.Xc=t.Zc||t.Yc||t.$c;var aa=t,x;var y=t.M.match(/OS (\d+)_/i);x=y&&y[1]?y[1]:b;aa.ke=x;t.Vc=/Android/i.test(t.M);var ba=t,z;var A=t.M.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i),B,C;
|
||||
A?(B=A[1]&&parseFloat(A[1]),C=A[2]&&parseFloat(A[2]),z=B&&C?parseFloat(A[1]+"."+A[2]):B?B:k):z=k;ba.Vb=z;t.ad=t.Vc&&/webkit/i.test(t.M)&&2.3>t.Vb;t.Wc=/Firefox/i.test(t.M);t.le=/Chrome/i.test(t.M);t.fc=!!("ontouchstart"in window||window.Uc&&document instanceof window.Uc);t.Hc=function(a,c){t.h.Z(c,function(c,e){e===k||"undefined"===typeof e||e===l?a.removeAttribute(c):a.setAttribute(c,e===f?"":e)})};
|
||||
t.Aa=function(a){var c,d,e,g;c={};if(a&&a.attributes&&0<a.attributes.length){d=a.attributes;for(var h=d.length-1;0<=h;h--){e=d[h].name;g=d[h].value;if("boolean"===typeof a[e]||-1!==",autoplay,controls,loop,muted,default,".indexOf(","+e+","))g=g!==k?f:l;c[e]=g}}return c};
|
||||
t.ne=function(a,c){var d="";document.defaultView&&document.defaultView.getComputedStyle?d=document.defaultView.getComputedStyle(a,"").getPropertyValue(c):a.currentStyle&&(d=a["client"+c.substr(0,1).toUpperCase()+c.substr(1)]+"px");return d};t.Hb=function(a,c){c.firstChild?c.insertBefore(a,c.firstChild):c.appendChild(a)};t.Qa={};t.w=function(a){0===a.indexOf("#")&&(a=a.slice(1));return document.getElementById(a)};
|
||||
t.za=function(a,c){c=c||a;var d=Math.floor(a%60),e=Math.floor(a/60%60),g=Math.floor(a/3600),h=Math.floor(c/60%60),j=Math.floor(c/3600);if(isNaN(a)||Infinity===a)g=e=d="-";g=0<g||0<j?g+":":"";return g+(((g||10<=h)&&10>e?"0"+e:e)+":")+(10>d?"0"+d:d)};t.gd=function(){document.body.focus();document.onselectstart=r(l)};t.ge=function(){document.onselectstart=r(f)};t.trim=function(a){return(a+"").replace(/^\s+|\s+$/g,"")};t.round=function(a,c){c||(c=0);return Math.round(a*Math.pow(10,c))/Math.pow(10,c)};
|
||||
t.Ab=function(a,c){return{length:1,start:function(){return a},end:function(){return c}}};
|
||||
t.get=function(a,c,d,e){var g,h,j,n;d=d||m();"undefined"===typeof XMLHttpRequest&&(window.XMLHttpRequest=function(){try{return new window.ActiveXObject("Msxml2.XMLHTTP.6.0")}catch(a){}try{return new window.ActiveXObject("Msxml2.XMLHTTP.3.0")}catch(c){}try{return new window.ActiveXObject("Msxml2.XMLHTTP")}catch(d){}throw Error("This browser does not support XMLHttpRequest.");});h=new XMLHttpRequest;j=t.Sd(a);n=window.location;j.protocol+j.host!==n.protocol+n.host&&window.XDomainRequest&&!("withCredentials"in
|
||||
h)?(h=new window.XDomainRequest,h.onload=function(){c(h.responseText)},h.onerror=d,h.onprogress=m(),h.ontimeout=d):(g="file:"==j.protocol||"file:"==n.protocol,h.onreadystatechange=function(){4===h.readyState&&(200===h.status||g&&0===h.status?c(h.responseText):d(h.responseText))});try{h.open("GET",a,f),e&&(h.withCredentials=f)}catch(q){d(q);return}try{h.send()}catch(v){d(v)}};
|
||||
t.Xd=function(a){try{var c=window.localStorage||l;c&&(c.volume=a)}catch(d){22==d.code||1014==d.code?t.log("LocalStorage Full (VideoJS)",d):18==d.code?t.log("LocalStorage not allowed (VideoJS)",d):t.log("LocalStorage Error (VideoJS)",d)}};t.tc=function(a){a.match(/^https?:\/\//)||(a=t.e("div",{innerHTML:'<a href="'+a+'">x</a>'}).firstChild.href);return a};
|
||||
t.Sd=function(a){var c,d,e,g;g="protocol hostname port pathname search hash host".split(" ");d=t.e("a",{href:a});if(e=""===d.host&&"file:"!==d.protocol)c=t.e("div"),c.innerHTML='<a href="'+a+'"></a>',d=c.firstChild,c.setAttribute("style","display:none; position:absolute;"),document.body.appendChild(c);a={};for(var h=0;h<g.length;h++)a[g[h]]=d[g[h]];e&&document.body.removeChild(c);return a};function D(){}var E=window.console||{log:D,warn:D,error:D};
|
||||
function F(a,c){var d=Array.prototype.slice.call(c);a?d.unshift(a.toUpperCase()+":"):a="log";t.log.history.push(d);d.unshift("VIDEOJS:");if(E[a].apply)E[a].apply(E,d);else E[a](d.join(" "))}t.log=function(){F(k,arguments)};t.log.history=[];t.log.error=function(){F("error",arguments)};t.log.warn=function(){F("warn",arguments)};
|
||||
t.ud=function(a){var c,d;a.getBoundingClientRect&&a.parentNode&&(c=a.getBoundingClientRect());if(!c)return{left:0,top:0};a=document.documentElement;d=document.body;return{left:t.round(c.left+(window.pageXOffset||d.scrollLeft)-(a.clientLeft||d.clientLeft||0)),top:t.round(c.top+(window.pageYOffset||d.scrollTop)-(a.clientTop||d.clientTop||0))}};t.jc={};t.jc.forEach=function(a,c,d){if(t.h.isArray(a)&&c instanceof Function)for(var e=0,g=a.length;e<g;++e)c.call(d||t,a[e],e,a);return a};t.qa={};
|
||||
t.qa.Nb=function(a,c){var d,e,g;a=t.h.copy(a);for(d in c)c.hasOwnProperty(d)&&(e=a[d],g=c[d],a[d]=t.h.Ua(e)&&t.h.Ua(g)?t.qa.Nb(e,g):c[d]);return a};
|
||||
t.a=t.ra.extend({j:function(a,c,d){this.c=a;this.k=t.h.copy(this.k);c=this.options(c);this.U=c.id||(c.el&&c.el.id?c.el.id:a.id()+"_component_"+t.z++);this.Fd=c.name||k;this.b=c.el||this.e();this.N=[];this.Ra={};this.Sa={};this.wc();this.J(d);if(c.Gc!==l){var e,g;e=t.bind(this.m(),this.m().reportUserActivity);this.d("touchstart",function(){e();clearInterval(g);g=setInterval(e,250)});a=function(){e();clearInterval(g)};this.d("touchmove",e);this.d("touchend",a);this.d("touchcancel",a)}}});s=t.a.prototype;
|
||||
s.dispose=function(){this.l({type:"dispose",bubbles:l});if(this.N)for(var a=this.N.length-1;0<=a;a--)this.N[a].dispose&&this.N[a].dispose();this.Sa=this.Ra=this.N=k;this.p();this.b.parentNode&&this.b.parentNode.removeChild(this.b);t.Fc(this.b);this.b=k};s.c=f;s.m=p("c");s.options=function(a){return a===b?this.k:this.k=t.qa.Nb(this.k,a)};s.e=function(a,c){return t.e(a,c)};s.s=function(a){var c=this.c.language(),d=this.c.Wa();return d&&d[c]&&d[c][a]?d[c][a]:a};s.w=p("b");
|
||||
s.ja=function(){return this.v||this.b};s.id=p("U");s.name=p("Fd");s.children=p("N");s.wd=function(a){return this.Ra[a]};s.ka=function(a){return this.Sa[a]};s.R=function(a,c){var d,e;"string"===typeof a?(e=a,c=c||{},d=c.componentClass||t.ba(e),c.name=e,d=new window.videojs[d](this.c||this,c)):d=a;this.N.push(d);"function"===typeof d.id&&(this.Ra[d.id()]=d);(e=e||d.name&&d.name())&&(this.Sa[e]=d);"function"===typeof d.el&&d.el()&&this.ja().appendChild(d.el());return d};
|
||||
s.removeChild=function(a){"string"===typeof a&&(a=this.ka(a));if(a&&this.N){for(var c=l,d=this.N.length-1;0<=d;d--)if(this.N[d]===a){c=f;this.N.splice(d,1);break}c&&(this.Ra[a.id]=k,this.Sa[a.name]=k,(c=a.w())&&c.parentNode===this.ja()&&this.ja().removeChild(a.w()))}};s.wc=function(){var a,c,d,e;a=this;if(c=this.options().children)if(t.h.isArray(c))for(var g=0;g<c.length;g++)d=c[g],"string"==typeof d?(e=d,d={}):e=d.name,a[e]=a.R(e,d);else t.h.Z(c,function(c,d){d!==l&&(a[c]=a.R(c,d))})};s.T=r("");
|
||||
s.d=function(a,c){t.d(this.b,a,t.bind(this,c));return this};s.p=function(a,c){t.p(this.b,a,c);return this};s.V=function(a,c){t.V(this.b,a,t.bind(this,c));return this};s.l=function(a){t.l(this.b,a);return this};s.J=function(a){a&&(this.la?a.call(this):(this.cb===b&&(this.cb=[]),this.cb.push(a)));return this};s.Ha=function(){this.la=f;var a=this.cb;if(a&&0<a.length){for(var c=0,d=a.length;c<d;c++)a[c].call(this);this.cb=[];this.l("ready")}};s.n=function(a){t.n(this.b,a);return this};
|
||||
s.q=function(a){t.q(this.b,a);return this};s.show=function(){this.b.style.display="block";return this};s.X=function(){this.b.style.display="none";return this};function G(a){a.q("vjs-lock-showing")}s.disable=function(){this.X();this.show=m()};s.width=function(a,c){return H(this,"width",a,c)};s.height=function(a,c){return H(this,"height",a,c)};s.pd=function(a,c){return this.width(a,f).height(c)};
|
||||
function H(a,c,d,e){if(d!==b)return a.b.style[c]=-1!==(""+d).indexOf("%")||-1!==(""+d).indexOf("px")?d:"auto"===d?"":d+"px",e||a.l("resize"),a;if(!a.b)return 0;d=a.b.style[c];e=d.indexOf("px");return-1!==e?parseInt(d.slice(0,e),10):parseInt(a.b["offset"+t.ba(c)],10)}
|
||||
function I(a){var c,d,e,g,h,j,n,q;c=0;d=k;a.d("touchstart",function(a){1===a.touches.length&&(d=a.touches[0],c=(new Date).getTime(),g=f)});a.d("touchmove",function(a){1<a.touches.length?g=l:d&&(j=a.touches[0].pageX-d.pageX,n=a.touches[0].pageY-d.pageY,q=Math.sqrt(j*j+n*n),22<q&&(g=l))});h=function(){g=l};a.d("touchleave",h);a.d("touchcancel",h);a.d("touchend",function(a){d=k;g===f&&(e=(new Date).getTime()-c,250>e&&(a.preventDefault(),this.l("tap")))})}
|
||||
t.t=t.a.extend({j:function(a,c){t.a.call(this,a,c);I(this);this.d("tap",this.r);this.d("click",this.r);this.d("focus",this.Za);this.d("blur",this.Ya)}});s=t.t.prototype;
|
||||
s.e=function(a,c){var d;c=t.h.A({className:this.T(),role:"button","aria-live":"polite",tabIndex:0},c);d=t.a.prototype.e.call(this,a,c);c.innerHTML||(this.v=t.e("div",{className:"vjs-control-content"}),this.yb=t.e("span",{className:"vjs-control-text",innerHTML:this.s(this.ua)||"Need Text"}),this.v.appendChild(this.yb),d.appendChild(this.v));return d};s.T=function(){return"vjs-control "+t.a.prototype.T.call(this)};s.r=m();s.Za=function(){t.d(document,"keyup",t.bind(this,this.ea))};
|
||||
s.ea=function(a){if(32==a.which||13==a.which)a.preventDefault(),this.r()};s.Ya=function(){t.p(document,"keyup",t.bind(this,this.ea))};
|
||||
t.Q=t.a.extend({j:function(a,c){t.a.call(this,a,c);this.fd=this.ka(this.k.barName);this.handle=this.ka(this.k.handleName);this.d("mousedown",this.$a);this.d("touchstart",this.$a);this.d("focus",this.Za);this.d("blur",this.Ya);this.d("click",this.r);this.c.d("controlsvisible",t.bind(this,this.update));a.d(this.Cc,t.bind(this,this.update));this.S={};this.S.move=t.bind(this,this.ab);this.S.end=t.bind(this,this.Ob)}});s=t.Q.prototype;
|
||||
s.e=function(a,c){c=c||{};c.className+=" vjs-slider";c=t.h.A({role:"slider","aria-valuenow":0,"aria-valuemin":0,"aria-valuemax":100,tabIndex:0},c);return t.a.prototype.e.call(this,a,c)};s.$a=function(a){a.preventDefault();t.gd();this.n("vjs-sliding");t.d(document,"mousemove",this.S.move);t.d(document,"mouseup",this.S.end);t.d(document,"touchmove",this.S.move);t.d(document,"touchend",this.S.end);this.ab(a)};s.ab=m();
|
||||
s.Ob=function(){t.ge();this.q("vjs-sliding");t.p(document,"mousemove",this.S.move,l);t.p(document,"mouseup",this.S.end,l);t.p(document,"touchmove",this.S.move,l);t.p(document,"touchend",this.S.end,l);this.update()};s.update=function(){if(this.b){var a,c=this.Gb(),d=this.handle,e=this.fd;isNaN(c)&&(c=0);a=c;if(d){a=this.b.offsetWidth;var g=d.w().offsetWidth;a=g?g/a:0;c*=1-a;a=c+a/2;d.w().style.left=t.round(100*c,2)+"%"}e&&(e.w().style.width=t.round(100*a,2)+"%")}};
|
||||
function J(a,c){var d,e,g,h;d=a.b;e=t.ud(d);h=g=d.offsetWidth;d=a.handle;if(a.options().vertical)return h=e.top,e=c.changedTouches?c.changedTouches[0].pageY:c.pageY,d&&(d=d.w().offsetHeight,h+=d/2,g-=d),Math.max(0,Math.min(1,(h-e+g)/g));g=e.left;e=c.changedTouches?c.changedTouches[0].pageX:c.pageX;d&&(d=d.w().offsetWidth,g+=d/2,h-=d);return Math.max(0,Math.min(1,(e-g)/h))}s.Za=function(){t.d(document,"keyup",t.bind(this,this.ea))};
|
||||
s.ea=function(a){if(37==a.which||40==a.which)a.preventDefault(),this.Kc();else if(38==a.which||39==a.which)a.preventDefault(),this.Lc()};s.Ya=function(){t.p(document,"keyup",t.bind(this,this.ea))};s.r=function(a){a.stopImmediatePropagation();a.preventDefault()};t.$=t.a.extend();t.$.prototype.defaultValue=0;
|
||||
t.$.prototype.e=function(a,c){c=c||{};c.className+=" vjs-slider-handle";c=t.h.A({innerHTML:'<span class="vjs-control-text">'+this.defaultValue+"</span>"},c);return t.a.prototype.e.call(this,"div",c)};t.ha=t.a.extend();function ca(a,c){a.R(c);c.d("click",t.bind(a,function(){G(this)}))}
|
||||
t.ha.prototype.e=function(){var a=this.options().mc||"ul";this.v=t.e(a,{className:"vjs-menu-content"});a=t.a.prototype.e.call(this,"div",{append:this.v,className:"vjs-menu"});a.appendChild(this.v);t.d(a,"click",function(a){a.preventDefault();a.stopImmediatePropagation()});return a};t.I=t.t.extend({j:function(a,c){t.t.call(this,a,c);this.selected(c.selected)}});t.I.prototype.e=function(a,c){return t.t.prototype.e.call(this,"li",t.h.A({className:"vjs-menu-item",innerHTML:this.k.label},c))};
|
||||
t.I.prototype.r=function(){this.selected(f)};t.I.prototype.selected=function(a){a?(this.n("vjs-selected"),this.b.setAttribute("aria-selected",f)):(this.q("vjs-selected"),this.b.setAttribute("aria-selected",l))};t.L=t.t.extend({j:function(a,c){t.t.call(this,a,c);this.Ba=this.xa();this.R(this.Ba);this.O&&0===this.O.length&&this.X();this.d("keyup",this.ea);this.b.setAttribute("aria-haspopup",f);this.b.setAttribute("role","button")}});s=t.L.prototype;s.ta=l;
|
||||
s.xa=function(){var a=new t.ha(this.c);this.options().title&&a.ja().appendChild(t.e("li",{className:"vjs-menu-title",innerHTML:t.ba(this.options().title),de:-1}));if(this.O=this.createItems())for(var c=0;c<this.O.length;c++)ca(a,this.O[c]);return a};s.wa=m();s.T=function(){return this.className+" vjs-menu-button "+t.t.prototype.T.call(this)};s.Za=m();s.Ya=m();s.r=function(){this.V("mouseout",t.bind(this,function(){G(this.Ba);this.b.blur()}));this.ta?K(this):L(this)};
|
||||
s.ea=function(a){a.preventDefault();32==a.which||13==a.which?this.ta?K(this):L(this):27==a.which&&this.ta&&K(this)};function L(a){a.ta=f;a.Ba.n("vjs-lock-showing");a.b.setAttribute("aria-pressed",f);a.O&&0<a.O.length&&a.O[0].w().focus()}function K(a){a.ta=l;G(a.Ba);a.b.setAttribute("aria-pressed",l)}t.G=function(a){"number"===typeof a?this.code=a:"string"===typeof a?this.message=a:"object"===typeof a&&t.h.A(this,a);this.message||(this.message=t.G.nd[this.code]||"")};t.G.prototype.code=0;
|
||||
t.G.prototype.message="";t.G.prototype.status=k;t.G.Ta="MEDIA_ERR_CUSTOM MEDIA_ERR_ABORTED MEDIA_ERR_NETWORK MEDIA_ERR_DECODE MEDIA_ERR_SRC_NOT_SUPPORTED MEDIA_ERR_ENCRYPTED".split(" ");
|
||||
t.G.nd={1:"You aborted the video playback",2:"A network error caused the video download to fail part-way.",3:"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.",4:"The video could not be loaded, either because the server or network failed or because the format is not supported.",5:"The video is encrypted and we do not have the keys to decrypt it."};for(var M=0;M<t.G.Ta.length;M++)t.G[t.G.Ta[M]]=M,t.G.prototype[t.G.Ta[M]]=M;
|
||||
var N,O,P,Q;
|
||||
N=["requestFullscreen exitFullscreen fullscreenElement fullscreenEnabled fullscreenchange fullscreenerror".split(" "),"webkitRequestFullscreen webkitExitFullscreen webkitFullscreenElement webkitFullscreenEnabled webkitfullscreenchange webkitfullscreenerror".split(" "),"webkitRequestFullScreen webkitCancelFullScreen webkitCurrentFullScreenElement webkitCancelFullScreen webkitfullscreenchange webkitfullscreenerror".split(" "),"mozRequestFullScreen mozCancelFullScreen mozFullScreenElement mozFullScreenEnabled mozfullscreenchange mozfullscreenerror".split(" "),"msRequestFullscreen msExitFullscreen msFullscreenElement msFullscreenEnabled MSFullscreenChange MSFullscreenError".split(" ")];
|
||||
O=N[0];for(Q=0;Q<N.length;Q++)if(N[Q][1]in document){P=N[Q];break}if(P){t.Qa.Fb={};for(Q=0;Q<P.length;Q++)t.Qa.Fb[O[Q]]=P[Q]}
|
||||
t.Player=t.a.extend({j:function(a,c,d){this.P=a;a.id=a.id||"vjs_video_"+t.z++;this.ee=a&&t.Aa(a);c=t.h.A(da(a),c);this.Va=c.language||t.options.language;this.Dd=c.languages||t.options.languages;this.C={};this.Dc=c.poster;this.zb=c.controls;a.controls=l;c.Gc=l;t.a.call(this,this,c,d);this.controls()?this.n("vjs-controls-enabled"):this.n("vjs-controls-disabled");t.Ca[this.U]=this;c.plugins&&t.h.Z(c.plugins,function(a,c){this[a](c)},this);var e,g,h,j,n,q;e=t.bind(this,this.reportUserActivity);this.d("mousedown",
|
||||
function(){e();clearInterval(g);g=setInterval(e,250)});this.d("mousemove",function(a){if(a.screenX!=n||a.screenY!=q)n=a.screenX,q=a.screenY,e()});this.d("mouseup",function(){e();clearInterval(g)});this.d("keydown",e);this.d("keyup",e);h=setInterval(t.bind(this,function(){this.pa&&(this.pa=l,this.userActive(f),clearTimeout(j),j=setTimeout(t.bind(this,function(){this.pa||this.userActive(l)}),2E3))}),250);this.d("dispose",function(){clearInterval(h);clearTimeout(j)})}});s=t.Player.prototype;
|
||||
s.language=function(a){if(a===b)return this.Va;this.Va=a;return this};s.Wa=p("Dd");s.k=t.options;s.dispose=function(){this.l("dispose");this.p("dispose");t.Ca[this.U]=k;this.P&&this.P.player&&(this.P.player=k);this.b&&this.b.player&&(this.b.player=k);clearInterval(this.bb);this.Ea();this.i&&this.i.dispose();t.a.prototype.dispose.call(this)};
|
||||
function da(a){var c={sources:[],tracks:[]};t.h.A(c,t.Aa(a));if(a.hasChildNodes()){var d,e,g,h;a=a.childNodes;g=0;for(h=a.length;g<h;g++)d=a[g],e=d.nodeName.toLowerCase(),"source"===e?c.sources.push(t.Aa(d)):"track"===e&&c.tracks.push(t.Aa(d))}return c}
|
||||
s.e=function(){var a=this.b=t.a.prototype.e.call(this,"div"),c=this.P,d;c.removeAttribute("width");c.removeAttribute("height");if(c.hasChildNodes()){var e,g,h,j,n;e=c.childNodes;g=e.length;for(n=[];g--;)h=e[g],j=h.nodeName.toLowerCase(),"track"===j&&n.push(h);for(e=0;e<n.length;e++)c.removeChild(n[e])}d=t.Aa(c);t.h.Z(d,function(c){a.setAttribute(c,d[c])});c.id+="_html5_api";c.className="vjs-tech";c.player=a.player=this;this.n("vjs-paused");this.width(this.k.width,f);this.height(this.k.height,f);c.parentNode&&
|
||||
c.parentNode.insertBefore(a,c);t.Hb(c,a);this.b=a;this.d("loadstart",this.Kd);this.d("waiting",this.Qd);this.d(["canplay","canplaythrough","playing","ended"],this.Pd);this.d("seeking",this.Nd);this.d("seeked",this.Md);this.d("ended",this.Gd);this.d("play",this.Qb);this.d("firstplay",this.Id);this.d("pause",this.Pb);this.d("progress",this.Ld);this.d("durationchange",this.Ac);this.d("fullscreenchange",this.Jd);return a};
|
||||
function R(a,c,d){a.i&&(a.la=l,a.Lb&&(a.Lb=l,clearInterval(a.bb)),a.Mb&&S(a),a.i.dispose(),a.i=l);"Html5"!==c&&a.P&&(t.g.Cb(a.P),a.P=k);a.fb=c;a.la=l;var e=t.h.A({source:d,parentEl:a.b},a.k[c.toLowerCase()]);d&&(a.oc=d.type,d.src==a.C.src&&0<a.C.currentTime&&(e.startTime=a.C.currentTime),a.C.src=d.src);a.i=new window.videojs[c](a,e);a.i.J(function(){this.c.Ha();if(!this.o.progressEvents){var a=this.c;a.Lb=f;a.bb=setInterval(t.bind(a,function(){var a=this.bufferedPercent();this.C.bufferedPercent!=
|
||||
a&&this.l("progress");this.C.bufferedPercent=a;1==a&&clearInterval(this.bb)}),500);a.i&&a.i.V("progress",function(){this.o.progressEvents=f;var a=this.c;a.Lb=l;clearInterval(a.bb)})}this.o.timeupdateEvents||(a=this.c,a.Mb=f,a.d("play",a.Oc),a.d("pause",a.Ea),a.i&&a.i.V("timeupdate",function(){this.o.timeupdateEvents=f;S(this.c)}))})}function S(a){a.Mb=l;a.Ea();a.p("play",a.Oc);a.p("pause",a.Ea)}s.Oc=function(){this.nc&&this.Ea();this.nc=setInterval(t.bind(this,function(){this.l("timeupdate")}),250)};
|
||||
s.Ea=function(){clearInterval(this.nc);this.l("timeupdate")};s.Kd=function(){this.error(k);this.paused()?(ea(this,l),this.V("play",function(){ea(this,f)})):this.l("firstplay")};s.vc=l;function ea(a,c){c!==b&&a.vc!==c&&((a.vc=c)?(a.n("vjs-has-started"),a.l("firstplay")):a.q("vjs-has-started"))}s.Qb=function(){this.q("vjs-paused");this.n("vjs-playing")};s.Qd=function(){this.n("vjs-waiting")};s.Pd=function(){this.q("vjs-waiting")};s.Nd=function(){this.n("vjs-seeking")};s.Md=function(){this.q("vjs-seeking")};
|
||||
s.Id=function(){this.k.starttime&&this.currentTime(this.k.starttime);this.n("vjs-has-started")};s.Pb=function(){this.q("vjs-playing");this.n("vjs-paused")};s.Ld=function(){1==this.bufferedPercent()&&this.l("loadedalldata")};s.Gd=function(){this.k.loop&&(this.currentTime(0),this.play())};s.Ac=function(){var a=T(this,"duration");a&&(0>a&&(a=Infinity),this.duration(a),Infinity===a?this.n("vjs-live"):this.q("vjs-live"))};s.Jd=function(){this.isFullscreen()?this.n("vjs-fullscreen"):this.q("vjs-fullscreen")};
|
||||
function U(a,c,d){if(a.i&&!a.i.la)a.i.J(function(){this[c](d)});else try{a.i[c](d)}catch(e){throw t.log(e),e;}}function T(a,c){if(a.i&&a.i.la)try{return a.i[c]()}catch(d){throw a.i[c]===b?t.log("Video.js: "+c+" method not defined for "+a.fb+" playback technology.",d):"TypeError"==d.name?(t.log("Video.js: "+c+" unavailable on "+a.fb+" playback technology element.",d),a.i.la=l):t.log(d),d;}}s.play=function(){U(this,"play");return this};s.pause=function(){U(this,"pause");return this};
|
||||
s.paused=function(){return T(this,"paused")===l?l:f};s.currentTime=function(a){return a!==b?(U(this,"setCurrentTime",a),this.Mb&&this.l("timeupdate"),this):this.C.currentTime=T(this,"currentTime")||0};s.duration=function(a){if(a!==b)return this.C.duration=parseFloat(a),this;this.C.duration===b&&this.Ac();return this.C.duration||0};s.remainingTime=function(){return this.duration()-this.currentTime()};s.buffered=function(){var a=T(this,"buffered");if(!a||!a.length)a=t.Ab(0,0);return a};
|
||||
s.bufferedPercent=function(){var a=this.duration(),c=this.buffered(),d=0,e,g;if(!a)return 0;for(var h=0;h<c.length;h++)e=c.start(h),g=c.end(h),g>a&&(g=a),d+=g-e;return d/a};s.volume=function(a){if(a!==b)return a=Math.max(0,Math.min(1,parseFloat(a))),this.C.volume=a,U(this,"setVolume",a),t.Xd(a),this;a=parseFloat(T(this,"volume"));return isNaN(a)?1:a};s.muted=function(a){return a!==b?(U(this,"setMuted",a),this):T(this,"muted")||l};s.Fa=function(){return T(this,"supportsFullScreen")||l};s.xc=l;
|
||||
s.isFullscreen=function(a){return a!==b?(this.xc=!!a,this):this.xc};s.isFullScreen=function(a){t.log.warn('player.isFullScreen() has been deprecated, use player.isFullscreen() with a lowercase "s")');return this.isFullscreen(a)};
|
||||
s.requestFullscreen=function(){var a=t.Qa.Fb;this.isFullscreen(f);a?(t.d(document,a.fullscreenchange,t.bind(this,function(c){this.isFullscreen(document[a.fullscreenElement]);this.isFullscreen()===l&&t.p(document,a.fullscreenchange,arguments.callee);this.l("fullscreenchange")})),this.b[a.requestFullscreen]()):this.i.Fa()?U(this,"enterFullScreen"):(this.qc(),this.l("fullscreenchange"));return this};
|
||||
s.exitFullscreen=function(){var a=t.Qa.Fb;this.isFullscreen(l);if(a)document[a.exitFullscreen]();else this.i.Fa()?U(this,"exitFullScreen"):(this.Db(),this.l("fullscreenchange"));return this};s.qc=function(){this.zd=f;this.qd=document.documentElement.style.overflow;t.d(document,"keydown",t.bind(this,this.sc));document.documentElement.style.overflow="hidden";t.n(document.body,"vjs-full-window");this.l("enterFullWindow")};
|
||||
s.sc=function(a){27===a.keyCode&&(this.isFullscreen()===f?this.exitFullscreen():this.Db())};s.Db=function(){this.zd=l;t.p(document,"keydown",this.sc);document.documentElement.style.overflow=this.qd;t.q(document.body,"vjs-full-window");this.l("exitFullWindow")};
|
||||
s.src=function(a){if(a===b)return T(this,"src");t.h.isArray(a)?fa(this,a):"string"===typeof a?this.src({src:a}):a instanceof Object&&(a.type&&!window.videojs[this.fb].canPlaySource(a)?fa(this,[a]):(this.C.src=a.src,this.oc=a.type||"",this.J(function(){U(this,"src",a.src);"auto"==this.k.preload&&this.load();this.k.autoplay&&this.play()})));return this};
|
||||
function fa(a,c){var d;a:{d=0;for(var e=a.k.techOrder;d<e.length;d++){var g=t.ba(e[d]),h=window.videojs[g];if(h){if(h.isSupported())for(var j=0,n=c;j<n.length;j++){var q=n[j];if(h.canPlaySource(q)){d={source:q,i:g};break a}}}else t.log.error('The "'+g+'" tech is undefined. Skipped browser support check for that tech.')}d=l}d?d.i===a.fb?a.src(d.source):R(a,d.i,d.source):(a.error({code:4,message:a.options().notSupportedMessage}),a.Ha())}s.load=function(){U(this,"load");return this};
|
||||
s.currentSrc=function(){return T(this,"currentSrc")||this.C.src||""};s.ld=function(){return this.oc||""};s.Da=function(a){return a!==b?(U(this,"setPreload",a),this.k.preload=a,this):T(this,"preload")};s.autoplay=function(a){return a!==b?(U(this,"setAutoplay",a),this.k.autoplay=a,this):T(this,"autoplay")};s.loop=function(a){return a!==b?(U(this,"setLoop",a),this.k.loop=a,this):T(this,"loop")};s.poster=function(a){if(a===b)return this.Dc;this.Dc=a;U(this,"setPoster",a);this.l("posterchange")};
|
||||
s.controls=function(a){return a!==b?(a=!!a,this.zb!==a&&((this.zb=a)?(this.q("vjs-controls-disabled"),this.n("vjs-controls-enabled"),this.l("controlsenabled")):(this.q("vjs-controls-enabled"),this.n("vjs-controls-disabled"),this.l("controlsdisabled"))),this):this.zb};t.Player.prototype.Ub;s=t.Player.prototype;
|
||||
s.usingNativeControls=function(a){return a!==b?(a=!!a,this.Ub!==a&&((this.Ub=a)?(this.n("vjs-using-native-controls"),this.l("usingnativecontrols")):(this.q("vjs-using-native-controls"),this.l("usingcustomcontrols"))),this):this.Ub};s.da=k;s.error=function(a){if(a===b)return this.da;if(a===k)return this.da=a,this.q("vjs-error"),this;this.da=a instanceof t.G?a:new t.G(a);this.l("error");this.n("vjs-error");t.log.error("(CODE:"+this.da.code+" "+t.G.Ta[this.da.code]+")",this.da.message,this.da);return this};
|
||||
s.ended=function(){return T(this,"ended")};s.seeking=function(){return T(this,"seeking")};s.pa=f;s.reportUserActivity=function(){this.pa=f};s.Tb=f;s.userActive=function(a){return a!==b?(a=!!a,a!==this.Tb&&((this.Tb=a)?(this.pa=f,this.q("vjs-user-inactive"),this.n("vjs-user-active"),this.l("useractive")):(this.pa=l,this.i&&this.i.V("mousemove",function(a){a.stopPropagation();a.preventDefault()}),this.q("vjs-user-active"),this.n("vjs-user-inactive"),this.l("userinactive"))),this):this.Tb};
|
||||
s.playbackRate=function(a){return a!==b?(U(this,"setPlaybackRate",a),this):this.i&&this.i.o&&this.i.o.playbackRate?T(this,"playbackRate"):1};t.Ka=t.a.extend();t.Ka.prototype.k={oe:"play",children:{playToggle:{},currentTimeDisplay:{},timeDivider:{},durationDisplay:{},remainingTimeDisplay:{},liveDisplay:{},progressControl:{},fullscreenToggle:{},volumeControl:{},muteToggle:{},playbackRateMenuButton:{}}};t.Ka.prototype.e=function(){return t.e("div",{className:"vjs-control-bar"})};
|
||||
t.Zb=t.a.extend({j:function(a,c){t.a.call(this,a,c)}});t.Zb.prototype.e=function(){var a=t.a.prototype.e.call(this,"div",{className:"vjs-live-controls vjs-control"});this.v=t.e("div",{className:"vjs-live-display",innerHTML:'<span class="vjs-control-text">'+this.s("Stream Type")+"</span>"+this.s("LIVE"),"aria-live":"off"});a.appendChild(this.v);return a};t.bc=t.t.extend({j:function(a,c){t.t.call(this,a,c);a.d("play",t.bind(this,this.Qb));a.d("pause",t.bind(this,this.Pb))}});s=t.bc.prototype;s.ua="Play";
|
||||
s.T=function(){return"vjs-play-control "+t.t.prototype.T.call(this)};s.r=function(){this.c.paused()?this.c.play():this.c.pause()};s.Qb=function(){t.q(this.b,"vjs-paused");t.n(this.b,"vjs-playing");this.b.children[0].children[0].innerHTML=this.s("Pause")};s.Pb=function(){t.q(this.b,"vjs-playing");t.n(this.b,"vjs-paused");this.b.children[0].children[0].innerHTML=this.s("Play")};t.ib=t.a.extend({j:function(a,c){t.a.call(this,a,c);a.d("timeupdate",t.bind(this,this.ga))}});
|
||||
t.ib.prototype.e=function(){var a=t.a.prototype.e.call(this,"div",{className:"vjs-current-time vjs-time-controls vjs-control"});this.v=t.e("div",{className:"vjs-current-time-display",innerHTML:'<span class="vjs-control-text">Current Time </span>0:00',"aria-live":"off"});a.appendChild(this.v);return a};t.ib.prototype.ga=function(){var a=this.c.eb?this.c.C.currentTime:this.c.currentTime();this.v.innerHTML='<span class="vjs-control-text">'+this.s("Current Time")+"</span> "+t.za(a,this.c.duration())};
|
||||
t.jb=t.a.extend({j:function(a,c){t.a.call(this,a,c);a.d("timeupdate",t.bind(this,this.ga))}});t.jb.prototype.e=function(){var a=t.a.prototype.e.call(this,"div",{className:"vjs-duration vjs-time-controls vjs-control"});this.v=t.e("div",{className:"vjs-duration-display",innerHTML:'<span class="vjs-control-text">'+this.s("Duration Time")+"</span> 0:00","aria-live":"off"});a.appendChild(this.v);return a};
|
||||
t.jb.prototype.ga=function(){var a=this.c.duration();a&&(this.v.innerHTML='<span class="vjs-control-text">'+this.s("Duration Time")+"</span> "+t.za(a))};t.hc=t.a.extend({j:function(a,c){t.a.call(this,a,c)}});t.hc.prototype.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-time-divider",innerHTML:"<div><span>/</span></div>"})};t.qb=t.a.extend({j:function(a,c){t.a.call(this,a,c);a.d("timeupdate",t.bind(this,this.ga))}});
|
||||
t.qb.prototype.e=function(){var a=t.a.prototype.e.call(this,"div",{className:"vjs-remaining-time vjs-time-controls vjs-control"});this.v=t.e("div",{className:"vjs-remaining-time-display",innerHTML:'<span class="vjs-control-text">'+this.s("Remaining Time")+"</span> -0:00","aria-live":"off"});a.appendChild(this.v);return a};t.qb.prototype.ga=function(){this.c.duration()&&(this.v.innerHTML='<span class="vjs-control-text">'+this.s("Remaining Time")+"</span> -"+t.za(this.c.remainingTime()))};
|
||||
t.La=t.t.extend({j:function(a,c){t.t.call(this,a,c)}});t.La.prototype.ua="Fullscreen";t.La.prototype.T=function(){return"vjs-fullscreen-control "+t.t.prototype.T.call(this)};t.La.prototype.r=function(){this.c.isFullscreen()?(this.c.exitFullscreen(),this.yb.innerHTML=this.s("Fullscreen")):(this.c.requestFullscreen(),this.yb.innerHTML=this.s("Non-Fullscreen"))};t.pb=t.a.extend({j:function(a,c){t.a.call(this,a,c)}});t.pb.prototype.k={children:{seekBar:{}}};
|
||||
t.pb.prototype.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-progress-control vjs-control"})};t.dc=t.Q.extend({j:function(a,c){t.Q.call(this,a,c);a.d("timeupdate",t.bind(this,this.oa));a.J(t.bind(this,this.oa))}});s=t.dc.prototype;s.k={children:{loadProgressBar:{},playProgressBar:{},seekHandle:{}},barName:"playProgressBar",handleName:"seekHandle"};s.Cc="timeupdate";s.e=function(){return t.Q.prototype.e.call(this,"div",{className:"vjs-progress-holder","aria-label":"video progress bar"})};
|
||||
s.oa=function(){var a=this.c.eb?this.c.C.currentTime:this.c.currentTime();this.b.setAttribute("aria-valuenow",t.round(100*this.Gb(),2));this.b.setAttribute("aria-valuetext",t.za(a,this.c.duration()))};s.Gb=function(){return this.c.currentTime()/this.c.duration()};s.$a=function(a){t.Q.prototype.$a.call(this,a);this.c.eb=f;this.ie=!this.c.paused();this.c.pause()};s.ab=function(a){a=J(this,a)*this.c.duration();a==this.c.duration()&&(a-=0.1);this.c.currentTime(a)};
|
||||
s.Ob=function(a){t.Q.prototype.Ob.call(this,a);this.c.eb=l;this.ie&&this.c.play()};s.Lc=function(){this.c.currentTime(this.c.currentTime()+5)};s.Kc=function(){this.c.currentTime(this.c.currentTime()-5)};t.mb=t.a.extend({j:function(a,c){t.a.call(this,a,c);a.d("progress",t.bind(this,this.update))}});t.mb.prototype.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-load-progress",innerHTML:'<span class="vjs-control-text"><span>'+this.s("Loaded")+"</span>: 0%</span>"})};
|
||||
t.mb.prototype.update=function(){var a,c,d,e,g=this.c.buffered();a=this.c.duration();var h,j=this.c;h=j.buffered();j=j.duration();h=h.end(h.length-1);h>j&&(h=j);j=this.b.children;this.b.style.width=100*(h/a||0)+"%";for(a=0;a<g.length;a++)c=g.start(a),d=g.end(a),(e=j[a])||(e=this.b.appendChild(t.e())),e.style.left=100*(c/h||0)+"%",e.style.width=100*((d-c)/h||0)+"%";for(a=j.length;a>g.length;a--)this.b.removeChild(j[a-1])};t.ac=t.a.extend({j:function(a,c){t.a.call(this,a,c)}});
|
||||
t.ac.prototype.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-play-progress",innerHTML:'<span class="vjs-control-text"><span>'+this.s("Progress")+"</span>: 0%</span>"})};t.Na=t.$.extend({j:function(a,c){t.$.call(this,a,c);a.d("timeupdate",t.bind(this,this.ga))}});t.Na.prototype.defaultValue="00:00";t.Na.prototype.e=function(){return t.$.prototype.e.call(this,"div",{className:"vjs-seek-handle","aria-live":"off"})};
|
||||
t.Na.prototype.ga=function(){var a=this.c.eb?this.c.C.currentTime:this.c.currentTime();this.b.innerHTML='<span class="vjs-control-text">'+t.za(a,this.c.duration())+"</span>"};t.sb=t.a.extend({j:function(a,c){t.a.call(this,a,c);a.i&&(a.i.o&&a.i.o.volumeControl===l)&&this.n("vjs-hidden");a.d("loadstart",t.bind(this,function(){a.i.o&&a.i.o.volumeControl===l?this.n("vjs-hidden"):this.q("vjs-hidden")}))}});t.sb.prototype.k={children:{volumeBar:{}}};
|
||||
t.sb.prototype.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-volume-control vjs-control"})};t.rb=t.Q.extend({j:function(a,c){t.Q.call(this,a,c);a.d("volumechange",t.bind(this,this.oa));a.J(t.bind(this,this.oa))}});s=t.rb.prototype;s.oa=function(){this.b.setAttribute("aria-valuenow",t.round(100*this.c.volume(),2));this.b.setAttribute("aria-valuetext",t.round(100*this.c.volume(),2)+"%")};s.k={children:{volumeLevel:{},volumeHandle:{}},barName:"volumeLevel",handleName:"volumeHandle"};
|
||||
s.Cc="volumechange";s.e=function(){return t.Q.prototype.e.call(this,"div",{className:"vjs-volume-bar","aria-label":"volume level"})};s.ab=function(a){this.c.muted()&&this.c.muted(l);this.c.volume(J(this,a))};s.Gb=function(){return this.c.muted()?0:this.c.volume()};s.Lc=function(){this.c.volume(this.c.volume()+0.1)};s.Kc=function(){this.c.volume(this.c.volume()-0.1)};t.ic=t.a.extend({j:function(a,c){t.a.call(this,a,c)}});
|
||||
t.ic.prototype.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-volume-level",innerHTML:'<span class="vjs-control-text"></span>'})};t.tb=t.$.extend();t.tb.prototype.defaultValue="00:00";t.tb.prototype.e=function(){return t.$.prototype.e.call(this,"div",{className:"vjs-volume-handle"})};
|
||||
t.ia=t.t.extend({j:function(a,c){t.t.call(this,a,c);a.d("volumechange",t.bind(this,this.update));a.i&&(a.i.o&&a.i.o.volumeControl===l)&&this.n("vjs-hidden");a.d("loadstart",t.bind(this,function(){a.i.o&&a.i.o.volumeControl===l?this.n("vjs-hidden"):this.q("vjs-hidden")}))}});t.ia.prototype.e=function(){return t.t.prototype.e.call(this,"div",{className:"vjs-mute-control vjs-control",innerHTML:'<div><span class="vjs-control-text">'+this.s("Mute")+"</span></div>"})};
|
||||
t.ia.prototype.r=function(){this.c.muted(this.c.muted()?l:f)};t.ia.prototype.update=function(){var a=this.c.volume(),c=3;0===a||this.c.muted()?c=0:0.33>a?c=1:0.67>a&&(c=2);this.c.muted()?this.b.children[0].children[0].innerHTML!=this.s("Unmute")&&(this.b.children[0].children[0].innerHTML=this.s("Unmute")):this.b.children[0].children[0].innerHTML!=this.s("Mute")&&(this.b.children[0].children[0].innerHTML=this.s("Mute"));for(a=0;4>a;a++)t.q(this.b,"vjs-vol-"+a);t.n(this.b,"vjs-vol-"+c)};
|
||||
t.sa=t.L.extend({j:function(a,c){t.L.call(this,a,c);a.d("volumechange",t.bind(this,this.update));a.i&&(a.i.o&&a.i.o.Rc===l)&&this.n("vjs-hidden");a.d("loadstart",t.bind(this,function(){a.i.o&&a.i.o.Rc===l?this.n("vjs-hidden"):this.q("vjs-hidden")}));this.n("vjs-menu-button")}});t.sa.prototype.xa=function(){var a=new t.ha(this.c,{mc:"div"}),c=new t.rb(this.c,t.h.A({vertical:f},this.k.ue));a.R(c);return a};t.sa.prototype.r=function(){t.ia.prototype.r.call(this);t.L.prototype.r.call(this)};
|
||||
t.sa.prototype.e=function(){return t.t.prototype.e.call(this,"div",{className:"vjs-volume-menu-button vjs-menu-button vjs-control",innerHTML:'<div><span class="vjs-control-text">'+this.s("Mute")+"</span></div>"})};t.sa.prototype.update=t.ia.prototype.update;t.cc=t.L.extend({j:function(a,c){t.L.call(this,a,c);this.Qc();this.Pc();a.d("loadstart",t.bind(this,this.Qc));a.d("ratechange",t.bind(this,this.Pc))}});s=t.cc.prototype;
|
||||
s.e=function(){var a=t.a.prototype.e.call(this,"div",{className:"vjs-playback-rate vjs-menu-button vjs-control",innerHTML:'<div class="vjs-control-content"><span class="vjs-control-text">'+this.s("Playback Rate")+"</span></div>"});this.zc=t.e("div",{className:"vjs-playback-rate-value",innerHTML:1});a.appendChild(this.zc);return a};s.xa=function(){var a=new t.ha(this.m()),c=this.m().options().playbackRates;if(c)for(var d=c.length-1;0<=d;d--)a.R(new t.ob(this.m(),{rate:c[d]+"x"}));return a};
|
||||
s.oa=function(){this.w().setAttribute("aria-valuenow",this.m().playbackRate())};s.r=function(){for(var a=this.m().playbackRate(),c=this.m().options().playbackRates,d=c[0],e=0;e<c.length;e++)if(c[e]>a){d=c[e];break}this.m().playbackRate(d)};function ga(a){return a.m().i&&a.m().i.o.playbackRate&&a.m().options().playbackRates&&0<a.m().options().playbackRates.length}s.Qc=function(){ga(this)?this.q("vjs-hidden"):this.n("vjs-hidden")};
|
||||
s.Pc=function(){ga(this)&&(this.zc.innerHTML=this.m().playbackRate()+"x")};t.ob=t.I.extend({mc:"button",j:function(a,c){var d=this.label=c.rate,e=this.Ec=parseFloat(d,10);c.label=d;c.selected=1===e;t.I.call(this,a,c);this.m().d("ratechange",t.bind(this,this.update))}});t.ob.prototype.r=function(){t.I.prototype.r.call(this);this.m().playbackRate(this.Ec)};t.ob.prototype.update=function(){this.selected(this.m().playbackRate()==this.Ec)};
|
||||
t.Ma=t.t.extend({j:function(a,c){t.t.call(this,a,c);a.poster()&&this.src(a.poster());(!a.poster()||!a.controls())&&this.X();a.d("posterchange",t.bind(this,function(){this.src(a.poster())}));a.d("play",t.bind(this,this.X))}});var ha="backgroundSize"in t.B.style;t.Ma.prototype.e=function(){var a=t.e("div",{className:"vjs-poster",tabIndex:-1});ha||a.appendChild(t.e("img"));return a};t.Ma.prototype.src=function(a){var c=this.w();a!==b&&(ha?c.style.backgroundImage='url("'+a+'")':c.firstChild.src=a)};
|
||||
t.Ma.prototype.r=function(){this.m().controls()&&this.c.play()};t.$b=t.a.extend({j:function(a,c){t.a.call(this,a,c)}});t.$b.prototype.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-loading-spinner"})};t.gb=t.t.extend();t.gb.prototype.e=function(){return t.t.prototype.e.call(this,"div",{className:"vjs-big-play-button",innerHTML:'<span aria-hidden="true"></span>',"aria-label":"play video"})};t.gb.prototype.r=function(){this.c.play()};
|
||||
t.kb=t.a.extend({j:function(a,c){t.a.call(this,a,c);this.update();a.d("error",t.bind(this,this.update))}});t.kb.prototype.e=function(){var a=t.a.prototype.e.call(this,"div",{className:"vjs-error-display"});this.v=t.e("div");a.appendChild(this.v);return a};t.kb.prototype.update=function(){this.m().error()&&(this.v.innerHTML=this.s(this.m().error().message))};
|
||||
t.u=t.a.extend({j:function(a,c,d){c=c||{};c.Gc=l;t.a.call(this,a,c,d);var e,g;g=this;e=this.m();a=function(){if(e.controls()&&!e.usingNativeControls()){var a;g.d("mousedown",g.r);g.d("touchstart",function(){a=this.c.userActive()});g.d("touchmove",function(){a&&this.m().reportUserActivity()});g.d("touchend",function(a){a.preventDefault()});I(g);g.d("tap",g.Od)}};c=t.bind(g,g.Ud);this.J(a);e.d("controlsenabled",a);e.d("controlsdisabled",c);this.J(function(){this.networkState&&0<this.networkState()&&
|
||||
this.m().l("loadstart")})}});s=t.u.prototype;s.Ud=function(){this.p("tap");this.p("touchstart");this.p("touchmove");this.p("touchleave");this.p("touchcancel");this.p("touchend");this.p("click");this.p("mousedown")};s.r=function(a){0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())};s.Od=function(){this.m().userActive(!this.m().userActive())};s.Ic=m();s.o={volumeControl:f,fullscreenResize:l,playbackRate:l,progressEvents:l,timeupdateEvents:l};t.media={};
|
||||
t.g=t.u.extend({j:function(a,c,d){this.o.volumeControl=t.g.jd();this.o.playbackRate=t.g.hd();this.o.movingMediaElementInDOM=!t.Xc;this.o.fullscreenResize=f;t.u.call(this,a,c,d);for(d=t.g.lb.length-1;0<=d;d--)t.d(this.b,t.g.lb[d],t.bind(this,this.sd));if((c=c.source)&&this.b.currentSrc!==c.src)this.b.src=c.src;if(t.fc&&a.options().nativeControlsForTouch!==l){var e,g,h,j;e=this;g=this.m();c=g.controls();e.b.controls=!!c;h=function(){e.b.controls=f};j=function(){e.b.controls=l};g.d("controlsenabled",
|
||||
h);g.d("controlsdisabled",j);c=function(){g.p("controlsenabled",h);g.p("controlsdisabled",j)};e.d("dispose",c);g.d("usingcustomcontrols",c);g.usingNativeControls(f)}a.J(function(){this.P&&(this.k.autoplay&&this.paused())&&(delete this.P.poster,this.play())});this.Ha()}});s=t.g.prototype;s.dispose=function(){t.g.Cb(this.b);t.u.prototype.dispose.call(this)};
|
||||
s.e=function(){var a=this.c,c=a.P,d;if(!c||this.o.movingMediaElementInDOM===l)c?(d=c.cloneNode(l),t.g.Cb(c),c=d,a.P=k):(c=t.e("video"),t.Hc(c,t.h.A(a.ee||{},{id:a.id()+"_html5_api","class":"vjs-tech"}))),c.player=a,t.Hb(c,a.w());d=["autoplay","preload","loop","muted"];for(var e=d.length-1;0<=e;e--){var g=d[e],h={};"undefined"!==typeof a.k[g]&&(h[g]=a.k[g]);t.Hc(c,h)}return c};s.sd=function(a){"error"==a.type?this.m().error(this.error().code):(a.bubbles=l,this.m().l(a))};s.play=function(){this.b.play()};
|
||||
s.pause=function(){this.b.pause()};s.paused=function(){return this.b.paused};s.currentTime=function(){return this.b.currentTime};s.Wd=function(a){try{this.b.currentTime=a}catch(c){t.log(c,"Video is not ready. (Video.js)")}};s.duration=function(){return this.b.duration||0};s.buffered=function(){return this.b.buffered};s.volume=function(){return this.b.volume};s.be=function(a){this.b.volume=a};s.muted=function(){return this.b.muted};s.Zd=function(a){this.b.muted=a};s.width=function(){return this.b.offsetWidth};
|
||||
s.height=function(){return this.b.offsetHeight};s.Fa=function(){return"function"==typeof this.b.webkitEnterFullScreen&&(/Android/.test(t.M)||!/Chrome|Mac OS X 10.5/.test(t.M))?f:l};s.pc=function(){var a=this.b;a.paused&&a.networkState<=a.je?(this.b.play(),setTimeout(function(){a.pause();a.webkitEnterFullScreen()},0)):a.webkitEnterFullScreen()};s.td=function(){this.b.webkitExitFullScreen()};s.src=function(a){this.b.src=a};s.load=function(){this.b.load()};s.currentSrc=function(){return this.b.currentSrc};
|
||||
s.poster=function(){return this.b.poster};s.Ic=function(a){this.b.poster=a};s.Da=function(){return this.b.Da};s.ae=function(a){this.b.Da=a};s.autoplay=function(){return this.b.autoplay};s.Vd=function(a){this.b.autoplay=a};s.controls=function(){return this.b.controls};s.loop=function(){return this.b.loop};s.Yd=function(a){this.b.loop=a};s.error=function(){return this.b.error};s.seeking=function(){return this.b.seeking};s.ended=function(){return this.b.ended};s.playbackRate=function(){return this.b.playbackRate};
|
||||
s.$d=function(a){this.b.playbackRate=a};s.networkState=function(){return this.b.networkState};t.g.isSupported=function(){try{t.B.volume=0.5}catch(a){return l}return!!t.B.canPlayType};t.g.wb=function(a){try{return!!t.B.canPlayType(a.type)}catch(c){return""}};t.g.jd=function(){var a=t.B.volume;t.B.volume=a/2+0.1;return a!==t.B.volume};t.g.hd=function(){var a=t.B.playbackRate;t.B.playbackRate=a/2+0.1;return a!==t.B.playbackRate};var V,ia=/^application\/(?:x-|vnd\.apple\.)mpegurl/i,ja=/^video\/mp4/i;
|
||||
t.g.Bc=function(){4<=t.Vb&&(V||(V=t.B.constructor.prototype.canPlayType),t.B.constructor.prototype.canPlayType=function(a){return a&&ia.test(a)?"maybe":V.call(this,a)});t.ad&&(V||(V=t.B.constructor.prototype.canPlayType),t.B.constructor.prototype.canPlayType=function(a){return a&&ja.test(a)?"maybe":V.call(this,a)})};t.g.he=function(){var a=t.B.constructor.prototype.canPlayType;t.B.constructor.prototype.canPlayType=V;V=k;return a};t.g.Bc();t.g.lb="loadstart suspend abort error emptied stalled loadedmetadata loadeddata canplay canplaythrough playing waiting seeking seeked ended durationchange timeupdate progress play pause ratechange volumechange".split(" ");
|
||||
t.g.Cb=function(a){if(a){a.player=k;for(a.parentNode&&a.parentNode.removeChild(a);a.hasChildNodes();)a.removeChild(a.firstChild);a.removeAttribute("src");if("function"===typeof a.load)try{a.load()}catch(c){}}};
|
||||
t.f=t.u.extend({j:function(a,c,d){t.u.call(this,a,c,d);var e=c.source;d=c.parentEl;var g=this.b=t.e("div",{id:a.id()+"_temp_flash"}),h=a.id()+"_flash_api",j=a.k,j=t.h.A({readyFunction:"videojs.Flash.onReady",eventProxyFunction:"videojs.Flash.onEvent",errorEventProxyFunction:"videojs.Flash.onError",autoplay:j.autoplay,preload:j.Da,loop:j.loop,muted:j.muted},c.flashVars),n=t.h.A({wmode:"opaque",bgcolor:"#000000"},c.params),h=t.h.A({id:h,name:h,"class":"vjs-tech"},c.attributes);e&&(e.type&&t.f.Bd(e.type)?
|
||||
(e=t.f.Mc(e.src),j.rtmpConnection=encodeURIComponent(e.xb),j.rtmpStream=encodeURIComponent(e.Sb)):j.src=encodeURIComponent(t.tc(e.src)));t.Hb(g,d);c.startTime&&this.J(function(){this.load();this.play();this.currentTime(c.startTime)});t.Wc&&this.J(function(){t.d(this.w(),"mousemove",t.bind(this,function(){this.m().l({type:"mousemove",bubbles:l})}))});a.d("stageclick",a.reportUserActivity);this.b=t.f.rd(c.swf,g,j,n,h)}});t.f.prototype.dispose=function(){t.u.prototype.dispose.call(this)};
|
||||
t.f.prototype.play=function(){this.b.vjs_play()};t.f.prototype.pause=function(){this.b.vjs_pause()};t.f.prototype.src=function(a){if(a===b)return this.currentSrc();t.f.Ad(a)?(a=t.f.Mc(a),this.qe(a.xb),this.re(a.Sb)):(a=t.tc(a),this.b.vjs_src(a));if(this.c.autoplay()){var c=this;setTimeout(function(){c.play()},0)}};t.f.prototype.setCurrentTime=function(a){this.Ed=a;this.b.vjs_setProperty("currentTime",a)};t.f.prototype.currentTime=function(){return this.seeking()?this.Ed||0:this.b.vjs_getProperty("currentTime")};
|
||||
t.f.prototype.currentSrc=function(){var a=this.b.vjs_getProperty("currentSrc");if(a==k){var c=this.rtmpConnection(),d=this.rtmpStream();c&&d&&(a=t.f.ce(c,d))}return a};t.f.prototype.load=function(){this.b.vjs_load()};t.f.prototype.poster=function(){this.b.vjs_getProperty("poster")};t.f.prototype.setPoster=m();t.f.prototype.buffered=function(){return t.Ab(0,this.b.vjs_getProperty("buffered"))};t.f.prototype.Fa=r(l);t.f.prototype.pc=r(l);
|
||||
function ka(){var a=W[X],c=a.charAt(0).toUpperCase()+a.slice(1);la["set"+c]=function(c){return this.b.vjs_setProperty(a,c)}}function ma(a){la[a]=function(){return this.b.vjs_getProperty(a)}}
|
||||
var la=t.f.prototype,W="rtmpConnection rtmpStream preload defaultPlaybackRate playbackRate autoplay loop mediaGroup controller controls volume muted defaultMuted".split(" "),na="error networkState readyState seeking initialTime duration startOffsetTime paused played seekable ended videoTracks audioTracks videoWidth videoHeight textTracks".split(" "),X;for(X=0;X<W.length;X++)ma(W[X]),ka();for(X=0;X<na.length;X++)ma(na[X]);t.f.isSupported=function(){return 10<=t.f.version()[0]};
|
||||
t.f.wb=function(a){if(!a.type)return"";a=a.type.replace(/;.*/,"").toLowerCase();if(a in t.f.vd||a in t.f.Nc)return"maybe"};t.f.vd={"video/flv":"FLV","video/x-flv":"FLV","video/mp4":"MP4","video/m4v":"MP4"};t.f.Nc={"rtmp/mp4":"MP4","rtmp/flv":"FLV"};t.f.onReady=function(a){var c;if(c=(a=t.w(a))&&a.parentNode&&a.parentNode.player)a.player=c,t.f.checkReady(c.i)};t.f.checkReady=function(a){a.w()&&(a.w().vjs_getProperty?a.Ha():setTimeout(function(){t.f.checkReady(a)},50))};t.f.onEvent=function(a,c){t.w(a).player.l(c)};
|
||||
t.f.onError=function(a,c){var d=t.w(a).player,e="FLASH: "+c;"srcnotfound"==c?d.error({code:4,message:e}):d.error(e)};t.f.version=function(){var a="0,0,0";try{a=(new window.ActiveXObject("ShockwaveFlash.ShockwaveFlash")).GetVariable("$version").replace(/\D+/g,",").match(/^,?(.+),?$/)[1]}catch(c){try{navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin&&(a=(navigator.plugins["Shockwave Flash 2.0"]||navigator.plugins["Shockwave Flash"]).description.replace(/\D+/g,",").match(/^,?(.+),?$/)[1])}catch(d){}}return a.split(",")};
|
||||
t.f.rd=function(a,c,d,e,g){a=t.f.xd(a,d,e,g);a=t.e("div",{innerHTML:a}).childNodes[0];d=c.parentNode;c.parentNode.replaceChild(a,c);var h=d.childNodes[0];setTimeout(function(){h.style.display="block"},1E3);return a};
|
||||
t.f.xd=function(a,c,d,e){var g="",h="",j="";c&&t.h.Z(c,function(a,c){g+=a+"="+c+"&"});d=t.h.A({movie:a,flashvars:g,allowScriptAccess:"always",allowNetworking:"all"},d);t.h.Z(d,function(a,c){h+='<param name="'+a+'" value="'+c+'" />'});e=t.h.A({data:a,width:"100%",height:"100%"},e);t.h.Z(e,function(a,c){j+=a+'="'+c+'" '});return'<object type="application/x-shockwave-flash"'+j+">"+h+"</object>"};t.f.ce=function(a,c){return a+"&"+c};
|
||||
t.f.Mc=function(a){var c={xb:"",Sb:""};if(!a)return c;var d=a.indexOf("&"),e;-1!==d?e=d+1:(d=e=a.lastIndexOf("/")+1,0===d&&(d=e=a.length));c.xb=a.substring(0,d);c.Sb=a.substring(e,a.length);return c};t.f.Bd=function(a){return a in t.f.Nc};t.f.cd=/^rtmp[set]?:\/\//i;t.f.Ad=function(a){return t.f.cd.test(a)};
|
||||
t.bd=t.a.extend({j:function(a,c,d){t.a.call(this,a,c,d);if(!a.k.sources||0===a.k.sources.length){c=0;for(d=a.k.techOrder;c<d.length;c++){var e=t.ba(d[c]),g=window.videojs[e];if(g&&g.isSupported()){R(a,e);break}}}else a.src(a.k.sources)}});t.Player.prototype.textTracks=function(){return this.Ga=this.Ga||[]};
|
||||
function oa(a,c,d,e,g){var h=a.Ga=a.Ga||[];g=g||{};g.kind=c;g.label=d;g.language=e;c=t.ba(c||"subtitles");var j=new window.videojs[c+"Track"](a,g);h.push(j);j.Bb()&&a.J(function(){setTimeout(function(){Y(j.m(),j.id())},0)})}function Y(a,c,d){for(var e=a.Ga,g=0,h=e.length,j,n;g<h;g++)j=e[g],j.id()===c?(j.show(),n=j):d&&(j.K()==d&&0<j.mode())&&j.disable();(c=n?n.K():d?d:l)&&a.l(c+"trackchange")}
|
||||
t.D=t.a.extend({j:function(a,c){t.a.call(this,a,c);this.U=c.id||"vjs_"+c.kind+"_"+c.language+"_"+t.z++;this.Jc=c.src;this.od=c["default"]||c.dflt;this.fe=c.title;this.Va=c.srclang;this.Cd=c.label;this.ca=[];this.ub=[];this.ma=this.na=0;this.c.d("fullscreenchange",t.bind(this,this.ed))}});s=t.D.prototype;s.K=p("H");s.src=p("Jc");s.Bb=p("od");s.title=p("fe");s.language=p("Va");s.label=p("Cd");s.kd=p("ca");s.dd=p("ub");s.readyState=p("na");s.mode=p("ma");
|
||||
s.ed=function(){this.b.style.fontSize=this.c.isFullScreen()?140*(screen.width/this.c.width())+"%":""};s.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-"+this.H+" vjs-text-track"})};s.show=function(){pa(this);this.ma=2;t.a.prototype.show.call(this)};s.X=function(){pa(this);this.ma=1;t.a.prototype.X.call(this)};
|
||||
s.disable=function(){2==this.ma&&this.X();this.c.p("timeupdate",t.bind(this,this.update,this.U));this.c.p("ended",t.bind(this,this.reset,this.U));this.reset();this.c.ka("textTrackDisplay").removeChild(this);this.ma=0};function pa(a){0===a.na&&a.load();0===a.ma&&(a.c.d("timeupdate",t.bind(a,a.update,a.U)),a.c.d("ended",t.bind(a,a.reset,a.U)),("captions"===a.H||"subtitles"===a.H)&&a.c.ka("textTrackDisplay").R(a))}
|
||||
s.load=function(){0===this.na&&(this.na=1,t.get(this.Jc,t.bind(this,this.Rd),t.bind(this,this.Hd)))};s.Hd=function(a){this.error=a;this.na=3;this.l("error")};s.Rd=function(a){var c,d;a=a.split("\n");for(var e="",g=1,h=a.length;g<h;g++)if(e=t.trim(a[g])){-1==e.indexOf("--\x3e")?(c=e,e=t.trim(a[++g])):c=this.ca.length;c={id:c,index:this.ca.length};d=e.split(/[\t ]+/);c.startTime=qa(d[0]);c.ya=qa(d[2]);for(d=[];a[++g]&&(e=t.trim(a[g]));)d.push(e);c.text=d.join("<br/>");this.ca.push(c)}this.na=2;this.l("loaded")};
|
||||
function qa(a){var c=a.split(":");a=0;var d,e,g;3==c.length?(d=c[0],e=c[1],c=c[2]):(d=0,e=c[0],c=c[1]);c=c.split(/\s+/);c=c.splice(0,1)[0];c=c.split(/\.|,/);g=parseFloat(c[1]);c=c[0];a+=3600*parseFloat(d);a+=60*parseFloat(e);a+=parseFloat(c);g&&(a+=g/1E3);return a}
|
||||
s.update=function(){if(0<this.ca.length){var a=this.c.options().trackTimeOffset||0,a=this.c.currentTime()+a;if(this.Rb===b||a<this.Rb||this.Xa<=a){var c=this.ca,d=this.c.duration(),e=0,g=l,h=[],j,n,q,v;a>=this.Xa||this.Xa===b?v=this.Eb!==b?this.Eb:0:(g=f,v=this.Kb!==b?this.Kb:c.length-1);for(;;){q=c[v];if(q.ya<=a)e=Math.max(e,q.ya),q.Pa&&(q.Pa=l);else if(a<q.startTime){if(d=Math.min(d,q.startTime),q.Pa&&(q.Pa=l),!g)break}else g?(h.splice(0,0,q),n===b&&(n=v),j=v):(h.push(q),j===b&&(j=v),n=v),d=Math.min(d,
|
||||
q.ya),e=Math.max(e,q.startTime),q.Pa=f;if(g)if(0===v)break;else v--;else if(v===c.length-1)break;else v++}this.ub=h;this.Xa=d;this.Rb=e;this.Eb=j;this.Kb=n;j=this.ub;n="";a=0;for(c=j.length;a<c;a++)n+='<span class="vjs-tt-cue">'+j[a].text+"</span>";this.b.innerHTML=n;this.l("cuechange")}}};s.reset=function(){this.Xa=0;this.Rb=this.c.duration();this.Kb=this.Eb=0};t.Xb=t.D.extend();t.Xb.prototype.H="captions";t.ec=t.D.extend();t.ec.prototype.H="subtitles";t.Yb=t.D.extend();t.Yb.prototype.H="chapters";
|
||||
t.gc=t.a.extend({j:function(a,c,d){t.a.call(this,a,c,d);if(a.k.tracks&&0<a.k.tracks.length){c=this.c;a=a.k.tracks;for(var e=0;e<a.length;e++)d=a[e],oa(c,d.kind,d.label,d.language,d)}}});t.gc.prototype.e=function(){return t.a.prototype.e.call(this,"div",{className:"vjs-text-track-display"})};t.aa=t.I.extend({j:function(a,c){var d=this.fa=c.track;c.label=d.label();c.selected=d.Bb();t.I.call(this,a,c);this.c.d(d.K()+"trackchange",t.bind(this,this.update))}});
|
||||
t.aa.prototype.r=function(){t.I.prototype.r.call(this);Y(this.c,this.fa.U,this.fa.K())};t.aa.prototype.update=function(){this.selected(2==this.fa.mode())};t.nb=t.aa.extend({j:function(a,c){c.track={K:function(){return c.kind},m:a,label:function(){return c.kind+" off"},Bb:r(l),mode:r(l)};t.aa.call(this,a,c);this.selected(f)}});t.nb.prototype.r=function(){t.aa.prototype.r.call(this);Y(this.c,this.fa.U,this.fa.K())};
|
||||
t.nb.prototype.update=function(){for(var a=this.c.textTracks(),c=0,d=a.length,e,g=f;c<d;c++)e=a[c],e.K()==this.fa.K()&&2==e.mode()&&(g=l);this.selected(g)};t.W=t.L.extend({j:function(a,c){t.L.call(this,a,c);1>=this.O.length&&this.X()}});t.W.prototype.wa=function(){var a=[],c;a.push(new t.nb(this.c,{kind:this.H}));for(var d=0;d<this.c.textTracks().length;d++)c=this.c.textTracks()[d],c.K()===this.H&&a.push(new t.aa(this.c,{track:c}));return a};
|
||||
t.Ia=t.W.extend({j:function(a,c,d){t.W.call(this,a,c,d);this.b.setAttribute("aria-label","Captions Menu")}});t.Ia.prototype.H="captions";t.Ia.prototype.ua="Captions";t.Ia.prototype.className="vjs-captions-button";t.Oa=t.W.extend({j:function(a,c,d){t.W.call(this,a,c,d);this.b.setAttribute("aria-label","Subtitles Menu")}});t.Oa.prototype.H="subtitles";t.Oa.prototype.ua="Subtitles";t.Oa.prototype.className="vjs-subtitles-button";
|
||||
t.Ja=t.W.extend({j:function(a,c,d){t.W.call(this,a,c,d);this.b.setAttribute("aria-label","Chapters Menu")}});s=t.Ja.prototype;s.H="chapters";s.ua="Chapters";s.className="vjs-chapters-button";s.wa=function(){for(var a=[],c,d=0;d<this.c.textTracks().length;d++)c=this.c.textTracks()[d],c.K()===this.H&&a.push(new t.aa(this.c,{track:c}));return a};
|
||||
s.xa=function(){for(var a=this.c.textTracks(),c=0,d=a.length,e,g,h=this.O=[];c<d;c++)if(e=a[c],e.K()==this.H)if(0===e.readyState())e.load(),e.d("loaded",t.bind(this,this.xa));else{g=e;break}a=this.Ba;a===b&&(a=new t.ha(this.c),a.ja().appendChild(t.e("li",{className:"vjs-menu-title",innerHTML:t.ba(this.H),de:-1})));if(g){e=g.ca;for(var j,c=0,d=e.length;c<d;c++)j=e[c],j=new t.hb(this.c,{track:g,cue:j}),h.push(j),a.R(j);this.R(a)}0<this.O.length&&this.show();return a};
|
||||
t.hb=t.I.extend({j:function(a,c){var d=this.fa=c.track,e=this.cue=c.cue,g=a.currentTime();c.label=e.text;c.selected=e.startTime<=g&&g<e.ya;t.I.call(this,a,c);d.d("cuechange",t.bind(this,this.update))}});t.hb.prototype.r=function(){t.I.prototype.r.call(this);this.c.currentTime(this.cue.startTime);this.update(this.cue.startTime)};t.hb.prototype.update=function(){var a=this.cue,c=this.c.currentTime();this.selected(a.startTime<=c&&c<a.ya)};
|
||||
t.h.A(t.Ka.prototype.k.children,{subtitlesButton:{},captionsButton:{},chaptersButton:{}});
|
||||
if("undefined"!==typeof window.JSON&&"function"===window.JSON.parse)t.JSON=window.JSON;else{t.JSON={};var Z=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;t.JSON.parse=function(a,c){function d(a,e){var j,n,q=a[e];if(q&&"object"===typeof q)for(j in q)Object.prototype.hasOwnProperty.call(q,j)&&(n=d(q,j),n!==b?q[j]=n:delete q[j]);return c.call(a,e,q)}var e;a=String(a);Z.lastIndex=0;Z.test(a)&&(a=a.replace(Z,function(a){return"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)}));
|
||||
if(/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return e=eval("("+a+")"),"function"===typeof c?d({"":e},""):e;throw new SyntaxError("JSON.parse(): invalid or malformed JSON data");}}
|
||||
t.kc=function(){var a,c,d=document.getElementsByTagName("video");if(d&&0<d.length)for(var e=0,g=d.length;e<g;e++)if((c=d[e])&&c.getAttribute)c.player===b&&(a=c.getAttribute("data-setup"),a!==k&&(a=t.JSON.parse(a||"{}"),videojs(c,a)));else{t.vb();break}else t.Sc||t.vb()};t.vb=function(){setTimeout(t.kc,1)};"complete"===document.readyState?t.Sc=f:t.V(window,"load",function(){t.Sc=f});t.vb();t.Td=function(a,c){t.Player.prototype[a]=c};var ra=this;function $(a,c){var d=a.split("."),e=ra;!(d[0]in e)&&e.execScript&&e.execScript("var "+d[0]);for(var g;d.length&&(g=d.shift());)!d.length&&c!==b?e[g]=c:e=e[g]?e[g]:e[g]={}};$("videojs",t);$("_V_",t);$("videojs.options",t.options);$("videojs.players",t.Ca);$("videojs.TOUCH_ENABLED",t.fc);$("videojs.cache",t.va);$("videojs.Component",t.a);t.a.prototype.player=t.a.prototype.m;t.a.prototype.options=t.a.prototype.options;t.a.prototype.init=t.a.prototype.j;t.a.prototype.dispose=t.a.prototype.dispose;t.a.prototype.createEl=t.a.prototype.e;t.a.prototype.contentEl=t.a.prototype.ja;t.a.prototype.el=t.a.prototype.w;t.a.prototype.addChild=t.a.prototype.R;
|
||||
t.a.prototype.getChild=t.a.prototype.ka;t.a.prototype.getChildById=t.a.prototype.wd;t.a.prototype.children=t.a.prototype.children;t.a.prototype.initChildren=t.a.prototype.wc;t.a.prototype.removeChild=t.a.prototype.removeChild;t.a.prototype.on=t.a.prototype.d;t.a.prototype.off=t.a.prototype.p;t.a.prototype.one=t.a.prototype.V;t.a.prototype.trigger=t.a.prototype.l;t.a.prototype.triggerReady=t.a.prototype.Ha;t.a.prototype.show=t.a.prototype.show;t.a.prototype.hide=t.a.prototype.X;
|
||||
t.a.prototype.width=t.a.prototype.width;t.a.prototype.height=t.a.prototype.height;t.a.prototype.dimensions=t.a.prototype.pd;t.a.prototype.ready=t.a.prototype.J;t.a.prototype.addClass=t.a.prototype.n;t.a.prototype.removeClass=t.a.prototype.q;t.a.prototype.buildCSSClass=t.a.prototype.T;t.a.prototype.localize=t.a.prototype.s;t.Player.prototype.ended=t.Player.prototype.ended;t.Player.prototype.enterFullWindow=t.Player.prototype.qc;t.Player.prototype.exitFullWindow=t.Player.prototype.Db;
|
||||
t.Player.prototype.preload=t.Player.prototype.Da;t.Player.prototype.remainingTime=t.Player.prototype.remainingTime;t.Player.prototype.supportsFullScreen=t.Player.prototype.Fa;t.Player.prototype.currentType=t.Player.prototype.ld;t.Player.prototype.language=t.Player.prototype.language;t.Player.prototype.languages=t.Player.prototype.Wa;$("videojs.MediaLoader",t.bd);$("videojs.TextTrackDisplay",t.gc);$("videojs.ControlBar",t.Ka);$("videojs.Button",t.t);$("videojs.PlayToggle",t.bc);
|
||||
$("videojs.FullscreenToggle",t.La);$("videojs.BigPlayButton",t.gb);$("videojs.LoadingSpinner",t.$b);$("videojs.CurrentTimeDisplay",t.ib);$("videojs.DurationDisplay",t.jb);$("videojs.TimeDivider",t.hc);$("videojs.RemainingTimeDisplay",t.qb);$("videojs.LiveDisplay",t.Zb);$("videojs.ErrorDisplay",t.kb);$("videojs.Slider",t.Q);$("videojs.ProgressControl",t.pb);$("videojs.SeekBar",t.dc);$("videojs.LoadProgressBar",t.mb);$("videojs.PlayProgressBar",t.ac);$("videojs.SeekHandle",t.Na);
|
||||
$("videojs.VolumeControl",t.sb);$("videojs.VolumeBar",t.rb);$("videojs.VolumeLevel",t.ic);$("videojs.VolumeMenuButton",t.sa);$("videojs.VolumeHandle",t.tb);$("videojs.MuteToggle",t.ia);$("videojs.PosterImage",t.Ma);$("videojs.Menu",t.ha);$("videojs.MenuItem",t.I);$("videojs.MenuButton",t.L);$("videojs.PlaybackRateMenuButton",t.cc);t.L.prototype.createItems=t.L.prototype.wa;t.W.prototype.createItems=t.W.prototype.wa;t.Ja.prototype.createItems=t.Ja.prototype.wa;$("videojs.SubtitlesButton",t.Oa);
|
||||
$("videojs.CaptionsButton",t.Ia);$("videojs.ChaptersButton",t.Ja);$("videojs.MediaTechController",t.u);t.u.prototype.features=t.u.prototype.o;t.u.prototype.o.volumeControl=t.u.prototype.o.Rc;t.u.prototype.o.fullscreenResize=t.u.prototype.o.me;t.u.prototype.o.progressEvents=t.u.prototype.o.pe;t.u.prototype.o.timeupdateEvents=t.u.prototype.o.se;t.u.prototype.setPoster=t.u.prototype.Ic;$("videojs.Html5",t.g);t.g.Events=t.g.lb;t.g.isSupported=t.g.isSupported;t.g.canPlaySource=t.g.wb;
|
||||
t.g.patchCanPlayType=t.g.Bc;t.g.unpatchCanPlayType=t.g.he;t.g.prototype.setCurrentTime=t.g.prototype.Wd;t.g.prototype.setVolume=t.g.prototype.be;t.g.prototype.setMuted=t.g.prototype.Zd;t.g.prototype.setPreload=t.g.prototype.ae;t.g.prototype.setAutoplay=t.g.prototype.Vd;t.g.prototype.setLoop=t.g.prototype.Yd;t.g.prototype.enterFullScreen=t.g.prototype.pc;t.g.prototype.exitFullScreen=t.g.prototype.td;t.g.prototype.playbackRate=t.g.prototype.playbackRate;t.g.prototype.setPlaybackRate=t.g.prototype.$d;
|
||||
$("videojs.Flash",t.f);t.f.isSupported=t.f.isSupported;t.f.canPlaySource=t.f.wb;t.f.onReady=t.f.onReady;$("videojs.TextTrack",t.D);t.D.prototype.label=t.D.prototype.label;t.D.prototype.kind=t.D.prototype.K;t.D.prototype.mode=t.D.prototype.mode;t.D.prototype.cues=t.D.prototype.kd;t.D.prototype.activeCues=t.D.prototype.dd;$("videojs.CaptionsTrack",t.Xb);$("videojs.SubtitlesTrack",t.ec);$("videojs.ChaptersTrack",t.Yb);$("videojs.autoSetup",t.kc);$("videojs.plugin",t.Td);$("videojs.createTimeRange",t.Ab);
|
||||
$("videojs.util",t.qa);t.qa.mergeOptions=t.qa.Nb;})();
|
||||
-234
@@ -1,234 +0,0 @@
|
||||
API
|
||||
===
|
||||
The Video.js API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
|
||||
|
||||
Referencing the Player
|
||||
----------------------
|
||||
To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example\_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
|
||||
```js
|
||||
var myPlayer = videojs("example_video_1");
|
||||
```
|
||||
|
||||
(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
|
||||
|
||||
Wait Until the Player is Ready
|
||||
------------------------------
|
||||
The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
|
||||
```javascript
|
||||
videojs("example_video_1").ready(function(){
|
||||
|
||||
var myPlayer = this;
|
||||
|
||||
// EXAMPLE: Start playing the video.
|
||||
myPlayer.play();
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
API Methods
|
||||
-----------
|
||||
Now that you have access to a ready player, you can control the video, get values, or respond to video events using the following functions. The Video.js API function names follow the [HTML5 media API](http://www.w3.org/TR/html5/video.html). The main difference is that attributes which you would get or set on a video element using the equals sign ( `myVideoElement.currentTime = "120";` ), you would use a function argument syntax for Video.js ( `myPlayer.currentTime(120);` )
|
||||
|
||||
### play() ###
|
||||
Start video playback. Returns the player object.
|
||||
```js
|
||||
myPlayer.play();
|
||||
```
|
||||
|
||||
|
||||
### pause() ###
|
||||
Pause the video playback. Returns the player object
|
||||
```js
|
||||
myPlayer.pause();
|
||||
```
|
||||
|
||||
|
||||
### paused() ###
|
||||
Returns false if the video is currently playing, or true otherwise. ()
|
||||
```js
|
||||
var isPaused = myPlayer.paused();
|
||||
var isPlaying = !myPlayer.paused();
|
||||
```
|
||||
|
||||
|
||||
### src(newSource) ###
|
||||
The source function updates the video source. There are three types of variables you can pass as the argument.
|
||||
|
||||
**URL String**: A URL to the the video file. Use this method if you're sure the current playback technology (HTML5/Flash) can support the source you provide. Currently only MP4 files can be used in both HTML5 and Flash.
|
||||
```js
|
||||
myPlayer.src("http://www.example.com/path/to/video.mp4");
|
||||
```
|
||||
|
||||
**Source Object (or element):** A javascript object containing information about the source file. Use this method if you want the player to determine if it can support the file using the type information.
|
||||
```js
|
||||
myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
|
||||
```
|
||||
|
||||
**Array of Source Objects:** To provide multiple versions of the source so that it can be played using HTML5 across browsers you can use an array of source objects. Video.js will detect which version is supported and load that file.
|
||||
```js
|
||||
myPlayer.src([
|
||||
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
|
||||
{ type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
|
||||
{ type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
|
||||
]);
|
||||
```
|
||||
|
||||
Returns the player object.
|
||||
|
||||
|
||||
### currentTime() ###
|
||||
Returns the current time of the video in seconds.
|
||||
```js
|
||||
var whereYouAt = myPlayer.currentTime();
|
||||
```
|
||||
|
||||
|
||||
### currentTime(seconds) // Type: Integer or Float ###
|
||||
Seek to the supplied time (seconds). Returns the player object.
|
||||
```js
|
||||
myPlayer.currentTime(120); // 2 minutes into the video
|
||||
```
|
||||
|
||||
|
||||
### duration() ###
|
||||
Returns the length in time of the video in seconds. NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.
|
||||
```js
|
||||
var howLongIsThis = myPlayer.duration();
|
||||
```
|
||||
|
||||
|
||||
### buffered() ###
|
||||
Returns a [TimeRange](glossary.md#timerange) object with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
|
||||
```js
|
||||
var bufferedTimeRange = myPlayer.buffered(),
|
||||
|
||||
// Number of different ranges of time have been buffered. Usually 1.
|
||||
numberOfRanges = bufferedTimeRange.length,
|
||||
|
||||
// Time in seconds when the first range starts. Usually 0.
|
||||
firstRangeStart = bufferedTimeRange.start(0),
|
||||
|
||||
// Time in seconds when the first range ends
|
||||
firstRangeEnd = bufferedTimeRange.end(0),
|
||||
|
||||
// Length in seconds of the first time range
|
||||
firstRangeLength = firstRangeEnd - firstRangeStart;
|
||||
```
|
||||
|
||||
|
||||
### bufferedPercent() ###
|
||||
Returns the percent (as a decimal) of the video that's been downloaded. 0 means none, 1 means all.
|
||||
```js
|
||||
var howMuchIsDownloaded = myPlayer.bufferedPercent();
|
||||
```
|
||||
|
||||
|
||||
### volume() ###
|
||||
Returns the current volume of the video as a percent in decimal form. 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
|
||||
```js
|
||||
var howLoudIsIt = myPlayer.volume();
|
||||
```
|
||||
|
||||
|
||||
### volume(percentAsDecimal) ###
|
||||
Set the volume to the supplied percent (as a decimal between 0 and 1).
|
||||
```js
|
||||
myPlayer.volume(0.5); // Set volume to half
|
||||
```
|
||||
|
||||
|
||||
### width() ###
|
||||
Returns the current width of the video in pixels.
|
||||
```js
|
||||
var howWideIsIt = myPlayer.width();
|
||||
```
|
||||
|
||||
|
||||
### width(pixels) ###
|
||||
Change the width of the video to the supplied width in pixels. Returns the player object
|
||||
```js
|
||||
myPlayer.width(640);
|
||||
```
|
||||
|
||||
|
||||
### height() ###
|
||||
Returns the current height of the video in pixels.
|
||||
```js
|
||||
var howTallIsIt = myPlayer.height();
|
||||
```
|
||||
|
||||
|
||||
### height(pixels) ###
|
||||
Change the height of the video to the supplied height in pixels. Returns the player object
|
||||
```js
|
||||
myPlayer.height(480);
|
||||
```
|
||||
|
||||
|
||||
### dimensions(width, height) ###
|
||||
Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height (only triggers the player's resize event once). Returns the player object.
|
||||
```js
|
||||
myPlayer.dimensions(640,480);
|
||||
```
|
||||
|
||||
|
||||
### requestFullScreen() ###
|
||||
Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the video fills the browser window. In browsers and devices that support native full screen, sometimes the browser's default controls will be shown, and not the Video.js custom skin. This includes most mobile devices (iOS, Android) and older versions of Safari. Returns the player object.
|
||||
```js
|
||||
myPlayer.requestFullScreen();
|
||||
```
|
||||
|
||||
|
||||
### cancelFullScreen() ###
|
||||
Return the video to its normal size after having been in full screen mode. Returns the player object.
|
||||
```js
|
||||
myPlayer.cancelFullScreen();
|
||||
```
|
||||
|
||||
|
||||
### dispose() ###
|
||||
Destroys the video player and does any necessary cleanup. This is especially helpful if you are dynamically adding and removing videos to/from the DOM. Use after removing videos from the DOM.
|
||||
```js
|
||||
myPlayer.dispose();
|
||||
```
|
||||
|
||||
|
||||
|
||||
Events
|
||||
------
|
||||
You can attach event listeners to the player similarly to how you would for a video element.
|
||||
|
||||
```js
|
||||
var myFunc = function(){
|
||||
var myPlayer = this;
|
||||
// Do something when the event is fired
|
||||
};
|
||||
myPlayer.on("eventName", myFunc);
|
||||
```
|
||||
|
||||
You can also remove the listeners later.
|
||||
```js
|
||||
myPlayer.off("eventName", myFunc);
|
||||
```
|
||||
|
||||
|
||||
### Event Types
|
||||
List of player events you can add listeners for.
|
||||
|
||||
<table border="0" cellspacing="5" cellpadding="5">
|
||||
<tr><th>Name</th><th>Description</th></tr>
|
||||
<tr><td>loadstart</td><td>Fired when the user agent begins looking for media data.</td></tr>
|
||||
<tr><td>loadedmetadata</td><td>Fired when the player has initial duration and dimension information.</td></tr>
|
||||
<tr><td>loadeddata</td><td>Fired when the player has downloaded data at the current playback position.</td></tr>
|
||||
<tr><td>loadedalldata</td><td>Fired when the player has finished downloading the source data.</td></tr>
|
||||
<tr><td>play</td><td>Fired whenever the media begins or resumes playback.</td></tr>
|
||||
<tr><td>pause</td><td>Fired whenever the media has been paused.</td></tr>
|
||||
<tr><td>timeupdate</td><td>Fired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use.</td></tr>
|
||||
<tr><td>ended</td><td>Fired when the end of the media resource is reached. currentTime == duration</td></tr>
|
||||
<tr><td>durationchange</td><td>Fired when the duration of the media resource is changed, or known for the first time.</td></tr>
|
||||
<tr><td>progress</td><td>Fired while the user agent is downloading media data.</td></tr>
|
||||
<tr><td>resize</td><td>Fired when the width and/or height of the video window changes.</td></tr>
|
||||
<tr><td>volumechange</td><td>Fired when the volume changes.</td></tr>
|
||||
<tr><td>error</td><td>Fired when there is an error in playback.</td></tr>
|
||||
<tr><td>fullscreenchange</td><td>Fired when the player switches in or out of fullscreen mode.</td></tr>
|
||||
</table>
|
||||
@@ -0,0 +1,552 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.BigPlayButton
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/big-play-button.js#L11](https://github.com/videojs/video.js/blob/master/src/js/big-play-button.js#L11)
|
||||
|
||||
Initial play button. Shows before the video has played. The hiding of the
|
||||
big play button is done via CSS and player states.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
> the constructor function for the class
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_inherited from_: [src/js/button.js#L15](https://github.com/videojs/video.js/blob/master/src/js/button.js#L15)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,551 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Button
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/button.js#L10](https://github.com/videojs/video.js/blob/master/src/js/button.js#L10)
|
||||
|
||||
Base class for all buttons
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
> the constructor function for the class
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/button.js#L15](https://github.com/videojs/video.js/blob/master/src/js/button.js#L15)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,555 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CaptionsButton
|
||||
|
||||
__EXTENDS__: [vjs.TextTrackButton](vjs.TextTrackButton.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L874](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L874)
|
||||
|
||||
The button component for toggling and selecting captions
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L876](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L876)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,694 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CaptionsTrack
|
||||
|
||||
__EXTENDS__: [vjs.TextTrack](vjs.TextTrack.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L686](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L686)
|
||||
|
||||
The track component for managing the hiding and showing of captions
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate) _`inherited`_
|
||||
- [activeCues](#activecues) _`inherited`_
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [adjustFontSize](#adjustfontsize) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel) _`inherited`_
|
||||
- [cues](#cues) _`inherited`_
|
||||
- [deactivate](#deactivate) _`inherited`_
|
||||
- [dflt](#dflt) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [disable](#disable) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [kind](#kind) _`inherited`_
|
||||
- [label](#label) _`inherited`_
|
||||
- [language](#language) _`inherited`_
|
||||
- [mode](#mode) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [src](#src) _`inherited`_
|
||||
- [title](#title) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### activate()
|
||||
> Turn on cue tracking. Tracks that are showing OR hidden are active.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L391](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L391)
|
||||
|
||||
---
|
||||
|
||||
### activeCues()
|
||||
> Get the track active cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L270](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L270)
|
||||
|
||||
---
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### adjustFontSize()
|
||||
> Change the font size of the text track to make it larger when playing in fullscreen mode
|
||||
> and restore it to its normal size when not in fullscreen mode.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L315](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L331](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L331)
|
||||
|
||||
---
|
||||
|
||||
### cues()
|
||||
> Get the track cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L255](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L255)
|
||||
|
||||
---
|
||||
|
||||
### deactivate()
|
||||
> Turn off cue tracking.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L414](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### dflt()
|
||||
> Get the track default value. ('default' is a reserved keyword)
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L196](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L196)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### disable()
|
||||
> Disable: Mode Off/Disable (0)
|
||||
> Indicates that the text track is not active. Other than for the purposes of exposing the track in the DOM, the user agent is ignoring the text track.
|
||||
> No cues are active, no events are fired, and the user agent will not attempt to obtain the track's cues.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L377](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L377)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide: Mode Hidden (1)
|
||||
> Indicates that the text track is active, but that the user agent is not actively displaying the cues.
|
||||
> If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
|
||||
> The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L362](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L134](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L134)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### kind()
|
||||
> Get the track kind value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L167](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L167)
|
||||
|
||||
---
|
||||
|
||||
### label()
|
||||
> Get the track label value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L240](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L240)
|
||||
|
||||
---
|
||||
|
||||
### language()
|
||||
> Get the track language value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L225](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L225)
|
||||
|
||||
---
|
||||
|
||||
### mode()
|
||||
> Get the track mode
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L307](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### readyState()
|
||||
> Get the track readyState
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L289](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L289)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show: Mode Showing (2)
|
||||
> Indicates that the text track is active. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
|
||||
> The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
|
||||
> In addition, for text tracks whose kind is subtitles or captions, the cues are being displayed over the video as appropriate;
|
||||
> for text tracks whose kind is descriptions, the user agent is making the cues available to the user in a non-visual fashion;
|
||||
> and for text tracks whose kind is chapters, the user agent is making available to the user a mechanism by which the user can navigate to any point in the media resource by selecting a cue.
|
||||
> The showing by default state is used in conjunction with the default attribute on track elements to indicate that the text track was enabled due to that attribute.
|
||||
> This allows the user agent to override the state if a later track is discovered that is more appropriate per the user's preferences.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L347](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### src()
|
||||
> Get the track src value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L181](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L181)
|
||||
|
||||
---
|
||||
|
||||
### title()
|
||||
> Get the track title value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L210](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L210)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,555 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersButton
|
||||
|
||||
__EXTENDS__: [vjs.TextTrackButton](vjs.TextTrackButton.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L908](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L908)
|
||||
|
||||
The button component for toggling and selecting chapters
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L910](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L910)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,694 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersTrack
|
||||
|
||||
__EXTENDS__: [vjs.TextTrack](vjs.TextTrack.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L704](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L704)
|
||||
|
||||
The track component for managing the hiding and showing of chapters
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate) _`inherited`_
|
||||
- [activeCues](#activecues) _`inherited`_
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [adjustFontSize](#adjustfontsize) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel) _`inherited`_
|
||||
- [cues](#cues) _`inherited`_
|
||||
- [deactivate](#deactivate) _`inherited`_
|
||||
- [dflt](#dflt) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [disable](#disable) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [kind](#kind) _`inherited`_
|
||||
- [label](#label) _`inherited`_
|
||||
- [language](#language) _`inherited`_
|
||||
- [mode](#mode) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [src](#src) _`inherited`_
|
||||
- [title](#title) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### activate()
|
||||
> Turn on cue tracking. Tracks that are showing OR hidden are active.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L391](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L391)
|
||||
|
||||
---
|
||||
|
||||
### activeCues()
|
||||
> Get the track active cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L270](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L270)
|
||||
|
||||
---
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### adjustFontSize()
|
||||
> Change the font size of the text track to make it larger when playing in fullscreen mode
|
||||
> and restore it to its normal size when not in fullscreen mode.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L315](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L331](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L331)
|
||||
|
||||
---
|
||||
|
||||
### cues()
|
||||
> Get the track cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L255](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L255)
|
||||
|
||||
---
|
||||
|
||||
### deactivate()
|
||||
> Turn off cue tracking.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L414](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### dflt()
|
||||
> Get the track default value. ('default' is a reserved keyword)
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L196](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L196)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### disable()
|
||||
> Disable: Mode Off/Disable (0)
|
||||
> Indicates that the text track is not active. Other than for the purposes of exposing the track in the DOM, the user agent is ignoring the text track.
|
||||
> No cues are active, no events are fired, and the user agent will not attempt to obtain the track's cues.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L377](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L377)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide: Mode Hidden (1)
|
||||
> Indicates that the text track is active, but that the user agent is not actively displaying the cues.
|
||||
> If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
|
||||
> The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L362](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L134](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L134)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### kind()
|
||||
> Get the track kind value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L167](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L167)
|
||||
|
||||
---
|
||||
|
||||
### label()
|
||||
> Get the track label value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L240](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L240)
|
||||
|
||||
---
|
||||
|
||||
### language()
|
||||
> Get the track language value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L225](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L225)
|
||||
|
||||
---
|
||||
|
||||
### mode()
|
||||
> Get the track mode
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L307](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### readyState()
|
||||
> Get the track readyState
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L289](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L289)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show: Mode Showing (2)
|
||||
> Indicates that the text track is active. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
|
||||
> The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
|
||||
> In addition, for text tracks whose kind is subtitles or captions, the cues are being displayed over the video as appropriate;
|
||||
> for text tracks whose kind is descriptions, the user agent is making the cues available to the user in a non-visual fashion;
|
||||
> and for text tracks whose kind is chapters, the user agent is making available to the user a mechanism by which the user can navigate to any point in the media resource by selecting a cue.
|
||||
> The showing by default state is used in conjunction with the default attribute on track elements to indicate that the text track was enabled due to that attribute.
|
||||
> This allows the user agent to override the state if a later track is discovered that is more appropriate per the user's preferences.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L347](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### src()
|
||||
> Get the track src value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L181](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L181)
|
||||
|
||||
---
|
||||
|
||||
### title()
|
||||
> Get the track title value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L210](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L210)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,563 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersTrackMenuItem
|
||||
|
||||
__EXTENDS__: [vjs.MenuItem](vjs.MenuItem.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L996](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L996)
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [selected](#selected-selected-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_inherited from_: [src/js/menu.js#L64](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L64)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L998](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L998)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Handle a click on the menu item, and set it to selected
|
||||
|
||||
_inherited from_: [src/js/menu.js#L74](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L74)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### selected( selected )
|
||||
> Set this menu item as selected or not
|
||||
|
||||
##### PARAMETERS:
|
||||
* __selected__ `Boolean`
|
||||
|
||||
_inherited from_: [src/js/menu.js#L82](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L82)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,571 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Component
|
||||
|
||||
__EXTENDS__: [vjs.CoreObject](vjs.CoreObject.md)
|
||||
__DEFINED IN__: [src/js/component.js#L35](https://github.com/videojs/video.js/blob/master/src/js/component.js#L35)
|
||||
|
||||
Base UI Component class
|
||||
|
||||
Components are embeddable UI objects that are represented by both a
|
||||
javascript object and an element in the DOM. They can be children of other
|
||||
components, and can have many children themselves.
|
||||
|
||||
// adding a button to the player
|
||||
var button = player.addChild('button');
|
||||
button.el(); // -> button element
|
||||
|
||||
<div class="video-js">
|
||||
<div class="vjs-button">Button</div>
|
||||
</div>
|
||||
|
||||
Components are also event emitters.
|
||||
|
||||
button.on('click', function(){
|
||||
console.log('Button Clicked!');
|
||||
});
|
||||
|
||||
button.trigger('customevent');
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addChild](#addchild-child-options-)
|
||||
- [addClass](#addclass-classtoadd-)
|
||||
- [buildCSSClass](#buildcssclass)
|
||||
- [children](#children)
|
||||
- [contentEl](#contentel)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [dimensions](#dimensions-width-height-)
|
||||
- [dispose](#dispose)
|
||||
- [el](#el)
|
||||
- [enableTouchActivity](#enabletouchactivity)
|
||||
- [getChild](#getchild-name-)
|
||||
- [getChildById](#getchildbyid-id-)
|
||||
- [height](#height-num-skiplisteners-)
|
||||
- [hide](#hide)
|
||||
- [id](#id)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [initChildren](#initchildren)
|
||||
- [name](#name)
|
||||
- [off](#off-type-fn-)
|
||||
- [on](#on-type-fn-)
|
||||
- [one](#one-type-fn-)
|
||||
- [options](#options-obj-)
|
||||
- [player](#player)
|
||||
- [ready](#ready-fn-)
|
||||
- [removeChild](#removechild-component-)
|
||||
- [removeClass](#removeclass-classtoremove-)
|
||||
- [show](#show)
|
||||
- [trigger](#trigger-event-)
|
||||
- [triggerReady](#triggerready)
|
||||
- [width](#width-num-skiplisteners-)
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_defined in_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_defined in_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_defined in_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_defined in_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_defined in_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_defined in_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_defined in_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
> the constructor function for the class
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/component.js#L41](https://github.com/videojs/video.js/blob/master/src/js/component.js#L41)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_defined in_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_defined in_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_defined in_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_defined in_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_defined in_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_defined in_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_defined in_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_defined in_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,551 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ControlBar
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/control-bar.js#L9](https://github.com/videojs/video.js/blob/master/src/js/control-bar/control-bar.js#L9)
|
||||
|
||||
Container of main controls
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
> the constructor function for the class
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_inherited from_: [src/js/component.js#L41](https://github.com/videojs/video.js/blob/master/src/js/component.js#L41)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CoreObject
|
||||
|
||||
__DEFINED IN__: [src/js/core-object.js#L52](https://github.com/videojs/video.js/blob/master/src/js/core-object.js#L52)
|
||||
|
||||
Core Object/Class for objects that use inheritance + contstructors
|
||||
|
||||
To create a class that can be subclassed itself, extend the CoreObject class.
|
||||
|
||||
var Animal = CoreObject.extend();
|
||||
var Horse = Animal.extend();
|
||||
|
||||
The constructor can be defined through the init property of an object argument.
|
||||
|
||||
var Animal = CoreObject.extend({
|
||||
init: function(name, sound){
|
||||
this.name = name;
|
||||
}
|
||||
});
|
||||
|
||||
Other methods and properties can be added the same way, or directly to the
|
||||
prototype.
|
||||
|
||||
var Animal = CoreObject.extend({
|
||||
init: function(name){
|
||||
this.name = name;
|
||||
},
|
||||
getName: function(){
|
||||
return this.name;
|
||||
},
|
||||
sound: '...'
|
||||
});
|
||||
|
||||
Animal.prototype.makeSound = function(){
|
||||
alert(this.sound);
|
||||
};
|
||||
|
||||
To create an instance of a class, use the create method.
|
||||
|
||||
var fluffy = Animal.create('Fluffy');
|
||||
fluffy.getName(); // -> Fluffy
|
||||
|
||||
Methods and properties can be overridden in subclasses.
|
||||
|
||||
var Horse = Animal.extend({
|
||||
sound: 'Neighhhhh!'
|
||||
});
|
||||
|
||||
var horsey = Horse.create('Horsey');
|
||||
horsey.getName(); // -> Horsey
|
||||
horsey.makeSound(); // -> Alert: Neighhhhh!
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [create](#create-static)
|
||||
- [extend](#extend-props--static)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### create() `STATIC`
|
||||
> Create a new instace of this Object class
|
||||
>
|
||||
> var myAnimal = Animal.create();
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.CoreObject` An instance of a CoreObject subclass
|
||||
|
||||
_defined in_: [src/js/core-object.js#L120](https://github.com/videojs/video.js/blob/master/src/js/core-object.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### extend( props ) `STATIC`
|
||||
> Create a new object that inherits from this Object
|
||||
>
|
||||
> var Animal = CoreObject.extend();
|
||||
> var Horse = Animal.extend();
|
||||
|
||||
##### PARAMETERS:
|
||||
* __props__ `Object` Functions and properties to be applied to the
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.CoreObject` An object that inherits from CoreObject
|
||||
|
||||
_defined in_: [src/js/core-object.js#L70](https://github.com/videojs/video.js/blob/master/src/js/core-object.js#L70)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CurrentTimeDisplay
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/time-display.js#L7](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L7)
|
||||
|
||||
Displays the current time
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/time-display.js#L9](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L9)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.DurationDisplay
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/time-display.js#L43](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L43)
|
||||
|
||||
Displays the duration
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/time-display.js#L45](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L45)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,615 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Flash
|
||||
|
||||
__EXTENDS__: [vjs.MediaTechController](vjs.MediaTechController.md)
|
||||
__DEFINED IN__: [src/js/media/flash.js#L15](https://github.com/videojs/video.js/blob/master/src/js/media/flash.js#L15)
|
||||
|
||||
Flash Media Controller - Wrapper for fallback SWF API
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [initControlsListeners](#initcontrolslisteners) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [onTap](#ontap) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [removeControlsListeners](#removecontrolslisteners) _`inherited`_
|
||||
- [setPoster](#setposter) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/media/flash.js#L17](https://github.com/videojs/video.js/blob/master/src/js/media/flash.js#L17)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### initControlsListeners()
|
||||
> Set up click and touch listeners for the playback element
|
||||
> On desktops, a click on the video itself will toggle playback,
|
||||
> on a mobile device a click on the video toggles controls.
|
||||
> (toggling controls is done by toggling the user state between active and
|
||||
> inactive)
|
||||
>
|
||||
> A tap can signal that a user has become active, or has become inactive
|
||||
> e.g. a quick tap on an iPhone movie should reveal the controls. Another
|
||||
> quick tap should hide them again (signaling the user is in an inactive
|
||||
> viewing state)
|
||||
>
|
||||
> In addition to this, we still want the user to be considered inactive after
|
||||
> a few seconds of inactivity.
|
||||
>
|
||||
> Note: the only part of iOS interaction we can't mimic with this setup
|
||||
> is a touch and hold on the video element counting as activity in order to
|
||||
> keep the controls showing, but that shouldn't be an issue. A touch and hold on
|
||||
> any controls will still keep the user active
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L45](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L45)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Handle a click on the media element. By default will play/pause the media.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L132](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L132)
|
||||
|
||||
---
|
||||
|
||||
### onTap()
|
||||
> Handle a tap on the media element. By default it will toggle the user
|
||||
> activity state, which hides and shows the controls.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L152](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L152)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### removeControlsListeners()
|
||||
> Remove the listeners used for click and tap controls. This is needed for
|
||||
> toggling to controls disabled, where a tap/touch should do nothing.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L116](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L116)
|
||||
|
||||
---
|
||||
|
||||
### setPoster()
|
||||
> Provide a default setPoster method for techs
|
||||
>
|
||||
> Poster support for techs should be optional, so we don't want techs to
|
||||
> break if they don't have a way to set a poster.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L162](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.FullscreenToggle
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/control-bar/fullscreen-toggle.js#L8](https://github.com/videojs/video.js/blob/master/src/js/control-bar/fullscreen-toggle.js#L8)
|
||||
|
||||
Toggle fullscreen video
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/fullscreen-toggle.js#L14](https://github.com/videojs/video.js/blob/master/src/js/control-bar/fullscreen-toggle.js#L14)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,615 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Html5
|
||||
|
||||
__EXTENDS__: [vjs.MediaTechController](vjs.MediaTechController.md)
|
||||
__DEFINED IN__: [src/js/media/html5.js#L12](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L12)
|
||||
|
||||
HTML5 Media Controller - Wrapper for HTML5 Media API
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [initControlsListeners](#initcontrolslisteners) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [onTap](#ontap) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [removeControlsListeners](#removecontrolslisteners) _`inherited`_
|
||||
- [setPoster](#setposter) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/media/html5.js#L14](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L14)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### initControlsListeners()
|
||||
> Set up click and touch listeners for the playback element
|
||||
> On desktops, a click on the video itself will toggle playback,
|
||||
> on a mobile device a click on the video toggles controls.
|
||||
> (toggling controls is done by toggling the user state between active and
|
||||
> inactive)
|
||||
>
|
||||
> A tap can signal that a user has become active, or has become inactive
|
||||
> e.g. a quick tap on an iPhone movie should reveal the controls. Another
|
||||
> quick tap should hide them again (signaling the user is in an inactive
|
||||
> viewing state)
|
||||
>
|
||||
> In addition to this, we still want the user to be considered inactive after
|
||||
> a few seconds of inactivity.
|
||||
>
|
||||
> Note: the only part of iOS interaction we can't mimic with this setup
|
||||
> is a touch and hold on the video element counting as activity in order to
|
||||
> keep the controls showing, but that shouldn't be an issue. A touch and hold on
|
||||
> any controls will still keep the user active
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L45](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L45)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Handle a click on the media element. By default will play/pause the media.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L132](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L132)
|
||||
|
||||
---
|
||||
|
||||
### onTap()
|
||||
> Handle a tap on the media element. By default it will toggle the user
|
||||
> activity state, which hides and shows the controls.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L152](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L152)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### removeControlsListeners()
|
||||
> Remove the listeners used for click and tap controls. This is needed for
|
||||
> toggling to controls disabled, where a tap/touch should do nothing.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L116](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L116)
|
||||
|
||||
---
|
||||
|
||||
### setPoster()
|
||||
> Provide a default setPoster method for techs
|
||||
>
|
||||
> Poster support for techs should be optional, so we don't want techs to
|
||||
> break if they don't have a way to set a poster.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L162](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.JSON
|
||||
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [parse](#parse-text-reviver-)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### parse( text, [reviver] )
|
||||
> parse the json
|
||||
|
||||
##### PARAMETERS:
|
||||
* __text__ `String` The JSON string to parse
|
||||
* __reviver__ `Function` _(OPTIONAL)_ Optional function that can transform the results
|
||||
|
||||
##### RETURNS:
|
||||
* `Object|Array` The parsed JSON
|
||||
|
||||
_defined in_: [src/js/json.js#L34](https://github.com/videojs/video.js/blob/master/src/js/json.js#L34)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.LoadProgressBar
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L117](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L117)
|
||||
|
||||
Shows load progress
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L119](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L119)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.LoadingSpinner
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/loading-spinner.js#L10](https://github.com/videojs/video.js/blob/master/src/js/loading-spinner.js#L10)
|
||||
|
||||
Loading spinner for waiting events
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/loading-spinner.js#L12](https://github.com/videojs/video.js/blob/master/src/js/loading-spinner.js#L12)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,551 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MediaLoader
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/media/loader.js#L7](https://github.com/videojs/video.js/blob/master/src/js/media/loader.js#L7)
|
||||
|
||||
The Media Loader is the component that decides which playback technology to load
|
||||
when the player is initialized.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/media/loader.js#L9](https://github.com/videojs/video.js/blob/master/src/js/media/loader.js#L9)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,615 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MediaTechController
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/media/media.js#L12](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L12)
|
||||
|
||||
Base class for media (HTML5 Video, Flash) controllers
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [initControlsListeners](#initcontrolslisteners)
|
||||
- [onClick](#onclick-event-)
|
||||
- [onTap](#ontap)
|
||||
- [removeControlsListeners](#removecontrolslisteners)
|
||||
- [setPoster](#setposter)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/media/media.js#L14](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L14)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### initControlsListeners()
|
||||
> Set up click and touch listeners for the playback element
|
||||
> On desktops, a click on the video itself will toggle playback,
|
||||
> on a mobile device a click on the video toggles controls.
|
||||
> (toggling controls is done by toggling the user state between active and
|
||||
> inactive)
|
||||
>
|
||||
> A tap can signal that a user has become active, or has become inactive
|
||||
> e.g. a quick tap on an iPhone movie should reveal the controls. Another
|
||||
> quick tap should hide them again (signaling the user is in an inactive
|
||||
> viewing state)
|
||||
>
|
||||
> In addition to this, we still want the user to be considered inactive after
|
||||
> a few seconds of inactivity.
|
||||
>
|
||||
> Note: the only part of iOS interaction we can't mimic with this setup
|
||||
> is a touch and hold on the video element counting as activity in order to
|
||||
> keep the controls showing, but that shouldn't be an issue. A touch and hold on
|
||||
> any controls will still keep the user active
|
||||
|
||||
_defined in_: [src/js/media/media.js#L45](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L45)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Handle a click on the media element. By default will play/pause the media.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__
|
||||
|
||||
_defined in_: [src/js/media/media.js#L132](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L132)
|
||||
|
||||
---
|
||||
|
||||
### onTap()
|
||||
> Handle a tap on the media element. By default it will toggle the user
|
||||
> activity state, which hides and shows the controls.
|
||||
|
||||
_defined in_: [src/js/media/media.js#L152](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L152)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### removeControlsListeners()
|
||||
> Remove the listeners used for click and tap controls. This is needed for
|
||||
> toggling to controls disabled, where a tap/touch should do nothing.
|
||||
|
||||
_defined in_: [src/js/media/media.js#L116](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L116)
|
||||
|
||||
---
|
||||
|
||||
### setPoster()
|
||||
> Provide a default setPoster method for techs
|
||||
>
|
||||
> Poster support for techs should be optional, so we don't want techs to
|
||||
> break if they don't have a way to set a poster.
|
||||
|
||||
_defined in_: [src/js/media/media.js#L162](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,560 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Menu
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/menu.js#L12](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L12)
|
||||
|
||||
The Menu component is used to build pop up menus, including subtitle and
|
||||
captions selection menus.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addItem](#additem-component-)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### addItem( component )
|
||||
> Add a menu item to the menu
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `Object|String` Component or component type to add
|
||||
|
||||
_defined in_: [src/js/menu.js#L18](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L18)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_defined in_: [src/js/menu.js#L26](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L26)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
> the constructor function for the class
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_inherited from_: [src/js/component.js#L41](https://github.com/videojs/video.js/blob/master/src/js/component.js#L41)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,554 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MenuButton
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/menu.js#L99](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L99)
|
||||
|
||||
A button class with a popup menu
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [buildCSSClass](#buildcssclass)
|
||||
- [createItems](#createitems)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_defined in_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_defined in_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/menu.js#L101](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L101)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,565 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MenuItem
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/menu.js#L55](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L55)
|
||||
|
||||
The component for a menu item. `<li>`
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [init](#init-player-options-)
|
||||
- [onClick](#onclick)
|
||||
- [selected](#selected-selected-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_defined in_: [src/js/menu.js#L64](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L64)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/menu.js#L57](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L57)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Handle a click on the menu item, and set it to selected
|
||||
|
||||
_defined in_: [src/js/menu.js#L74](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L74)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### selected( selected )
|
||||
> Set this menu item as selected or not
|
||||
|
||||
##### PARAMETERS:
|
||||
* __selected__ `Boolean`
|
||||
|
||||
_defined in_: [src/js/menu.js#L82](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L82)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MuteToggle
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/control-bar/mute-toggle.js#L8](https://github.com/videojs/video.js/blob/master/src/js/control-bar/mute-toggle.js#L8)
|
||||
|
||||
A button component for muting the audio
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/mute-toggle.js#L10](https://github.com/videojs/video.js/blob/master/src/js/control-bar/mute-toggle.js#L10)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,565 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.OffTextTrackMenuItem
|
||||
|
||||
__EXTENDS__: [vjs.TextTrackMenuItem](vjs.TextTrackMenuItem.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L772](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L772)
|
||||
|
||||
A special menu item for turning of a specific type of text track
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [selected](#selected-selected-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_inherited from_: [src/js/menu.js#L64](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L64)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L774](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L774)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Handle a click on the menu item, and set it to selected
|
||||
|
||||
_inherited from_: [src/js/menu.js#L74](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L74)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### selected( selected )
|
||||
> Set this menu item as selected or not
|
||||
|
||||
##### PARAMETERS:
|
||||
* __selected__ `Boolean`
|
||||
|
||||
_inherited from_: [src/js/menu.js#L82](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L82)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.PlayProgressBar
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L175](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L175)
|
||||
|
||||
Shows play progress
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L177](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L177)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.PlayToggle
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/control-bar/play-toggle.js#L8](https://github.com/videojs/video.js/blob/master/src/js/control-bar/play-toggle.js#L8)
|
||||
|
||||
Button to toggle between play and pause
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/play-toggle.js#L10](https://github.com/videojs/video.js/blob/master/src/js/control-bar/play-toggle.js#L10)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
Diferenças do arquivo suprimidas por serem muito extensas
Carregar Diff
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.PosterImage
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/poster.js#L10](https://github.com/videojs/video.js/blob/master/src/js/poster.js#L10)
|
||||
|
||||
The component that handles showing the poster image.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/poster.js#L12](https://github.com/videojs/video.js/blob/master/src/js/poster.js#L12)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,550 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ProgressControl
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L9](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L9)
|
||||
|
||||
The Progress Control component contains the seek bar, load progress,
|
||||
and play progress
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L11](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L11)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.RemainingTimeDisplay
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/time-display.js#L108](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L108)
|
||||
|
||||
Displays the time left in the video
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/time-display.js#L110](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L110)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,561 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SeekBar
|
||||
|
||||
__EXTENDS__: [vjs.Slider](vjs.Slider.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L35](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L35)
|
||||
|
||||
Seek Bar and holder for the progress bars
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L37](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L37)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Listener for click events on slider, used to prevent clicks
|
||||
> from bubbling up to parent elements like button menus.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Object` Event object
|
||||
|
||||
_inherited from_: [src/js/slider.js#L204](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L204)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SeekHandle
|
||||
|
||||
__EXTENDS__: [vjs.SliderHandle](vjs.SliderHandle.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L197](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L197)
|
||||
|
||||
The Seek Handle shows the current position of the playhead during playback,
|
||||
and can be dragged to adjust the playhead.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L213](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L213)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
> the constructor function for the class
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_inherited from_: [src/js/component.js#L41](https://github.com/videojs/video.js/blob/master/src/js/component.js#L41)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,561 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Slider
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/slider.js#L10](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L10)
|
||||
|
||||
The base functionality for sliders like the volume bar and seek bar
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [onClick](#onclick-event-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/slider.js#L12](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L12)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Listener for click events on slider, used to prevent clicks
|
||||
> from bubbling up to parent elements like button menus.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Object` Event object
|
||||
|
||||
_defined in_: [src/js/slider.js#L204](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L204)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SliderHandle
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/slider.js#L216](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L216)
|
||||
|
||||
SeekBar Behavior includes play progress bar, and seek handle
|
||||
Needed so it can determine seek position based on handle position/size
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_defined in_: [src/js/slider.js#L227](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L227)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
> the constructor function for the class
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_inherited from_: [src/js/component.js#L41](https://github.com/videojs/video.js/blob/master/src/js/component.js#L41)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,555 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SubtitlesButton
|
||||
|
||||
__EXTENDS__: [vjs.TextTrackButton](vjs.TextTrackButton.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L890](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L890)
|
||||
|
||||
The button component for toggling and selecting subtitles
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L892](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L892)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,694 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SubtitlesTrack
|
||||
|
||||
__EXTENDS__: [vjs.TextTrack](vjs.TextTrack.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L696](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L696)
|
||||
|
||||
The track component for managing the hiding and showing of subtitles
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate) _`inherited`_
|
||||
- [activeCues](#activecues) _`inherited`_
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [adjustFontSize](#adjustfontsize) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel) _`inherited`_
|
||||
- [cues](#cues) _`inherited`_
|
||||
- [deactivate](#deactivate) _`inherited`_
|
||||
- [dflt](#dflt) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [disable](#disable) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [kind](#kind) _`inherited`_
|
||||
- [label](#label) _`inherited`_
|
||||
- [language](#language) _`inherited`_
|
||||
- [mode](#mode) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [src](#src) _`inherited`_
|
||||
- [title](#title) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### activate()
|
||||
> Turn on cue tracking. Tracks that are showing OR hidden are active.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L391](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L391)
|
||||
|
||||
---
|
||||
|
||||
### activeCues()
|
||||
> Get the track active cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L270](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L270)
|
||||
|
||||
---
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### adjustFontSize()
|
||||
> Change the font size of the text track to make it larger when playing in fullscreen mode
|
||||
> and restore it to its normal size when not in fullscreen mode.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L315](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L331](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L331)
|
||||
|
||||
---
|
||||
|
||||
### cues()
|
||||
> Get the track cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L255](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L255)
|
||||
|
||||
---
|
||||
|
||||
### deactivate()
|
||||
> Turn off cue tracking.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L414](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### dflt()
|
||||
> Get the track default value. ('default' is a reserved keyword)
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L196](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L196)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### disable()
|
||||
> Disable: Mode Off/Disable (0)
|
||||
> Indicates that the text track is not active. Other than for the purposes of exposing the track in the DOM, the user agent is ignoring the text track.
|
||||
> No cues are active, no events are fired, and the user agent will not attempt to obtain the track's cues.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L377](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L377)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide: Mode Hidden (1)
|
||||
> Indicates that the text track is active, but that the user agent is not actively displaying the cues.
|
||||
> If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
|
||||
> The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L362](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L134](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L134)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### kind()
|
||||
> Get the track kind value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L167](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L167)
|
||||
|
||||
---
|
||||
|
||||
### label()
|
||||
> Get the track label value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L240](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L240)
|
||||
|
||||
---
|
||||
|
||||
### language()
|
||||
> Get the track language value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L225](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L225)
|
||||
|
||||
---
|
||||
|
||||
### mode()
|
||||
> Get the track mode
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L307](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### readyState()
|
||||
> Get the track readyState
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L289](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L289)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show: Mode Showing (2)
|
||||
> Indicates that the text track is active. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
|
||||
> The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
|
||||
> In addition, for text tracks whose kind is subtitles or captions, the cues are being displayed over the video as appropriate;
|
||||
> for text tracks whose kind is descriptions, the user agent is making the cues available to the user in a non-visual fashion;
|
||||
> and for text tracks whose kind is chapters, the user agent is making available to the user a mechanism by which the user can navigate to any point in the media resource by selecting a cue.
|
||||
> The showing by default state is used in conjunction with the default attribute on track elements to indicate that the text track was enabled due to that attribute.
|
||||
> This allows the user agent to override the state if a later track is discovered that is more appropriate per the user's preferences.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L347](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### src()
|
||||
> Get the track src value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L181](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L181)
|
||||
|
||||
---
|
||||
|
||||
### title()
|
||||
> Get the track title value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L210](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L210)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,696 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrack
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L132](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L132)
|
||||
|
||||
The base class for all text tracks
|
||||
|
||||
Handles the parsing, hiding, and showing of text track cues
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate)
|
||||
- [activeCues](#activecues)
|
||||
- [adjustFontSize](#adjustfontsize)
|
||||
- [createEl](#createel)
|
||||
- [cues](#cues)
|
||||
- [deactivate](#deactivate)
|
||||
- [dflt](#dflt)
|
||||
- [disable](#disable)
|
||||
- [hide](#hide)
|
||||
- [init](#init-player-options-)
|
||||
- [kind](#kind)
|
||||
- [label](#label)
|
||||
- [language](#language)
|
||||
- [mode](#mode)
|
||||
- [readyState](#readystate)
|
||||
- [show](#show)
|
||||
- [src](#src)
|
||||
- [title](#title)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### activate()
|
||||
> Turn on cue tracking. Tracks that are showing OR hidden are active.
|
||||
|
||||
_defined in_: [src/js/tracks.js#L391](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L391)
|
||||
|
||||
---
|
||||
|
||||
### activeCues()
|
||||
> Get the track active cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L270](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L270)
|
||||
|
||||
---
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### adjustFontSize()
|
||||
> Change the font size of the text track to make it larger when playing in fullscreen mode
|
||||
> and restore it to its normal size when not in fullscreen mode.
|
||||
|
||||
_defined in_: [src/js/tracks.js#L315](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L331](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L331)
|
||||
|
||||
---
|
||||
|
||||
### cues()
|
||||
> Get the track cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L255](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L255)
|
||||
|
||||
---
|
||||
|
||||
### deactivate()
|
||||
> Turn off cue tracking.
|
||||
|
||||
_defined in_: [src/js/tracks.js#L414](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### dflt()
|
||||
> Get the track default value. ('default' is a reserved keyword)
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L196](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L196)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### disable()
|
||||
> Disable: Mode Off/Disable (0)
|
||||
> Indicates that the text track is not active. Other than for the purposes of exposing the track in the DOM, the user agent is ignoring the text track.
|
||||
> No cues are active, no events are fired, and the user agent will not attempt to obtain the track's cues.
|
||||
|
||||
_defined in_: [src/js/tracks.js#L377](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L377)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide: Mode Hidden (1)
|
||||
> Indicates that the text track is active, but that the user agent is not actively displaying the cues.
|
||||
> If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
|
||||
> The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
|
||||
|
||||
_defined in_: [src/js/tracks.js#L362](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L134](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L134)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### kind()
|
||||
> Get the track kind value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L167](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L167)
|
||||
|
||||
---
|
||||
|
||||
### label()
|
||||
> Get the track label value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L240](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L240)
|
||||
|
||||
---
|
||||
|
||||
### language()
|
||||
> Get the track language value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L225](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L225)
|
||||
|
||||
---
|
||||
|
||||
### mode()
|
||||
> Get the track mode
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L307](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### readyState()
|
||||
> Get the track readyState
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L289](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L289)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show: Mode Showing (2)
|
||||
> Indicates that the text track is active. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
|
||||
> The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
|
||||
> In addition, for text tracks whose kind is subtitles or captions, the cues are being displayed over the video as appropriate;
|
||||
> for text tracks whose kind is descriptions, the user agent is making the cues available to the user in a non-visual fashion;
|
||||
> and for text tracks whose kind is chapters, the user agent is making available to the user a mechanism by which the user can navigate to any point in the media resource by selecting a cue.
|
||||
> The showing by default state is used in conjunction with the default attribute on track elements to indicate that the text track was enabled due to that attribute.
|
||||
> This allows the user agent to override the state if a later track is discovered that is more appropriate per the user's preferences.
|
||||
|
||||
_defined in_: [src/js/tracks.js#L347](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### src()
|
||||
> Get the track src value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L181](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L181)
|
||||
|
||||
---
|
||||
|
||||
### title()
|
||||
> Get the track title value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L210](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L210)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,554 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackButton
|
||||
|
||||
__EXTENDS__: [vjs.MenuButton](vjs.MenuButton.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L814](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L814)
|
||||
|
||||
The base class for buttons that toggle specific text track types (e.g. subtitles)
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L816](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,550 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackDisplay
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L717](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L717)
|
||||
|
||||
The component for displaying text track cues
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L719](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L719)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,565 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackMenuItem
|
||||
|
||||
__EXTENDS__: [vjs.MenuItem](vjs.MenuItem.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L744](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L744)
|
||||
|
||||
The specific menu item type for selecting a language within a text track kind
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [selected](#selected-selected-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_inherited from_: [src/js/menu.js#L64](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L64)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L746](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L746)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Handle a click on the menu item, and set it to selected
|
||||
|
||||
_inherited from_: [src/js/menu.js#L74](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L74)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### selected( selected )
|
||||
> Set this menu item as selected or not
|
||||
|
||||
##### PARAMETERS:
|
||||
* __selected__ `Boolean`
|
||||
|
||||
_inherited from_: [src/js/menu.js#L82](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L82)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,551 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TimeDivider
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/time-display.js#L88](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L88)
|
||||
|
||||
The separator between the current time and duration
|
||||
|
||||
Can be hidden if it's not needed in the design.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/time-display.js#L90](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L90)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,561 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeBar
|
||||
|
||||
__EXTENDS__: [vjs.Slider](vjs.Slider.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-control.js#L46](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L46)
|
||||
|
||||
The bar that contains the volume level and can be clicked on to adjust the level
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/volume-control.js#L48](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L48)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Listener for click events on slider, used to prevent clicks
|
||||
> from bubbling up to parent elements like button menus.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Object` Event object
|
||||
|
||||
_inherited from_: [src/js/slider.js#L204](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L204)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeControl
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-control.js#L8](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L8)
|
||||
|
||||
The component for controlling the volume level
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/volume-control.js#L10](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L10)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,548 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeHandle
|
||||
|
||||
__EXTENDS__: [vjs.SliderHandle](vjs.SliderHandle.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-control.js#L131](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L131)
|
||||
|
||||
The volume handle can be dragged to adjust the volume level
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_defined in_: [src/js/control-bar/volume-control.js#L136](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L136)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
> the constructor function for the class
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_inherited from_: [src/js/component.js#L41](https://github.com/videojs/video.js/blob/master/src/js/component.js#L41)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeLevel
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-control.js#L110](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L110)
|
||||
|
||||
Shows volume level
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L515](https://github.com/videojs/video.js/blob/master/src/js/component.js#L515)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/volume-control.js#L112](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L112)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,554 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeMenuButton
|
||||
|
||||
__EXTENDS__: [vjs.MenuButton](vjs.MenuButton.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-menu-button.js#L5](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-menu-button.js#L5)
|
||||
|
||||
Menu button with a popup for showing the volume slider.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [resize](#resize-event) _`inherited`_
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addChild( child, [options] )
|
||||
> Adds a child component inside this component
|
||||
>
|
||||
> myComponent.el();
|
||||
> // -> <div class='my-component'></div>
|
||||
> myComonent.children();
|
||||
> // [empty array]
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton');
|
||||
> // -> <div class='my-component'><div class="my-button">myButton<div></div>
|
||||
> // -> myButton === myComonent.children()[0];
|
||||
>
|
||||
> Pass in options for child constructors and options for children of the child
|
||||
>
|
||||
> var myButton = myComponent.addChild('MyButton', {
|
||||
> text: 'Press Me',
|
||||
> children: {
|
||||
> buttonChildExample: {
|
||||
> buttonChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
|
||||
##### PARAMETERS:
|
||||
* __child__ `String|vjs.Component` The class name or instance of a child to add
|
||||
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The child component (created by this process if a string was used)
|
||||
|
||||
_inherited from_: [src/js/component.js#L356](https://github.com/videojs/video.js/blob/master/src/js/component.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### addClass( classToAdd )
|
||||
> Add a CSS class name to the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToAdd__ `String` Classname to add
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L672](https://github.com/videojs/video.js/blob/master/src/js/component.js#L672)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L290](https://github.com/videojs/video.js/blob/master/src/js/component.js#L290)
|
||||
|
||||
---
|
||||
|
||||
### contentEl()
|
||||
> Return the component's DOM element for embedding content.
|
||||
> Will either be el_ or a new element defined in createEl.
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L233](https://github.com/videojs/video.js/blob/master/src/js/component.js#L233)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L784](https://github.com/videojs/video.js/blob/master/src/js/component.js#L784)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L214](https://github.com/videojs/video.js/blob/master/src/js/component.js#L214)
|
||||
|
||||
---
|
||||
|
||||
### enableTouchActivity()
|
||||
> Report user touch activity when touch events occur
|
||||
>
|
||||
> User activity is used to determine when controls should show/hide. It's
|
||||
> relatively simple when it comes to mouse events, because any mouse event
|
||||
> should show the controls. So we capture mouse events that bubble up to the
|
||||
> player and report activity when that happens.
|
||||
>
|
||||
> With touch events it isn't as easy. We can't rely on touch events at the
|
||||
> player level, because a tap (touchstart + touchend) on the video itself on
|
||||
> mobile devices is meant to turn controls off (and on). User activity is
|
||||
> checked asynchronously, so what could happen is a tap event on the video
|
||||
> turns the controls off, then the touchend event bubbles up to the player,
|
||||
> which if it reported user activity, would turn the controls right back on.
|
||||
> (We also don't want to completely block touch events from bubbling up)
|
||||
>
|
||||
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
|
||||
> to turn the controls back on on a mobile device.
|
||||
>
|
||||
> Here we're setting the default component behavior to report user activity
|
||||
> whenever touch events happen, and this can be turned off by components that
|
||||
> want touch events to act differently.
|
||||
|
||||
_inherited from_: [src/js/component.js#L963](https://github.com/videojs/video.js/blob/master/src/js/component.js#L963)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L324](https://github.com/videojs/video.js/blob/master/src/js/component.js#L324)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L307](https://github.com/videojs/video.js/blob/master/src/js/component.js#L307)
|
||||
|
||||
---
|
||||
|
||||
### height( [num], [skipListeners] )
|
||||
> Get or set the height of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ New component height
|
||||
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the height
|
||||
* `Number|String` The height, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L773](https://github.com/videojs/video.js/blob/master/src/js/component.js#L773)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L703](https://github.com/videojs/video.js/blob/master/src/js/component.js#L703)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L252](https://github.com/videojs/video.js/blob/master/src/js/component.js#L252)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/volume-menu-button.js#L7](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-menu-button.js#L7)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> // Or when creating the component
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
> });
|
||||
>
|
||||
> The children option can also be an Array of child names or
|
||||
> child options objects (that also include a 'name' key).
|
||||
>
|
||||
> var myComp = new MyComponent(player, {
|
||||
> children: [
|
||||
> 'button',
|
||||
> {
|
||||
> name: 'button',
|
||||
> someOtherOption: true
|
||||
> }
|
||||
> ]
|
||||
> });
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L271](https://github.com/videojs/video.js/blob/master/src/js/component.js#L271)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L554](https://github.com/videojs/video.js/blob/master/src/js/component.js#L554)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L566](https://github.com/videojs/video.js/blob/master/src/js/component.js#L566)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L625](https://github.com/videojs/video.js/blob/master/src/js/component.js#L625)
|
||||
|
||||
---
|
||||
|
||||
### removeChild( component )
|
||||
> Remove a child component from this component's list of children, and the
|
||||
> child component's element from this component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __component__ `vjs.Component` Component to remove
|
||||
|
||||
_inherited from_: [src/js/component.js#L414](https://github.com/videojs/video.js/blob/master/src/js/component.js#L414)
|
||||
|
||||
---
|
||||
|
||||
### removeClass( classToRemove )
|
||||
> Remove a CSS class name from the component's element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToRemove__ `String` Classname to remove
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L683](https://github.com/videojs/video.js/blob/master/src/js/component.js#L683)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L693](https://github.com/videojs/video.js/blob/master/src/js/component.js#L693)
|
||||
|
||||
---
|
||||
|
||||
### trigger( event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
> myComponent.trigger({'type':'eventName'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__ `Event|Object|String` A string (the type) or an event object with a type attribute
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L580](https://github.com/videojs/video.js/blob/master/src/js/component.js#L580)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L644](https://github.com/videojs/video.js/blob/master/src/js/component.js#L644)
|
||||
|
||||
---
|
||||
|
||||
### width( [num], skipListeners )
|
||||
> Set or get the width of the component (CSS values)
|
||||
>
|
||||
> Setting the video tag dimension values only works with values in pixels.
|
||||
> Percent values will not work.
|
||||
> Some percents can be used, but width()/height() will return the number + %,
|
||||
> not the actual computed width/height.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
|
||||
* __skipListeners__ `Boolean` Skip the 'resize' event trigger
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` This component, when setting the width
|
||||
* `Number|String` The width, when getting
|
||||
|
||||
_inherited from_: [src/js/component.js#L756](https://github.com/videojs/video.js/blob/master/src/js/component.js#L756)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L863](https://github.com/videojs/video.js/blob/master/src/js/component.js#L863)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs
|
||||
|
||||
__DEFINED IN__: [src/js/core.js#L26](https://github.com/videojs/video.js/blob/master/src/js/core.js#L26)
|
||||
|
||||
Doubles as the main function for users to create a player instance and also
|
||||
the main library object.
|
||||
|
||||
**ALIASES** videojs, _V_ (deprecated)
|
||||
|
||||
The `vjs` function can be used to initialize or retrieve a player.
|
||||
|
||||
var myPlayer = vjs('my_video_id');
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [PROPERTIES](#properties)
|
||||
- [options](#options)
|
||||
- [players](#players)
|
||||
|
||||
- CLASSES
|
||||
- [BigPlayButton](vjs.BigPlayButton.md)
|
||||
- [Button](vjs.Button.md)
|
||||
- [CaptionsButton](vjs.CaptionsButton.md)
|
||||
- [CaptionsTrack](vjs.CaptionsTrack.md)
|
||||
- [ChaptersButton](vjs.ChaptersButton.md)
|
||||
- [ChaptersTrack](vjs.ChaptersTrack.md)
|
||||
- [ChaptersTrackMenuItem](vjs.ChaptersTrackMenuItem.md)
|
||||
- [Component](vjs.Component.md)
|
||||
- [ControlBar](vjs.ControlBar.md)
|
||||
- [CoreObject](vjs.CoreObject.md)
|
||||
- [CurrentTimeDisplay](vjs.CurrentTimeDisplay.md)
|
||||
- [DurationDisplay](vjs.DurationDisplay.md)
|
||||
- [ErrorDisplay](vjs.ErrorDisplay.md)
|
||||
- [Flash](vjs.Flash.md)
|
||||
- [FullscreenToggle](vjs.FullscreenToggle.md)
|
||||
- [Html5](vjs.Html5.md)
|
||||
- [LiveDisplay](vjs.LiveDisplay.md)
|
||||
- [LoadProgressBar](vjs.LoadProgressBar.md)
|
||||
- [LoadingSpinner](vjs.LoadingSpinner.md)
|
||||
- [MediaError](vjs.MediaError.md)
|
||||
- [MediaLoader](vjs.MediaLoader.md)
|
||||
- [MediaTechController](vjs.MediaTechController.md)
|
||||
- [Menu](vjs.Menu.md)
|
||||
- [MenuButton](vjs.MenuButton.md)
|
||||
- [MenuItem](vjs.MenuItem.md)
|
||||
- [MuteToggle](vjs.MuteToggle.md)
|
||||
- [OffTextTrackMenuItem](vjs.OffTextTrackMenuItem.md)
|
||||
- [PlayProgressBar](vjs.PlayProgressBar.md)
|
||||
- [PlayToggle](vjs.PlayToggle.md)
|
||||
- [PlaybackRateMenuButton](vjs.PlaybackRateMenuButton.md)
|
||||
- [PlaybackRateMenuItem](vjs.PlaybackRateMenuItem.md)
|
||||
- [Player](vjs.Player.md)
|
||||
- [PosterImage](vjs.PosterImage.md)
|
||||
- [ProgressControl](vjs.ProgressControl.md)
|
||||
- [RemainingTimeDisplay](vjs.RemainingTimeDisplay.md)
|
||||
- [SeekBar](vjs.SeekBar.md)
|
||||
- [SeekHandle](vjs.SeekHandle.md)
|
||||
- [Slider](vjs.Slider.md)
|
||||
- [SliderHandle](vjs.SliderHandle.md)
|
||||
- [SubtitlesButton](vjs.SubtitlesButton.md)
|
||||
- [SubtitlesTrack](vjs.SubtitlesTrack.md)
|
||||
- [TextTrack](vjs.TextTrack.md)
|
||||
- [TextTrackButton](vjs.TextTrackButton.md)
|
||||
- [TextTrackDisplay](vjs.TextTrackDisplay.md)
|
||||
- [TextTrackMenuItem](vjs.TextTrackMenuItem.md)
|
||||
- [TimeDivider](vjs.TimeDivider.md)
|
||||
- [VolumeBar](vjs.VolumeBar.md)
|
||||
- [VolumeControl](vjs.VolumeControl.md)
|
||||
- [VolumeHandle](vjs.VolumeHandle.md)
|
||||
- [VolumeLevel](vjs.VolumeLevel.md)
|
||||
- [VolumeMenuButton](vjs.VolumeMenuButton.md)
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [parseUrl](#parseurl-url-)
|
||||
- [plugin](#plugin-name-init-)
|
||||
|
||||
- NAMESPACES
|
||||
- [log](vjs.log.md)
|
||||
- [util](vjs.util.md)
|
||||
|
||||
---
|
||||
|
||||
## PROPERTIES
|
||||
|
||||
### options
|
||||
> Global Player instance options, surfaced from vjs.Player.prototype.options_
|
||||
> vjs.options = vjs.Player.prototype.options_
|
||||
> All options should use string keys so they avoid
|
||||
> renaming by closure compiler
|
||||
|
||||
_defined in_: [src/js/core.js#L76](https://github.com/videojs/video.js/blob/master/src/js/core.js#L76)
|
||||
|
||||
---
|
||||
|
||||
### players
|
||||
> Global player list
|
||||
|
||||
_defined in_: [src/js/core.js#L125](https://github.com/videojs/video.js/blob/master/src/js/core.js#L125)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### parseUrl( url )
|
||||
> Resolve and parse the elements of a URL
|
||||
|
||||
##### PARAMETERS:
|
||||
* __url__ `String` The url to parse
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` An object of url details
|
||||
|
||||
_defined in_: [src/js/lib.js#L723](https://github.com/videojs/video.js/blob/master/src/js/lib.js#L723)
|
||||
|
||||
---
|
||||
|
||||
### plugin( name, init )
|
||||
> the method for registering a video.js plugin
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__ `String` The name of the plugin
|
||||
* __init__ `Function` The function that is run when the player inits
|
||||
|
||||
_defined in_: [src/js/plugins.js#L7](https://github.com/videojs/video.js/blob/master/src/js/plugins.js#L7)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.media
|
||||
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [UNDEFINED](#undefined)
|
||||
- [ApiMethods](#apimethods)
|
||||
|
||||
---
|
||||
|
||||
## UNDEFINED
|
||||
|
||||
### ApiMethods
|
||||
> List of default API methods for any MediaTechController
|
||||
|
||||
_defined in_: [src/js/media/media.js#L169](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L169)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
API
|
||||
===
|
||||
|
||||
The Video.js API allows you to interact with the video through JavaScript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
|
||||
|
||||
Referencing the Player
|
||||
----------------------
|
||||
To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example\_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
|
||||
|
||||
```js
|
||||
var myPlayer = videojs('example_video_1');
|
||||
```
|
||||
|
||||
(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
|
||||
|
||||
Wait Until the Player is Ready
|
||||
------------------------------
|
||||
The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
|
||||
|
||||
```javascript
|
||||
videojs("example_video_1").ready(function(){
|
||||
var myPlayer = this;
|
||||
|
||||
// EXAMPLE: Start playing the video.
|
||||
myPlayer.play();
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
API Methods
|
||||
-----------
|
||||
Now that you have access to a ready player, you can control the video, get values, or respond to video events. The Video.js API function names follow the [HTML5 media API](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html). The main difference is that getter/setter functions are used for video properties.
|
||||
|
||||
```js
|
||||
|
||||
// setting a property on a bare HTML5 video element
|
||||
myVideoElement.currentTime = "120";
|
||||
|
||||
// setting a property on a Video.js player
|
||||
myPlayer.currentTime(120);
|
||||
|
||||
```
|
||||
|
||||
The full list of player API methods and events can be found in the [player API docs](../api/vjs.Player.md).
|
||||
@@ -3,13 +3,11 @@ Components
|
||||
The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the Component class, or a subclass of Component.
|
||||
|
||||
```js
|
||||
videojs.Control = videojs.Component.extend({});
|
||||
videojs.Button = videojs.Control.extend({});
|
||||
videojs.PlayToggle = videojs.Button.extend({});
|
||||
videojs.Control = videojs.Component.extend();
|
||||
videojs.Button = videojs.Control.extend();
|
||||
videojs.PlayToggle = videojs.Button.extend();
|
||||
```
|
||||
|
||||
(The Class interface itself is provided using John Resig's [simple class inheritance](http://ejohn.org/blog/simple-javascript-inheritance/) also found in [JSNinja](http://jsninja.com).
|
||||
|
||||
The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.
|
||||
|
||||
```js
|
||||
@@ -59,33 +57,3 @@ Player
|
||||
VolumeHandle
|
||||
MuteToggle
|
||||
```
|
||||
|
||||
Component Methods
|
||||
-----------------
|
||||
|
||||
### addChild() ###
|
||||
Add a child component to myComponent. This will also insert the child component's DOM element into myComponent's element.
|
||||
|
||||
|
||||
|
||||
```js
|
||||
myComponent.addChild('');
|
||||
```
|
||||
|
||||
|
||||
myPlayer.addChild('BigPlayButton');
|
||||
myPlayer.removeChild('BigPlayButton');
|
||||
myPlayer.getChild('BiPlayButton');
|
||||
myPlayer.children();
|
||||
|
||||
|
||||
myPlayer.getChildById('biPlayButton');
|
||||
myPlayer.removeChildById('my-player-big-play-button');
|
||||
|
||||
el();
|
||||
getContentEl();
|
||||
getChildren();
|
||||
|
||||
getParent();
|
||||
|
||||
#home_player_big-play-button
|
||||
@@ -10,17 +10,25 @@ You can download the Video.js source and host it on your own servers, or use the
|
||||
|
||||
> NOTE: If you're already using an HTML5 shiv like [Modernizr](http://modernizr.com/) you can include the Video.js JavaScript anywhere, however make sure your version of Modernizr includes the shiv for video.
|
||||
|
||||
> If you're not using something like Modernizr but still want to include Video.JS before the closing body tag, you can add your own shiv. Include this in the head of your document:
|
||||
|
||||
> ```html
|
||||
<script type="text/javascript">
|
||||
document.createElement('video');document.createElement('audio');document.createElement('track');
|
||||
</script>
|
||||
```
|
||||
|
||||
### CDN Version ###
|
||||
```html
|
||||
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
|
||||
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
|
||||
<link href="//vjs.zencdn.net/4.7/video-js.css" rel="stylesheet">
|
||||
<script src="//vjs.zencdn.net/4.7/video.js"></script>
|
||||
```
|
||||
|
||||
### Self Hosted. ###
|
||||
With the self hosted option you'll also want to update the location of the video-js.swf file.
|
||||
```html
|
||||
<link href="http://example.com/path/to/video-js.css" rel="stylesheet">
|
||||
<script src="http://example.com/path/to/video.js"></script>
|
||||
<link href="//example.com/path/to/video-js.css" rel="stylesheet">
|
||||
<script src="//example.com/path/to/video.js"></script>
|
||||
<script>
|
||||
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
|
||||
</script>
|
||||
@@ -31,7 +39,7 @@ Step 2: Add an HTML5 video tag to your page.
|
||||
--------------------------------------------
|
||||
With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.
|
||||
|
||||
1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.
|
||||
1. The 'data-setup' Attribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.
|
||||
|
||||
2. The 'id' Attribute: Should be used and unique for every video on the same page.
|
||||
|
||||
@@ -39,8 +47,7 @@ With Video.js you just use an HTML5 video tag to embed a video. Video.js will th
|
||||
- `video-js` applies styles that are required for Video.js functionality, like fullscreen and subtitles.
|
||||
- `vjs-default-skin` applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
|
||||
|
||||
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
|
||||
|
||||
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.*
|
||||
```html
|
||||
<video id="example_video_1" class="video-js vjs-default-skin"
|
||||
controls preload="auto" width="640" height="264"
|
||||
@@ -49,9 +56,20 @@ Otherwise include/exclude attributes, settings, sources, and tracks exactly as y
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
|
||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||
</video>
|
||||
```
|
||||
|
||||
By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional `vjs-big-play-centered` class to your video element. For example:
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
|
||||
controls preload="auto" width="640" height="264"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
data-setup='{"example_option":true}'>
|
||||
...
|
||||
</video>
|
||||
```
|
||||
|
||||
Alternative Setup for Dynamically Loaded HTML
|
||||
---------------------------------------------
|
||||
@@ -68,3 +86,19 @@ The second argument is an options object. It allows you to set additional option
|
||||
|
||||
The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.
|
||||
|
||||
Instead of using an element ID, you can also pass a reference to the element itself.
|
||||
|
||||
```js
|
||||
videojs(document.getElementById('example_video_1'), {}, function() {
|
||||
// This is functionally the same as the previous example.
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
|
||||
// You can grab an element by class if you'd like, just make sure
|
||||
// if it's an array that you pick one (here we chose the first).
|
||||
});
|
||||
```
|
||||
|
||||
\* If you have trouble playing back content you know is in the [correct format](http://blog.zencoder.com/2013/09/13/what-formats-do-i-need-for-html5-video/), your HTTP server might not be delivering the content with the correct [MIME type](http://en.wikipedia.org/wiki/Internet_media_type#Type_video). Please double check your content's headers before opening an [issue](https://github.com/videojs/video.js/blob/master/CONTRIBUTING.md).
|
||||
@@ -3,9 +3,15 @@ Skins
|
||||
|
||||
The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin.
|
||||
|
||||
## Icons
|
||||
|
||||
New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font.
|
||||
|
||||
The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
|
||||
All of the icons are available as variables in the [LESS](https://github.com/videojs/video.js/blob/master/src/css/video-js.less#L87-L99) source, making it easy to replace icons (such as the loading spinner). The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
|
||||
|
||||

|
||||
|
||||
## Customization
|
||||
|
||||
When you create a new skin, you can either override styles in the default skin:
|
||||
|
||||
@@ -20,4 +26,3 @@ Or remove the 'vjs-default-skin' class from the video tag and create a new skin
|
||||
```
|
||||
|
||||
More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins).
|
||||
|
||||
@@ -66,35 +66,3 @@ You may optionally use the last `/` as the separator between connection and stre
|
||||
<source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4">
|
||||
|
||||
All four RTMP protocols are valid in the `src` (RTMP, RTMPT, RTMPE, and RTMPS).
|
||||
|
||||
Youtube Technology
|
||||
==================
|
||||
To add a youtube source to your video tag, use the following source:
|
||||
|
||||
<source src="http://www.youtube.com/watch?v=[ytVideoId]" type="video/youtube"
|
||||
|
||||
Important Note:
|
||||
------------------
|
||||
> You can simply copy and paste the url of the youtube page from the browser and
|
||||
> the Youtube Tech will be able to find the video id by itself. This is just the
|
||||
> minimum needed to get the video working. (Useful for data storage)
|
||||
|
||||
|
||||
Youtube Technology - Extra Options
|
||||
----------------------------------
|
||||
|
||||
In Addition to the natively supported options, the Youtube API supports the following
|
||||
added options:
|
||||
|
||||
### ytcontrols ###
|
||||
Type: Boolean (T/F)
|
||||
Default: False
|
||||
|
||||
Determines whether to show Youtube's basic Red/Black default play bar skin or to hide
|
||||
it and use the native video-js play bar.
|
||||
|
||||
### hd ###
|
||||
Type: Boolean (T/F)
|
||||
Default: False
|
||||
|
||||
Determines whether or not to play back the video in HD.
|
||||
@@ -13,7 +13,7 @@ Creating the Text File
|
||||
----------------------
|
||||
Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, and end time, and text to display. [Microsoft has a builder](http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/) that can help you get started on the file.
|
||||
|
||||
When creating captions, there's also additional [caption formatting techniques](http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) that would be good to use, like brackets around sound effects. [ sound effect ]
|
||||
When creating captions, there's also additional [caption formatting techniques] (http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) that would be good to use, like brackets around sound effects: [ sound effect ]. If you'd like a more in depth style guide for captioning, you can reference the [Captioning Key](http://www.dcmp.org/captioningkey/), but keep in mind not all features are supported by WebVTT or (more likely) the Video.js WebVTT implementation.
|
||||
|
||||
Adding to Video.js
|
||||
------------------
|
||||
+20
-12
@@ -2,26 +2,34 @@
|
||||
|
||||
<h1>Video.js Documentation</h1>
|
||||
|
||||
The Video.js documentation is here to help you setup and use the player. These docs can be found and contributed to in the [Video.js library repository](https://github.com/videojs/video.js/tree/master/docs).
|
||||
There are two categories of docs: [Guides](./guides/) and [API docs](./api/). Guides explain general topics and use cases (e.g. setup). API docs are automatically generated from the codebase and give specific details about functions, properties, and events.
|
||||
|
||||
## Getting Started
|
||||
(Corrections and additions welcome)
|
||||
|
||||
* [Setup](setup.md) - Check out the [5 second setup](http://videojs.com/#section5) if you're just getting started. The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
|
||||
## Guides
|
||||
|
||||
* [Options](options.md) - There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.JS specific options.
|
||||
### Getting Started
|
||||
|
||||
* [Tracks](tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
|
||||
* [Setup](./guides/setup.md) - Check out the [5 second setup](http://videojs.com/#section5) if you're just getting started. The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
|
||||
|
||||
## Customizing
|
||||
* [Options](./guides/options.md) - There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.JS specific options.
|
||||
|
||||
* [API](api.md) - The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
|
||||
* [Tracks](./guides/tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
|
||||
|
||||
* [Skins](skins.md) - You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together.
|
||||
### Customizing
|
||||
|
||||
* [Tech](tech.md) - A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
|
||||
* [API](./guides/api.md) - The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
|
||||
|
||||
* [Plugins](plugins.md) - You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or use one created by someone else.
|
||||
* [Skins](./guides/skins.md) - You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together.
|
||||
|
||||
## Resources
|
||||
* [Tech](./guides/tech.md) - A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
|
||||
|
||||
* [Glossary](glossary.md) - Some helpful definitions.
|
||||
* [Plugins](./guides/plugins.md) - You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or use one created by someone else.
|
||||
|
||||
### Resources
|
||||
|
||||
* [Glossary](./guides/glossary.md) - Some helpful definitions.
|
||||
|
||||
## API Docs
|
||||
- The most relevant API doc is the [player API doc](./api/vjs.Player.md).
|
||||
- [Full list of API Docs](./api/)
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"Play": "Juego",
|
||||
"Pause": "Pausa",
|
||||
"Current Time": "Tiempo Actual",
|
||||
"Duration Time": "Tiempo de Duracion",
|
||||
"Remaining Time": "Tiempo Restante",
|
||||
"Stream Type": "Tipo de Transmision",
|
||||
"LIVE": "En Vivo",
|
||||
"Loaded": "Cargado",
|
||||
"Progress": "Progreso",
|
||||
"Fullscreen": "Pantalla Completa",
|
||||
"Non-Fullscreen": "No Pantalla Completa",
|
||||
"Mute": "Mudo",
|
||||
"Unmuted": "Activar sonido",
|
||||
"Playback Rate": "Reproduccion Cambio",
|
||||
"Subtitles": "Subtitulos",
|
||||
"subtitles off": "subtitulos fuera",
|
||||
"Captions": "Subtitulos",
|
||||
"captions off": "subtitulos fuera",
|
||||
"Chapters": "Capitulos",
|
||||
"You aborted the video playback": "Ha anulado la reproduccion de video",
|
||||
"A network error caused the video download to fail part-way.": "Un error en la red hizo que la descarga de video falle parte del camino.",
|
||||
"The video could not be loaded, either because the server or network failed or because the format is not supported.": "El video no se puede cargar, ya sea porque el servidor o la red fracasaron o porque el formato no es compatible.",
|
||||
"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproduccion de video se ha cancelado debido a un problema de corrupcion o porque el video utilizado cuenta con su navegador no soporta.",
|
||||
"No compatible source was found for this video.": "Ninguna fuente compatible se encontro para este video."
|
||||
}
|
||||
+42
-32
@@ -1,9 +1,10 @@
|
||||
{
|
||||
"name": "video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"version": "4.2.0",
|
||||
"copyright": "Copyright 2013 Brightcove, Inc. https://github.com/videojs/video.js/blob/master/LICENSE",
|
||||
"version": "4.7.1",
|
||||
"copyright": "Copyright 2014 Brightcove, Inc. https://github.com/videojs/video.js/blob/master/LICENSE",
|
||||
"keywords": [
|
||||
"videojs",
|
||||
"html5",
|
||||
"flash",
|
||||
"video",
|
||||
@@ -12,44 +13,53 @@
|
||||
"homepage": "http://videojs.com",
|
||||
"author": "Steve Heffernan",
|
||||
"scripts": {
|
||||
"test": "grunt test --verbose"
|
||||
"test": "grunt test"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/zencoder/video-js.git"
|
||||
"url": "https://github.com/videojs/video.js.git"
|
||||
},
|
||||
"main": "./dist/video-js/video.js",
|
||||
"dependencies": {
|
||||
"videojs-swf": "4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt-cli": "~0.1.0",
|
||||
"grunt": "~0.4.0",
|
||||
"grunt-contrib-jshint": "~0.4.3",
|
||||
"grunt-contrib-watch": "~0.1.4",
|
||||
"grunt-contrib-qunit": "~0.2.1",
|
||||
"calcdeps": "~0.1.7",
|
||||
"grunt-contrib-clean": "~0.4.0a",
|
||||
"grunt-contrib-copy": "~0.3.2",
|
||||
"mocha": "~1.8.1",
|
||||
"chg": "~0.1.8",
|
||||
"contribflow": "~0.2.0",
|
||||
"grunt-s3": "~0.2.0-alpha",
|
||||
"semver": "~1.1.4",
|
||||
"github": "~0.1.14",
|
||||
"grunt": "^0.4.4",
|
||||
"grunt-banner": "~0.2.0",
|
||||
"grunt-cli": "~0.1.0",
|
||||
"grunt-contrib-clean": "~0.4.0a",
|
||||
"grunt-contrib-connect": "~0.7.1",
|
||||
"grunt-contrib-copy": "~0.3.2",
|
||||
"grunt-contrib-cssmin": "~0.6.0",
|
||||
"grunt-contrib-jshint": "~0.4.3",
|
||||
"grunt-contrib-less": "~0.6.4",
|
||||
"grunt-contrib-qunit": "~0.2.1",
|
||||
"grunt-contrib-watch": "~0.1.4",
|
||||
"grunt-karma": "^0.8.3",
|
||||
"grunt-s3": "~0.2.0-alpha",
|
||||
"grunt-tagrelease": "~0.3.3",
|
||||
"grunt-version": "~0.3.0",
|
||||
"grunt-zip": "0.10.2",
|
||||
"karma": "^0.12.14",
|
||||
"karma-chrome-launcher": "^0.1.3",
|
||||
"karma-firefox-launcher": "^0.1.3",
|
||||
"karma-ie-launcher": "^0.1.5",
|
||||
"karma-opera-launcher": "~0.1.0",
|
||||
"karma-phantomjs-launcher": "^0.1.4",
|
||||
"karma-qunit": "^0.1.2",
|
||||
"karma-safari-launcher": "^0.1.1",
|
||||
"karma-sauce-launcher": "^0.2.8",
|
||||
"karma-sinon": "^1.0.3",
|
||||
"mocha": "~1.8.1",
|
||||
"open": "0.0.4",
|
||||
"qunitjs": "~1.14.0",
|
||||
"semver": "~1.1.4",
|
||||
"sinon": "~1.9.1",
|
||||
"uglify-js": "~2.3.6",
|
||||
"grunt-contrib-less": "~0.6.4"
|
||||
},
|
||||
"testling": {
|
||||
"browsers": [
|
||||
"ie6",
|
||||
"ie7",
|
||||
"ie8",
|
||||
"ie9",
|
||||
"firefox/15",
|
||||
"chrome/22",
|
||||
"opera/12",
|
||||
"safari/5.1"
|
||||
],
|
||||
"harness": "mocha-qunit",
|
||||
"scripts": [
|
||||
"src/js/*.js",
|
||||
"test/unit/*.js"
|
||||
]
|
||||
"videojs-doc-generator": "0.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
vjs.options.flash.swf = '../src/swf/video-js.swf'
|
||||
vjs.options.flash.swf = '../node_modules/videojs-swf/dist/video-js.swf'
|
||||
</script>
|
||||
|
||||
</head>
|
||||
@@ -25,7 +25,7 @@
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
|
||||
<track kind="captions" src="../build/demo-files/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<p>Video Playback Not Supported</p>
|
||||
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
||||
</video>
|
||||
|
||||
<script>
|
||||
|
||||
Arquivo normal → Arquivo executável
BIN
Arquivo binário não exibido.
Arquivo normal → Arquivo executável
+23
-35
@@ -1,40 +1,28 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="16"></iconset>
|
||||
</metadata>
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="VideoJS" horiz-adv-x="512" >
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph unicode="" d="M 512.00,480.00 L 512.00,272.00 L 432.00,352.00 L 336.00,256.00 L 288.00,304.00 L 384.00,400.00 L 304.00,480.00 ZM 224.00,144.00 L 128.00,48.00 L 208.00-32.00 L 0.00-32.00 L 0.00,176.00 L 80.00,96.00 L 176.00,192.00 Z" />
|
||||
<glyph unicode="" d="M 96.00,416.00L 416.00,224.00L 96.00,32.00 z" />
|
||||
<glyph unicode="" d="M 64.00,416.00L 224.00,416.00L 224.00,32.00L 64.00,32.00zM 288.00,416.00L 448.00,416.00L 448.00,32.00L 288.00,32.00z" />
|
||||
<glyph unicode="" d="M 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" />
|
||||
<glyph unicode="" d="M 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
|
||||
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" />
|
||||
<glyph unicode="" d="M 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
|
||||
c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
|
||||
C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
|
||||
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" />
|
||||
<glyph unicode="" d="M 445.02,18.98c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.373-9.372,24.568,0.00,33.941
|
||||
C 471.868,103.771, 496.001,162.03, 496.001,224.00c0.00,61.969-24.133,120.229-67.952,164.049c-9.372,9.373-9.372,24.569,0.00,33.941
|
||||
c 9.372,9.372, 24.569,9.372, 33.941,0.00c 52.885-52.886, 82.011-123.20, 82.011-197.99c0.00-74.791-29.126-145.104-82.011-197.99
|
||||
C 457.304,21.323, 451.162,18.98, 445.02,18.98zM 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
|
||||
c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
|
||||
C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
|
||||
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" horiz-adv-x="544" />
|
||||
<glyph unicode="" d="M 256.00,480.00L 96.00,224.00L 256.00-32.00L 416.00,224.00 z" />
|
||||
<glyph unicode="" d="M 0.00,480.00 L 687.158,480.00 L 687.158-35.207 L 0.00-35.207 L 0.00,480.00 z M 622.731,224.638 C 621.878,314.664 618.46,353.922 597.131,381.656 C 593.291,387.629 586.038,391.042 580.065,395.304 C 559.158,410.669 460.593,416.211 346.247,416.211 C 231.896,416.211 128.642,410.669 108.162,395.304 C 101.762,391.042 94.504,387.629 90.242,381.656 C 69.331,353.922 66.349,314.664 65.069,224.638 C 66.349,134.607 69.331,95.353 90.242,67.62 C 94.504,61.22 101.762,58.233 108.162,53.967 C 128.642,38.18 231.896,33.06 346.247,32.207 C 460.593,33.06 559.158,38.18 580.065,53.967 C 586.038,58.233 593.291,61.22 597.131,67.62 C 618.46,95.353 621.878,134.607 622.731,224.638 z M 331.179,247.952 C 325.389,318.401 287.924,359.905 220.901,359.905 C 159.672,359.905 111.54,304.689 111.54,215.965 C 111.54,126.859 155.405,71.267 227.907,71.267 C 285.79,71.267 326.306,113.916 332.701,184.742 L 263.55,184.742 C 260.81,158.468 249.843,138.285 226.69,138.285 C 190.136,138.285 183.435,174.462 183.435,212.92 C 183.435,265.854 198.665,292.886 223.951,292.886 C 246.492,292.886 260.81,276.511 262.939,247.952 L 331.179,247.952 z M 570.013,247.952 C 564.228,318.401 526.758,359.905 459.74,359.905 C 398.507,359.905 350.379,304.689 350.379,215.965 C 350.379,126.859 394.244,71.267 466.746,71.267 C 524.625,71.267 565.14,113.916 571.536,184.742 L 502.384,184.742 C 499.649,158.468 488.682,138.285 465.529,138.285 C 428.971,138.285 422.27,174.462 422.27,212.92 C 422.27,265.854 437.504,292.886 462.785,292.886 C 485.327,292.886 499.649,276.511 501.778,247.952 L 570.013,247.952 z " horiz-adv-x="687.1578947368421" />
|
||||
<glyph unicode="" d="M 64.00,416.00L 448.00,416.00L 448.00,32.00L 64.00,32.00z" />
|
||||
<glyph unicode="" d="M 192.00,416.00A64.00,64.00 12780.00 1 1 320.00,416A64.00,64.00 12780.00 1 1 192.00,416zM 327.765,359.765A64.00,64.00 12780.00 1 1 455.765,359.765A64.00,64.00 12780.00 1 1 327.765,359.765zM 416.00,224.00A32.00,32.00 12780.00 1 1 480.00,224A32.00,32.00 12780.00 1 1 416.00,224zM 359.765,88.235A32.00,32.00 12780.00 1 1 423.765,88.23500000000001A32.00,32.00 12780.00 1 1 359.765,88.23500000000001zM 224.001,32.00A32.00,32.00 12780.00 1 1 288.001,32A32.00,32.00 12780.00 1 1 224.001,32zM 88.236,88.235A32.00,32.00 12780.00 1 1 152.236,88.23500000000001A32.00,32.00 12780.00 1 1 88.236,88.23500000000001zM 72.236,359.765A48.00,48.00 12780.00 1 1 168.236,359.765A48.00,48.00 12780.00 1 1 72.236,359.765zM 28.00,224.00A36.00,36.00 12780.00 1 1 100.00,224A36.00,36.00 12780.00 1 1 28.00,224z" />
|
||||
<glyph unicode="" d="M 224.00,192.00 L 224.00-16.00 L 144.00,64.00 L 48.00-32.00 L 0.00,16.00 L 96.00,112.00 L 16.00,192.00 ZM 512.00,432.00 L 416.00,336.00 L 496.00,256.00 L 288.00,256.00 L 288.00,464.00 L 368.00,384.00 L 464.00,480.00 Z" />
|
||||
<glyph unicode="" d="M 256.00,448.00 C 397.385,448.00 512.00,354.875 512.00,240.00 C 512.00,125.124 397.385,32.00 256.00,32.00 C 242.422,32.00 229.095,32.867 216.088,34.522 C 161.099-20.467 95.463-30.328 32.00-31.776 L 32.00-18.318 C 66.268-1.529 96.00,29.052 96.00,64.00 C 96.00,68.877 95.621,73.665 94.918,78.348 C 37.02,116.48 0.00,174.725 0.00,240.00 C 0.00,354.875 114.615,448.00 256.00,448.00 Z" />
|
||||
<glyph unicode=" " horiz-adv-x="256" />
|
||||
<glyph class="hidden" unicode="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " d="" horiz-adv-x="512" />
|
||||
<glyph unicode="" d="M1024 960v-416l-160 160-192-192-96 96 192 192-160 160zM448 288l-192-192 160-160h-416v416l160-160 192 192z" />
|
||||
<glyph unicode="" d="M192 832l640-384-640-384z" />
|
||||
<glyph unicode="" d="M128 832h320v-768h-320zM576 832h320v-768h-320z" />
|
||||
<glyph unicode="" d="M401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
|
||||
<glyph unicode="" d="M549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
|
||||
<glyph unicode="" d="M719.53 128.47c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.592 126.53-190.076 126.53-305.468 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060zM549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
|
||||
<glyph unicode="" d="M890.040 37.96c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.746-18.744 49.136 0 67.882 87.638 87.642 135.904 204.16 135.904 328.1 0 123.938-48.266 240.458-135.904 328.098-18.744 18.746-18.744 49.138 0 67.882 18.744 18.744 49.138 18.744 67.882 0 105.77-105.772 164.022-246.4 164.022-395.98 0-149.582-58.252-290.208-164.022-395.98-9.372-9.374-21.656-14.060-33.94-14.060zM719.53 128.47c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.592 126.53-190.076 126.53-305.468 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060zM549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" horiz-adv-x="1088" />
|
||||
<glyph unicode="" d="M512 960l-320-512 320-512 320 512z" />
|
||||
<glyph unicode="" d="M0 960h1374.316v-1030.414h-1374.316v1030.414zM1245.462 449.276c-1.706 180.052-8.542 258.568-51.2 314.036-7.68 11.946-22.186 18.772-34.132 27.296-41.814 30.73-238.944 41.814-467.636 41.814-228.702 0-435.21-11.084-476.17-41.814-12.8-8.524-27.316-15.35-35.84-27.296-41.822-55.468-47.786-133.984-50.346-314.036 2.56-180.062 8.524-258.57 50.346-314.036 8.524-12.8 23.040-18.774 35.84-27.306 40.96-31.574 247.468-41.814 476.17-43.52 228.692 1.706 425.822 11.946 467.636 43.52 11.946 8.532 26.452 14.506 34.132 27.306 42.658 55.466 49.494 133.974 51.2 314.036zM662.358 495.904c-11.58 140.898-86.51 223.906-220.556 223.906-122.458 0-218.722-110.432-218.722-287.88 0-178.212 87.73-289.396 232.734-289.396 115.766 0 196.798 85.298 209.588 226.95h-138.302c-5.48-52.548-27.414-92.914-73.72-92.914-73.108 0-86.51 72.354-86.51 149.27 0 105.868 30.46 159.932 81.032 159.932 45.082 0 73.718-32.75 77.976-89.868h136.48zM1140.026 495.904c-11.57 140.898-86.51 223.906-220.546 223.906-122.466 0-218.722-110.432-218.722-287.88 0-178.212 87.73-289.396 232.734-289.396 115.758 0 196.788 85.298 209.58 226.95h-138.304c-5.47-52.548-27.404-92.914-73.71-92.914-73.116 0-86.518 72.354-86.518 149.27 0 105.868 30.468 159.932 81.030 159.932 45.084 0 73.728-32.75 77.986-89.868h136.47z" horiz-adv-x="1374" />
|
||||
<glyph unicode="" d="M128 832h768v-768h-768z" />
|
||||
<glyph unicode="" d="M384 832c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128zM655.53 719.53c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128zM832 448c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64zM719.53 176.47c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64zM448.002 64c0 0 0 0 0 0 0-35.346 28.654-64 64-64 35.346 0 64 28.654 64 64 0 0 0 0 0 0 0 0 0 0 0 0 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64s0 0 0 0zM176.472 176.47c0 0 0 0 0 0 0-35.346 28.654-64 64-64 35.346 0 64 28.654 64 64 0 0 0 0 0 0 0 0 0 0 0 0 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64s0 0 0 0zM144.472 719.53c0 0 0 0 0 0 0-53.019 42.981-96 96-96 53.019 0 96 42.981 96 96 0 0 0 0 0 0 0 0 0 0 0 0 0 53.019-42.981 96-96 96-53.019 0-96-42.981-96-96s0 0 0 0zM56 448c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.765-32.235 72-72 72-39.765 0-72-32.235-72-72z" />
|
||||
<glyph unicode="" d="M448 384v-416l-160 160-192-192-96 96 192 192-160 160zM1024 864l-192-192 160-160h-416v416l160-160 192 192z" />
|
||||
<glyph unicode="" d="M512 896c282.77 0 512-186.25 512-416 0-229.752-229.23-416-512-416-27.156 0-53.81 1.734-79.824 5.044-109.978-109.978-241.25-129.7-368.176-132.596v26.916c68.536 33.578 128 94.74 128 164.636 0 9.754-0.758 19.33-2.164 28.696-115.796 76.264-189.836 192.754-189.836 323.304 0 229.75 229.23 416 512 416z" />
|
||||
<glyph unicode="" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 704c141.384 0 256-114.616 256-256s-114.616-256-256-256-256 114.616-256 256 114.616 256 256 256zM817.47 142.53c-81.594-81.594-190.080-126.53-305.47-126.53-115.392 0-223.876 44.936-305.47 126.53-81.594 81.594-126.53 190.078-126.53 305.47 0 115.39 44.936 223.876 126.53 305.47l67.882-67.882c0 0 0 0 0 0-131.006-131.006-131.006-344.17 0-475.176 63.462-63.462 147.838-98.412 237.588-98.412 89.748 0 174.124 34.95 237.588 98.412 131.006 131.006 131.006 344.168 0 475.176l67.882 67.882c81.594-81.594 126.53-190.080 126.53-305.47 0-115.392-44.936-223.876-126.53-305.47z" />
|
||||
<glyph unicode="" d="M864 256c-45.16 0-85.92-18.738-115.012-48.83l-431.004 215.502c1.314 8.252 2.016 16.706 2.016 25.328s-0.702 17.076-2.016 25.326l431.004 215.502c29.092-30.090 69.852-48.828 115.012-48.828 88.366 0 160 71.634 160 160s-71.634 160-160 160-160-71.634-160-160c0-8.622 0.704-17.076 2.016-25.326l-431.004-215.504c-29.092 30.090-69.852 48.83-115.012 48.83-88.366 0-160-71.636-160-160 0-88.368 71.634-160 160-160 45.16 0 85.92 18.738 115.012 48.828l431.004-215.502c-1.312-8.25-2.016-16.704-2.016-25.326 0-88.368 71.634-160 160-160s160 71.632 160 160c0 88.364-71.634 160-160 160z" />
|
||||
<glyph unicode="" d="M1024 448c-1.278 66.862-15.784 133.516-42.576 194.462-26.704 61-65.462 116.258-113.042 161.92-47.552 45.696-103.944 81.82-164.984 105.652-61.004 23.924-126.596 35.352-191.398 33.966-64.81-1.282-129.332-15.374-188.334-41.356-59.048-25.896-112.542-63.47-156.734-109.576-44.224-46.082-79.16-100.708-102.186-159.798-23.114-59.062-34.128-122.52-32.746-185.27 1.286-62.76 14.964-125.148 40.134-182.206 25.088-57.1 61.476-108.828 106.11-151.548 44.61-42.754 97.472-76.504 154.614-98.72 57.118-22.304 118.446-32.902 179.142-31.526 60.708 1.29 120.962 14.554 176.076 38.914 55.15 24.282 105.116 59.48 146.366 102.644 41.282 43.14 73.844 94.236 95.254 149.43 13.034 33.458 21.88 68.4 26.542 103.798 1.246-0.072 2.498-0.12 3.762-0.12 35.346 0 64 28.652 64 64 0 1.796-0.094 3.572-0.238 5.332h0.238zM922.306 278.052c-23.472-53.202-57.484-101.4-99.178-141.18-41.67-39.81-91-71.186-144.244-91.79-53.228-20.678-110.29-30.452-166.884-29.082-56.604 1.298-112.596 13.736-163.82 36.474-51.25 22.666-97.684 55.49-135.994 95.712-38.338 40.198-68.528 87.764-88.322 139.058-19.87 51.284-29.228 106.214-27.864 160.756 1.302 54.552 13.328 108.412 35.254 157.69 21.858 49.3 53.498 93.97 92.246 130.81 38.73 36.868 84.53 65.87 133.874 84.856 49.338 19.060 102.136 28.006 154.626 26.644 52.5-1.306 104.228-12.918 151.562-34.034 47.352-21.050 90.256-51.502 125.624-88.782 35.396-37.258 63.21-81.294 81.39-128.688 18.248-47.392 26.782-98.058 25.424-148.496h0.238c-0.144-1.76-0.238-3.536-0.238-5.332 0-33.012 24.992-60.174 57.086-63.624-6.224-34.822-16.53-68.818-30.78-100.992z" />
|
||||
<glyph unicode="" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96 53.020 0 96 42.98 96 96 0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96-53.020 0-96-42.98-96-96 0-282.77 229.23-512 512-512z" />
|
||||
<glyph unicode="" d="M1024 351.906v192.188l-146.774 24.462c-5.958 18.132-13.222 35.668-21.694 52.5l86.454 121.034-135.896 135.898-120.826-86.304c-16.91 8.554-34.538 15.888-52.768 21.902l-24.402 146.414h-192.188l-24.402-146.416c-18.23-6.014-35.858-13.348-52.766-21.902l-120.828 86.304-135.898-135.898 86.454-121.036c-8.47-16.83-15.734-34.366-21.692-52.498l-146.774-24.46v-192.188l147.118-24.52c5.96-17.968 13.21-35.348 21.642-52.030l-86.748-121.448 135.898-135.896 121.654 86.894c16.602-8.35 33.89-15.528 51.764-21.434l24.578-147.472h192.188l24.578 147.474c17.874 5.906 35.162 13.084 51.766 21.432l121.652-86.892 135.896 135.896-86.744 121.446c8.432 16.682 15.678 34.062 21.64 52.032l147.118 24.518zM512 320c-70.692 0-128 57.306-128 128 0 70.692 57.308 128 128 128 70.694 0 128-57.308 128-128 0-70.694-57.306-128-128-128z" />
|
||||
</font></defs></svg>
|
||||
|
Antes Largura: | Altura: | Tamanho: 7.2 KiB Depois Largura: | Altura: | Tamanho: 10 KiB |
Arquivo normal → Arquivo executável
BIN
Arquivo binário não exibido.
Arquivo normal → Arquivo executável
BIN
Arquivo binário não exibido.
@@ -1,40 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="16"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="VideoJS" horiz-adv-x="512" >
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph unicode="" d="M 512.00,480.00 L 512.00,272.00 L 432.00,352.00 L 336.00,256.00 L 288.00,304.00 L 384.00,400.00 L 304.00,480.00 ZM 224.00,144.00 L 128.00,48.00 L 208.00-32.00 L 0.00-32.00 L 0.00,176.00 L 80.00,96.00 L 176.00,192.00 Z" data-tags="expand, enlarge, maximize, fullscreen" />
|
||||
<glyph unicode="" d="M 96.00,416.00L 416.00,224.00L 96.00,32.00 z" data-tags="play, media control, audio" />
|
||||
<glyph unicode="" d="M 64.00,416.00L 224.00,416.00L 224.00,32.00L 64.00,32.00zM 288.00,416.00L 448.00,416.00L 448.00,32.00L 288.00,32.00z" data-tags="pause, media control, audio" />
|
||||
<glyph unicode="" d="M 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-mute, speaker, media control, audio, mute" />
|
||||
<glyph unicode="" d="M 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
|
||||
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-low, speaker, media control, audio" />
|
||||
<glyph unicode="" d="M 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
|
||||
c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
|
||||
C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
|
||||
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-medium, speaker, media control, audio" />
|
||||
<glyph unicode="" d="M 445.02,18.98c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.373-9.372,24.568,0.00,33.941
|
||||
C 471.868,103.771, 496.001,162.03, 496.001,224.00c0.00,61.969-24.133,120.229-67.952,164.049c-9.372,9.373-9.372,24.569,0.00,33.941
|
||||
c 9.372,9.372, 24.569,9.372, 33.941,0.00c 52.885-52.886, 82.011-123.20, 82.011-197.99c0.00-74.791-29.126-145.104-82.011-197.99
|
||||
C 457.304,21.323, 451.162,18.98, 445.02,18.98zM 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
|
||||
c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
|
||||
C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
|
||||
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" horiz-adv-x="544" data-tags="volume-high, speaker, media control, audio" />
|
||||
<glyph unicode="" d="M 256.00,480.00L 96.00,224.00L 256.00-32.00L 416.00,224.00 z" data-tags="diamonds, bet, game, gamble, cards" />
|
||||
<glyph unicode="" d="M 0.00,480.00 L 687.158,480.00 L 687.158-35.207 L 0.00-35.207 L 0.00,480.00 z M 622.731,224.638 C 621.878,314.664 618.46,353.922 597.131,381.656 C 593.291,387.629 586.038,391.042 580.065,395.304 C 559.158,410.669 460.593,416.211 346.247,416.211 C 231.896,416.211 128.642,410.669 108.162,395.304 C 101.762,391.042 94.504,387.629 90.242,381.656 C 69.331,353.922 66.349,314.664 65.069,224.638 C 66.349,134.607 69.331,95.353 90.242,67.62 C 94.504,61.22 101.762,58.233 108.162,53.967 C 128.642,38.18 231.896,33.06 346.247,32.207 C 460.593,33.06 559.158,38.18 580.065,53.967 C 586.038,58.233 593.291,61.22 597.131,67.62 C 618.46,95.353 621.878,134.607 622.731,224.638 z M 331.179,247.952 C 325.389,318.401 287.924,359.905 220.901,359.905 C 159.672,359.905 111.54,304.689 111.54,215.965 C 111.54,126.859 155.405,71.267 227.907,71.267 C 285.79,71.267 326.306,113.916 332.701,184.742 L 263.55,184.742 C 260.81,158.468 249.843,138.285 226.69,138.285 C 190.136,138.285 183.435,174.462 183.435,212.92 C 183.435,265.854 198.665,292.886 223.951,292.886 C 246.492,292.886 260.81,276.511 262.939,247.952 L 331.179,247.952 z M 570.013,247.952 C 564.228,318.401 526.758,359.905 459.74,359.905 C 398.507,359.905 350.379,304.689 350.379,215.965 C 350.379,126.859 394.244,71.267 466.746,71.267 C 524.625,71.267 565.14,113.916 571.536,184.742 L 502.384,184.742 C 499.649,158.468 488.682,138.285 465.529,138.285 C 428.971,138.285 422.27,174.462 422.27,212.92 C 422.27,265.854 437.504,292.886 462.785,292.886 C 485.327,292.886 499.649,276.511 501.778,247.952 L 570.013,247.952 z " horiz-adv-x="687.1578947368421" data-tags="Closed_captioning_symbol" />
|
||||
<glyph unicode="" d="M 64.00,416.00L 448.00,416.00L 448.00,32.00L 64.00,32.00z" data-tags="stop, media control, audio, square" />
|
||||
<glyph unicode="" d="M 192.00,416.00A64.00,64.00 12780.00 1 1 320.00,416A64.00,64.00 12780.00 1 1 192.00,416zM 327.765,359.765A64.00,64.00 12780.00 1 1 455.765,359.765A64.00,64.00 12780.00 1 1 327.765,359.765zM 416.00,224.00A32.00,32.00 12780.00 1 1 480.00,224A32.00,32.00 12780.00 1 1 416.00,224zM 359.765,88.235A32.00,32.00 12780.00 1 1 423.765,88.23500000000001A32.00,32.00 12780.00 1 1 359.765,88.23500000000001zM 224.001,32.00A32.00,32.00 12780.00 1 1 288.001,32A32.00,32.00 12780.00 1 1 224.001,32zM 88.236,88.235A32.00,32.00 12780.00 1 1 152.236,88.23500000000001A32.00,32.00 12780.00 1 1 88.236,88.23500000000001zM 72.236,359.765A48.00,48.00 12780.00 1 1 168.236,359.765A48.00,48.00 12780.00 1 1 72.236,359.765zM 28.00,224.00A36.00,36.00 12780.00 1 1 100.00,224A36.00,36.00 12780.00 1 1 28.00,224z" data-tags="spinner, loading, busy, wait, wheel" />
|
||||
<glyph unicode="" d="M 224.00,192.00 L 224.00-16.00 L 144.00,64.00 L 48.00-32.00 L 0.00,16.00 L 96.00,112.00 L 16.00,192.00 ZM 512.00,432.00 L 416.00,336.00 L 496.00,256.00 L 288.00,256.00 L 288.00,464.00 L 368.00,384.00 L 464.00,480.00 Z" data-tags="contract, minimize, shrink, collapse" />
|
||||
<glyph unicode="" d="M 256.00,448.00 C 397.385,448.00 512.00,354.875 512.00,240.00 C 512.00,125.124 397.385,32.00 256.00,32.00 C 242.422,32.00 229.095,32.867 216.088,34.522 C 161.099-20.467 95.463-30.328 32.00-31.776 L 32.00-18.318 C 66.268-1.529 96.00,29.052 96.00,64.00 C 96.00,68.877 95.621,73.665 94.918,78.348 C 37.02,116.48 0.00,174.725 0.00,240.00 C 0.00,354.875 114.615,448.00 256.00,448.00 Z" data-tags="bubble, comment, chat, talk" />
|
||||
<glyph unicode=" " horiz-adv-x="256" />
|
||||
<glyph class="hidden" unicode="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
|
||||
</font></defs></svg>
|
||||
|
Antes Largura: | Altura: | Tamanho: 7.8 KiB |
Arquivo binário não exibido.
|
Antes Largura: | Altura: | Tamanho: 77 KiB |
+200
-10
@@ -78,7 +78,8 @@ The control icons are from a custom font. Each icon corresponds to a character
|
||||
src: url('font/vjs.eot');
|
||||
src: url('font/vjs.eot?#iefix') format('embedded-opentype'),
|
||||
url('font/vjs.woff') format('woff'),
|
||||
url('font/vjs.ttf') format('truetype');
|
||||
url('font/vjs.ttf') format('truetype'),
|
||||
url('font/vjs.svg#icomoon') format('svg');
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -95,8 +96,14 @@ The control icons are from a custom font. Each icon corresponds to a character
|
||||
@fullscreen-exit-icon: "\e00b";
|
||||
@square-icon: "\e009";
|
||||
@spinner-icon: "\e00a";
|
||||
@spinner2-icon: "\e00d";
|
||||
@spinner3-icon: "\e01e";
|
||||
@spinner4-icon: "\e01f";
|
||||
@subtitles-icon: "\e00c";
|
||||
@captions-icon: "\e008";
|
||||
@chapters-icon: "\e00c";
|
||||
@share-icon: "\e00e";
|
||||
@cog-icon: "\e600";
|
||||
|
||||
/* Base UI Component Classes
|
||||
--------------------------------------------------------------------------------
|
||||
@@ -189,6 +196,11 @@ The default control bar that is a container for most of the controls.
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The control bar shouldn't show after an error */
|
||||
.vjs-default-skin.vjs-error .vjs-control-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* IE8 is flakey with fonts, and you have to change the actual content to force
|
||||
fonts to show/hide properly.
|
||||
- "\9" IE8 hack didn't work for this
|
||||
@@ -256,6 +268,27 @@ fonts to show/hide properly.
|
||||
content: @pause-icon;
|
||||
}
|
||||
|
||||
/* Playback toggle
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value {
|
||||
font-size: 1.5em;
|
||||
line-height: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
|
||||
width: 4em;
|
||||
left: -2em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Volume/Mute
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vjs-default-skin .vjs-mute-control,
|
||||
@@ -299,6 +332,8 @@ fonts to show/hide properly.
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 0.5em;
|
||||
/* assuming volume starts at 1.0 */
|
||||
width: 100%;
|
||||
|
||||
background: @slider-bar-color
|
||||
url(@slider-bar-pattern)
|
||||
@@ -307,6 +342,10 @@ fonts to show/hide properly.
|
||||
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
/* Assumes volume starts at 1.0. If you change the size of the
|
||||
handle relative to the volume bar, you'll need to update this value
|
||||
too. */
|
||||
left: 4.5em;
|
||||
}
|
||||
|
||||
.vjs-default-skin .vjs-volume-handle:before {
|
||||
@@ -358,12 +397,15 @@ fonts to show/hide properly.
|
||||
|
||||
/* Progress Bars */
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-load-progress,
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-load-progress div {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* updated by javascript during playback */
|
||||
width: 0;
|
||||
/* Needed for IE6 *///
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -384,7 +426,14 @@ fonts to show/hide properly.
|
||||
}
|
||||
.vjs-default-skin .vjs-load-progress {
|
||||
background: rgb(100, 100, 100) /* IE8- Fallback */;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* there are child elements of the load progress bar that represent the
|
||||
specific time ranges that have been buffered */
|
||||
.vjs-default-skin .vjs-load-progress div {
|
||||
background: rgb(120, 120, 120) /* IE8- Fallback */;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.vjs-default-skin .vjs-seek-handle {
|
||||
@@ -396,6 +445,27 @@ fonts to show/hide properly.
|
||||
padding-top: 0.1em /* Minor adjustment */;
|
||||
}
|
||||
|
||||
/* Live Mode
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin.vjs-live .vjs-time-controls,
|
||||
.vjs-default-skin.vjs-live .vjs-time-divider,
|
||||
.vjs-default-skin.vjs-live .vjs-progress-control {
|
||||
display: none;
|
||||
}
|
||||
.vjs-default-skin.vjs-live .vjs-live-display {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Live Display
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-live-display {
|
||||
display: none;
|
||||
font-size: 1em;
|
||||
line-height: 3em;
|
||||
}
|
||||
|
||||
/* Time Display
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
@@ -433,8 +503,8 @@ easily in the skin designer. http://designer.videojs.com/
|
||||
*/
|
||||
.vjs-default-skin .vjs-big-play-button {
|
||||
// Calculate total width/height so we're able to center the button
|
||||
@total-width: @big-play-width + (@big-play-border-width * 2);
|
||||
@total-height: @big-play-height + (@big-play-border-width * 2);
|
||||
@total-width: (@big-play-width + (@big-play-border-width * 2));
|
||||
@total-height: (@big-play-height + (@big-play-border-width * 2));
|
||||
// Position the button using the absolute-align mixin (bottom of page)
|
||||
.absolute-align(@big-play-align, @big-play-margin, @total-width);
|
||||
.absolute-align(@big-play-vertical-align, @big-play-margin, @total-height);
|
||||
@@ -460,6 +530,15 @@ easily in the skin designer. http://designer.videojs.com/
|
||||
.transition(all 0.4s);
|
||||
}
|
||||
|
||||
/* Optionally center */
|
||||
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
|
||||
@total-width: (@big-play-width + (@big-play-border-width * 2));
|
||||
@total-height: (@big-play-height + (@big-play-border-width * 2));
|
||||
|
||||
.absolute-align(center, @big-play-margin, @total-width);
|
||||
.absolute-align(middle, @big-play-margin, @total-height);
|
||||
}
|
||||
|
||||
/* Hide if controls are disabled */
|
||||
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
|
||||
display: none;
|
||||
@@ -501,16 +580,72 @@ easily in the skin designer. http://designer.videojs.com/
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vjs-error .vjs-big-play-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Error Display
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.vjs-error-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vjs-error .vjs-error-display {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vjs-error .vjs-error-display:before {
|
||||
content: 'X';
|
||||
font-family: Arial;
|
||||
font-size: 4em;
|
||||
color: #666666;
|
||||
/* In order to center the play icon vertically we need to set the line height
|
||||
to the same as the button height */
|
||||
line-height: 1;
|
||||
text-shadow: 0.05em 0.05em 0.1em #000;
|
||||
text-align: center /* Needed for IE8 */;
|
||||
vertical-align: middle;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vjs-error-display div {
|
||||
position: absolute;
|
||||
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
.vjs-error-display a, .vjs-error-display a:visited {
|
||||
color: #F4A460;
|
||||
}
|
||||
|
||||
/* Loading Spinner
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.vjs-loading-spinner {
|
||||
/* Should be hidden by default *///
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
font-size: 5em;
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
|
||||
width: 1em;
|
||||
@@ -520,12 +655,27 @@ easily in the skin designer. http://designer.videojs.com/
|
||||
margin-top: -0.5em;
|
||||
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Show the spinner when waiting for data and seeking to a new time */
|
||||
.vjs-waiting .vjs-loading-spinner,
|
||||
.vjs-seeking .vjs-loading-spinner {
|
||||
display: block;
|
||||
|
||||
/* only animate when showing because it can be processor heavy *///
|
||||
.animation(spin 1.5s infinite linear);
|
||||
}
|
||||
|
||||
/* Errors are unrecoverable without user interaction so hide the spinner */
|
||||
.vjs-error .vjs-loading-spinner {
|
||||
display: none;
|
||||
|
||||
/* ensure animation doesn't continue while hidden *///
|
||||
.animation(none);
|
||||
}
|
||||
|
||||
.vjs-default-skin .vjs-loading-spinner:before {
|
||||
content: @spinner-icon;
|
||||
content: @spinner3-icon;
|
||||
font-family: VideoJS;
|
||||
|
||||
position: absolute;
|
||||
@@ -631,13 +781,25 @@ easily in the skin designer. http://designer.videojs.com/
|
||||
}
|
||||
|
||||
/* Subtitles Button */
|
||||
.vjs-default-skin .vjs-subtitles-button:before { content: @subtitles-icon; }
|
||||
.vjs-default-skin .vjs-subtitles-button:before {
|
||||
content: @subtitles-icon;
|
||||
}
|
||||
|
||||
/* Captions Button */
|
||||
.vjs-default-skin .vjs-captions-button:before {
|
||||
content: @captions-icon;
|
||||
}
|
||||
|
||||
/* Chapters Button */
|
||||
.vjs-default-skin .vjs-chapters-button:before {
|
||||
content: @chapters-icon;
|
||||
}
|
||||
|
||||
.vjs-default-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
|
||||
width: 24em;
|
||||
left: -12em;
|
||||
}
|
||||
|
||||
/* Replacement for focus outline */
|
||||
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
|
||||
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
|
||||
@@ -757,6 +919,12 @@ body.vjs-full-window {
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
/* Move captions down when controls aren't being shown */
|
||||
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
/* Individual tracks */
|
||||
.video-js .vjs-text-track {
|
||||
display: none;
|
||||
@@ -779,6 +947,26 @@ body.vjs-full-window {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
|
||||
The .video-js classname on the video tag also isn't considered.
|
||||
This optional paragraph inside the video tag can provide a message to users
|
||||
about what's required to play video. */
|
||||
.vjs-no-js {
|
||||
padding: 20px;
|
||||
color: #ccc;
|
||||
background-color: #333;
|
||||
font-size: 18px;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.vjs-no-js a, .vjs-no-js a:visited {
|
||||
color: #F4A460;
|
||||
}
|
||||
|
||||
// MIXINS
|
||||
// =============================================================================
|
||||
// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules
|
||||
@@ -878,12 +1066,14 @@ body.vjs-full-window {
|
||||
.absolute-align (@align, @margin, @length) when (@align = center) {
|
||||
/* Center it horizontally *///
|
||||
left: 50%;
|
||||
margin-left: -(@length / 2);
|
||||
margin-left: (-(@length/2));
|
||||
// margin-left: ((@length*-1)/2);
|
||||
}
|
||||
.absolute-align (@align, @margin, @length) when (@align = middle) {
|
||||
/* Center it vertically *///
|
||||
top: 50%;
|
||||
margin-top: -(@length / 2);
|
||||
margin-top: (-(@length/2));
|
||||
// margin-top: ((@length*-1)/2);
|
||||
}
|
||||
|
||||
// http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text
|
||||
|
||||
Arquivo binário não exibido.
|
Antes Largura: | Altura: | Tamanho: 4.5 KiB |
Alguns arquivos não foram exibidos porque demasiados arquivos foram alterados neste diff Mostrar Mais
Referência em uma Nova Issue
Bloquear um usuário