Comparar commits
424 Commits
v5.0.0-rc.73
...
patch
| Autor | SHA1 | Data | |
|---|---|---|---|
| 9f809cfc59 | |||
| 969561328b | |||
| b8ba89c91d | |||
| be5979aaf9 | |||
| d520d29fd6 | |||
| 3a927523c3 | |||
| ecc95331a7 | |||
| 282bda7e34 | |||
| a17de688f3 | |||
| fdd8550307 | |||
| eff1cf34db | |||
| a2167a6b95 | |||
| 1d2d08584e | |||
| 46d713589b | |||
| 23d1fcd882 | |||
| b56ed61523 | |||
| 13d16c1d76 | |||
| 5178c122a5 | |||
| db0e821f38 | |||
| fa1c6430f4 | |||
| bf2eabf82d | |||
| 2f5a0ca48b | |||
| 2c84f45ff3 | |||
| b9d811c2e2 | |||
| 876d1128a6 | |||
| 14d36a47ee | |||
| ae788be15f | |||
| 1e1636e1f0 | |||
| 2e46c516f6 | |||
| c306e4f7f3 | |||
| f3f979ae49 | |||
| fc72fb90e7 | |||
| 34a78b8989 | |||
| 8dd01467f3 | |||
| 3e9c53f84f | |||
| b270f58bc8 | |||
| 5b15feb5af | |||
| 4b4954ef4d | |||
| b557695e5a | |||
| 238c752aee | |||
| 58604795f8 | |||
| 20b53206a5 | |||
| ec42a1cfd7 | |||
| 5883c9236e | |||
| 7ae2c885a7 | |||
| c51c19ae88 | |||
| 13d349b0da | |||
| e2bfe09c7b | |||
| e7ca49e668 | |||
| f36da276e3 | |||
| 9f37a64146 | |||
| c51c180b3c | |||
| 68c7ab4748 | |||
| a84623dc9c | |||
| e541af30dc | |||
| a63eb1241d | |||
| 382d5aadbe | |||
| 6620f2d7be | |||
| 2a76453cdd | |||
| 43551797c3 | |||
| b6da0a7f70 | |||
| 7f6ce63ad9 | |||
| 9de215fa4c | |||
| 0808f843eb | |||
| 819b787f5f | |||
| 165a499271 | |||
| 7da89f51a6 | |||
| b7fdf21a05 | |||
| 546138e433 | |||
| 4e0325013e | |||
| 8d5a1b1193 | |||
| 40cf2730b9 | |||
| 11d379cbce | |||
| 101f471829 | |||
| b9e3e55384 | |||
| b981f254de | |||
| fa8fc80b83 | |||
| 17f856849d | |||
| 06fdbaf73d | |||
| aa2b8e82ff | |||
| cf5d64dd49 | |||
| ed39b68f13 | |||
| b1e7bfd8f8 | |||
| a11f66ff4f | |||
| 82d396a1fb | |||
| ed3249818e | |||
| 68c4d248d9 | |||
| 6e8ab67a48 | |||
| 7c94ac42cc | |||
| 971dbaecc4 | |||
| 3aff03be84 | |||
| 9a59aee304 | |||
| 4156307792 | |||
| 249532ad45 | |||
| 6296ca8538 | |||
| 2e2dbde4b4 | |||
| 18cdf08c0e | |||
| b931b6bde9 | |||
| aa94e0be07 | |||
| ae4617d74c | |||
| cfb9621884 | |||
| e7d31d3f9e | |||
| 264e53fb5b | |||
| 048dad4cf3 | |||
| a347c1d0fa | |||
| d3b368ccce | |||
| ff83aa6573 | |||
| 6b5040c04c | |||
| fdd4d25bad | |||
| 5cafd387ea | |||
| 55c101de0c | |||
| f4ee2767eb | |||
| a53ef7d1b8 | |||
| 834b94385c | |||
| f606f9df50 | |||
| 48ec1fb3ee | |||
| b254fb71be | |||
| fa27cc7dbf | |||
| e183194224 | |||
| 75116d4249 | |||
| 002b739930 | |||
| 0f40f3f155 | |||
| 41f8e7b855 | |||
| 4849374f23 | |||
| 4e45d21836 | |||
| 471529b805 | |||
| 68bb36e3eb | |||
| 6e579ba4da | |||
| 46374f5b57 | |||
| 0d2d8f58dd | |||
| ba7ec0bf57 | |||
| dc3fc686e7 | |||
| 5261f8204f | |||
| f8a5cdc319 | |||
| 3a800186b3 | |||
| a22c7f2a4d | |||
| a74b92643d | |||
| b2d0e10dbd | |||
| 096c36f8ed | |||
| 4cf2cc72b5 | |||
| b91018952e | |||
| 31b2f9d489 | |||
| 3070e738f1 | |||
| 4663d0ed01 | |||
| ac3771a329 | |||
| 1c730cb21f | |||
| 6845cbedc3 | |||
| 6eba133963 | |||
| d4c1af60ac | |||
| bf95bb21cc | |||
| 4e75ce1e9e | |||
| 9f38a08399 | |||
| 41bc481597 | |||
| 66a2c05510 | |||
| db189b73d7 | |||
| dbdc411dc2 | |||
| 94e899f810 | |||
| e2c8c125a2 | |||
| 0b26d83e99 | |||
| 8cc633edc4 | |||
| 3367b007a2 | |||
| feb7e26211 | |||
| 5a5b42f2a7 | |||
| f82a3d148f | |||
| 21051534f3 | |||
| f4bc3c12b5 | |||
| c1112b74fe | |||
| f77bcc95d0 | |||
| cb3d709237 | |||
| d9a0a4503c | |||
| 3ef88f8b80 | |||
| 80c6c16a2f | |||
| e12ca69306 | |||
| d8ba649549 | |||
| 0490728321 | |||
| dd1f2b5c25 | |||
| 47a307b773 | |||
| 050f23d913 | |||
| b027603a6a | |||
| a2f5430a5d | |||
| acd775f551 | |||
| 084bcf692c | |||
| fc7a166705 | |||
| 341c9c7700 | |||
| 5245335147 | |||
| 171ec1a274 | |||
| 29f66acb98 | |||
| d9cad36ade | |||
| 99b34e9691 | |||
| 2f0b9ee8ca | |||
| c8646aa02b | |||
| 58f76136e5 | |||
| 47f639fb41 | |||
| bb606cdcbd | |||
| 876e48547c | |||
| df02e7a709 | |||
| 9cdfb75187 | |||
| 8a17313a3b | |||
| 6317395e0c | |||
| b9f251650b | |||
| 0ffb27abb0 | |||
| e05931dd19 | |||
| 16f0179c07 | |||
| 81caccd154 | |||
| d448acd224 | |||
| c901fcee6b | |||
| 6977b0e3fe | |||
| b48797bf17 | |||
| dcf2a300ef | |||
| 088f47af2e | |||
| 984085a048 | |||
| 67840aabbe | |||
| 93f2f83723 | |||
| 867fec910f | |||
| aa4700b098 | |||
| b84be556a6 | |||
| 0f219b1f1d | |||
| 49cc73f980 | |||
| 8ad286a768 | |||
| 5f239d7cf1 | |||
| 35203f613f | |||
| 692608270e | |||
| d99ce79954 | |||
| 01a7e7509e | |||
| 09f182db60 | |||
| 7838fe2ec3 | |||
| 45d43ec904 | |||
| c61e9e49ab | |||
| 4cb14eb420 | |||
| 1d88ef066d | |||
| 16f2e4113a | |||
| 4424a06a3d | |||
| 08f03c160c | |||
| 565dba8671 | |||
| a528e44d9b | |||
| 996822ba68 | |||
| 359df7148b | |||
| c6bf2b847a | |||
| 44edb12700 | |||
| 5bb1a76c4e | |||
| 8f2bc92412 | |||
| e78e26b8a4 | |||
| 9e3a7b6159 | |||
| 0b7a2e41b3 | |||
| f225d4e68a | |||
| a601fbb83f | |||
| 69b89e51f4 | |||
| 8acd28c15a | |||
| b188781fa9 | |||
| 5ed0dc8adb | |||
| 72f77d77c9 | |||
| 7171ea8d42 | |||
| 3e19c91828 | |||
| 5f9095079e | |||
| 552d8cbda3 | |||
| 8d0de0fa51 | |||
| c4dbd2488b | |||
| c0d5f471bc | |||
| 3a40b10fa6 | |||
| 7dff83b2a4 | |||
| 6bbd6f1a65 | |||
| d9b5fbc60d | |||
| 385266338a | |||
| 0e1c424e48 | |||
| d1316a39ab | |||
| 210caea7f0 | |||
| 0da23c1d8d | |||
| 2627e86db5 | |||
| ea2e274a30 | |||
| f2fa8f8687 | |||
| cd800b02ea | |||
| 89d860fb84 | |||
| ed5ed0ded4 | |||
| 977eedda79 | |||
| 4e395b6b02 | |||
| a25c4c98f3 | |||
| b1e863677f | |||
| 98f241d614 | |||
| 5d754c911d | |||
| fa2f08ad66 | |||
| 0b32893612 | |||
| d0efd16b49 | |||
| c24a3a8173 | |||
| e6f5d6b585 | |||
| 42e33ca537 | |||
| 655e14a733 | |||
| 871dac9c3a | |||
| 6e25aef060 | |||
| 5f5357d535 | |||
| 86f23d39fd | |||
| 51f1863adc | |||
| ab88bcdde3 | |||
| 589cab7fa7 | |||
| c85b526a1c | |||
| 4598b38291 | |||
| 93e079718e | |||
| 34742e09a5 | |||
| 702fbe4d68 | |||
| d036f25681 | |||
| e98bc42500 | |||
| d47a8ab2dc | |||
| c89f645600 | |||
| 6f3826a7ef | |||
| d9524d4d35 | |||
| 1834d39c2f | |||
| 49698d2a8c | |||
| 9c28857247 | |||
| 40b6ad3050 | |||
| e58c2266de | |||
| 0832b89970 | |||
| 7ce59efa7d | |||
| 8c101e2b35 | |||
| aab9246253 | |||
| da09a44eda | |||
| 6beb0eb299 | |||
| a56781945a | |||
| 872459837b | |||
| 6354329a1b | |||
| cd6c568a03 | |||
| e225fbffc2 | |||
| a5dad5ade2 | |||
| 1d79c4a9e2 | |||
| c5321f4cbf | |||
| 60c86465f8 | |||
| 1f618d7b00 | |||
| 2de28927d7 | |||
| 8d9695b6ad | |||
| ad0820cfa3 | |||
| 992e5e63f5 | |||
| f6dca78c5e | |||
| 0b7cf586c2 | |||
| 1234faaf71 | |||
| f5b80c8ea9 | |||
| 2c10c7f310 | |||
| 81806d5725 | |||
| 9788112e76 | |||
| 42468e19be | |||
| ba6018d4ea | |||
| e121428565 | |||
| 2be7263ac3 | |||
| 3f8be868bd | |||
| 8fbe0a947f | |||
| 1f06f23ded | |||
| d072d9b371 | |||
| 61a00db7cb | |||
| a0b4293b82 | |||
| 24ad9841ac | |||
| ccedad44ef | |||
| 81000369ec | |||
| 651a33a145 | |||
| 51bae4d7cf | |||
| 968bd7432d | |||
| 24cdbdefff | |||
| 0c416bd286 | |||
| 4cb76873f4 | |||
| 99376bf396 | |||
| f7466af956 | |||
| 50bb4540a1 | |||
| f10d8d0cb3 | |||
| a3bfa8a73c | |||
| 63451a7526 | |||
| 4f250e8fc2 | |||
| 85b825a0dd | |||
| 517489513f | |||
| c9974657a9 | |||
| 313d18106b | |||
| 32aa9ed7e4 | |||
| 4d6c737a21 | |||
| 2e1d051144 | |||
| 2c74d9e355 | |||
| 849b85bb83 | |||
| 1503bf1268 | |||
| 4dadd01cf5 | |||
| 0bd7538fbc | |||
| 1b745e7b11 | |||
| a355f900b9 | |||
| 0341ec12ad | |||
| 0b5f41c466 | |||
| f7702f8f38 | |||
| 9179bdbdf6 | |||
| 1b057dfe85 | |||
| 658adb27ec | |||
| 4b58fad8bd | |||
| 3abc5c66df | |||
| 1f5a83dc23 | |||
| ccb6b35291 | |||
| 5624adb75d | |||
| a584104b78 | |||
| 2e8b306578 | |||
| fca885a62f | |||
| 75e65c6585 | |||
| 0fe811df2c | |||
| a02f0befbc | |||
| c03e26c575 | |||
| 9ed5be570d | |||
| 01ea3d1ae3 | |||
| 69dde46aa2 | |||
| d2de00cae1 | |||
| 46c79e2b19 | |||
| c2820e9e38 | |||
| c43863edbd | |||
| 34822537f4 | |||
| b93dea70b8 | |||
| 0f1c5f22f0 | |||
| 56d4861bb0 | |||
| 1404121fee | |||
| dfd8408ac5 | |||
| 1bc8efc218 | |||
| 463ba4ea44 | |||
| 20b46b9fb9 | |||
| 86a11a01ab | |||
| fa6ad4929e | |||
| 1c35bfafc2 | |||
| 69a4884880 | |||
| fbdf7ef041 | |||
| c4717ebed9 | |||
| 652a44026f | |||
| ec53eda738 | |||
| db05a1b90d | |||
| e1c0f9fc35 | |||
| 7bbbf992a9 | |||
| 36956e20df | |||
| c5f5ea419e | |||
| eb597d3660 |
@@ -28,3 +28,5 @@ test/coverage/*
|
||||
.sass-cache
|
||||
|
||||
dist/*
|
||||
|
||||
.idea/
|
||||
|
||||
@@ -24,6 +24,8 @@
|
||||
"exports",
|
||||
"process",
|
||||
|
||||
"DOMException",
|
||||
|
||||
"q",
|
||||
"asyncTest",
|
||||
"deepEqual",
|
||||
@@ -34,12 +36,14 @@
|
||||
"notEqual",
|
||||
"notStrictEqual",
|
||||
"ok",
|
||||
"throws",
|
||||
"QUnit",
|
||||
"raises",
|
||||
"start",
|
||||
"stop",
|
||||
"strictEqual",
|
||||
"test",
|
||||
"throws",
|
||||
"sinon"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -23,3 +23,5 @@ sudo: false
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
addons:
|
||||
firefox: latest
|
||||
|
||||
+399
-1
@@ -2,6 +2,333 @@ CHANGELOG
|
||||
=========
|
||||
|
||||
## HEAD (Unreleased)
|
||||
* greenkeeper updated karma dependencies ([view](https://github.com/videojs/video.js/pull/3523))
|
||||
* update to latest uglify to fix preserve comments issue. Disable screw ie8 option. ([view](https://github.com/videojs/video.js/pull/3709))
|
||||
* remove sourcemap generation ([view](https://github.com/videojs/video.js/pull/3710))
|
||||
|
||||
--------------------
|
||||
|
||||
## 5.11.8 (2016-10-17)
|
||||
* @misteroneill restore timeupdate/loadedmetadata listeners for duration display ([view](https://github.com/videojs/video.js/pull/3682))
|
||||
|
||||
## 5.11.7 (2016-09-28)
|
||||
* @gkatsev checked throwIfWhitespace first in hasElClass ([view](https://github.com/videojs/video.js/pull/3640))
|
||||
* @misteroneill pinned grunt-contrib-uglify to ~0.11 to pin uglify to ~2.6 ([view](https://github.com/videojs/video.js/pull/3634))
|
||||
* @gkatsev set playerId on new el created for movingMediaElementInDOM. Fixes #3283 ([view](https://github.com/videojs/video.js/pull/3648))
|
||||
|
||||
## 5.11.6 (2016-08-25)
|
||||
* @imbcmdth Added exception handling to event dispatcher ([view](https://github.com/videojs/video.js/pull/3580))
|
||||
|
||||
## 5.11.5 (2016-08-25)
|
||||
* @misteroneill fixed wrapping native and emulated MediaErrors ([view](https://github.com/videojs/video.js/pull/3562))
|
||||
* @snyderizer fixed switching between audio tracks. Fixes #3510 ([view](https://github.com/videojs/video.js/pull/3538))
|
||||
* @jbarabander added title attribute to audio button. Fixes #3528 ([view](https://github.com/videojs/video.js/pull/3565))
|
||||
* @misteroneill fixed IE8 media error test failure ([view](https://github.com/videojs/video.js/pull/3568))
|
||||
|
||||
## 5.11.4 (2016-08-16)
|
||||
_(none)_
|
||||
|
||||
## 5.11.3 (2016-08-15)
|
||||
* @vdeshpande fixed control text for fullscreen button ([view](https://github.com/videojs/video.js/pull/3485))
|
||||
* @mister-ben fixed android treating swipe as a tap ([view](https://github.com/videojs/video.js/pull/3514))
|
||||
* @mboles updated duration() method documentation ([view](https://github.com/videojs/video.js/pull/3515))
|
||||
* @mister-ben silenced chrome's play() request was interrupted by pause() error ([view](https://github.com/videojs/video.js/pull/3518))
|
||||
|
||||
## 5.11.2 (2016-08-09)
|
||||
_(none)_
|
||||
|
||||
## 5.11.1 (2016-08-08)
|
||||
* @vxsx fixed legend selector to be more specific. Fixes #3492 ([view](https://github.com/videojs/video.js/pull/3494))
|
||||
|
||||
## 5.11.0 (2016-07-22)
|
||||
* @BrandonOCasey Document audio/video track usage ([view](https://github.com/videojs/video.js/pull/3295))
|
||||
* @hartman Correct documentation to refer to nativeTextTracks option ([view](https://github.com/videojs/video.js/pull/3309))
|
||||
* @nickygerritsen Also pass tech options to canHandleSource ([view](https://github.com/videojs/video.js/pull/3303))
|
||||
* @misteroneill Un-deprecate the videojs.players property ([view](https://github.com/videojs/video.js/pull/3299))
|
||||
* @nickygerritsen Add title to all clickable components ([view](https://github.com/videojs/video.js/pull/3296))
|
||||
* @nickygerritsen Update Dutch language file ([view](https://github.com/videojs/video.js/pull/3297))
|
||||
* @hartman Add descriptions and audio button to adaptive classes ([view](https://github.com/videojs/video.js/pull/3312))
|
||||
* @MattiasBuelens Retain details from tech error ([view](https://github.com/videojs/video.js/pull/3313))
|
||||
* @nickygerritsen Fix test for tooltips in IE8 ([view](https://github.com/videojs/video.js/pull/3327))
|
||||
* @mboles added loadstart event to jsdoc ([view](https://github.com/videojs/video.js/pull/3370))
|
||||
* @hartman added default print styling ([view](https://github.com/videojs/video.js/pull/3304))
|
||||
* @ldayananda updated videojs to not do anything if no src is set ([view](https://github.com/videojs/video.js/pull/3378))
|
||||
* @nickygerritsen removed unused tracks when changing sources. Fixes #3000 ([view](https://github.com/videojs/video.js/pull/3002))
|
||||
* @vit-koumar updated Flash tech to return Infinity from duration instead of -1 ([view](https://github.com/videojs/video.js/pull/3128))
|
||||
* @alex-phillips added ontextdata to Flash tech ([view](https://github.com/videojs/video.js/pull/2748))
|
||||
* @MattiasBuelens updated components to use durationchange only ([view](https://github.com/videojs/video.js/pull/3349))
|
||||
* @misteroneill improved Logging for IE < 11 ([view](https://github.com/videojs/video.js/pull/3356))
|
||||
* @vdeshpande updated control text of modal dialog ([view](https://github.com/videojs/video.js/pull/3400))
|
||||
* @ldayananda fixed mouse handling on menus by using mouseleave over mouseout ([view](https://github.com/videojs/video.js/pull/3404))
|
||||
* @mister-ben updated language to inherit correctly and respect the attribute on the player ([view](https://github.com/videojs/video.js/pull/3426))
|
||||
* @sashyro fixed nativeControlsForTouch option ([view](https://github.com/videojs/video.js/pull/3410))
|
||||
* @tbasse fixed techCall null check against tech ([view](https://github.com/videojs/video.js/pull/2676))
|
||||
* @rbran100 checked src and currentSrc in handleTechReady to work around mixed content issues in chrome ([view](https://github.com/videojs/video.js/pull/3287))
|
||||
* @OwenEdwards fixed caption settings dialog labels for accessibility ([view](https://github.com/videojs/video.js/pull/3281))
|
||||
* @OwenEdwards removed spurious head tags in the simple-embed example ([view](https://github.com/videojs/video.js/pull/3438))
|
||||
* @ntadej added a null check to errorDisplay usage ([view](https://github.com/videojs/video.js/pull/3440))
|
||||
* @misteroneill fixed logging issues on IE by separating fn.apply and stringify checks ([view](https://github.com/videojs/video.js/pull/3444))
|
||||
* @misteroneill fixed npm test from running coveralls locally ([view](https://github.com/videojs/video.js/pull/3449))
|
||||
* @gkatsev added es6-shim to tests. Fixes Flash duration test ([view](https://github.com/videojs/video.js/pull/3453))
|
||||
* @misteroneill corrects test assertions for older IEs in the log module ([view](https://github.com/videojs/video.js/pull/3454))
|
||||
* @gkatsev fixed setting lang by looping through loop element variable and not constant tag ([view](https://github.com/videojs/video.js/pull/3455))
|
||||
|
||||
## 5.10.8 (2016-08-08)
|
||||
* @gkatsev re-published to make sure that the audio button has css
|
||||
|
||||
## 5.10.7 (2016-06-27)
|
||||
* @gkatsev pinned node-sass to 3.4 ([view](https://github.com/videojs/video.js/pull/3401))
|
||||
* @mister-ben added try catch to volume and playbackrate checks. Fixes #3315 ([view](https://github.com/videojs/video.js/pull/3320))
|
||||
* @m14t removed unused loadEvent property in ControlBar options ([view](https://github.com/videojs/video.js/pull/3363))
|
||||
* @bklava updated pt-BR language file ([view](https://github.com/videojs/video.js/pull/3373))
|
||||
* @mister-ben updated menus to use default videojs font-family ([view](https://github.com/videojs/video.js/pull/3384))
|
||||
* @vdeshpande fixed chapters getting duplicated each time a track is loaded ([view](https://github.com/videojs/video.js/pull/3354))
|
||||
|
||||
## 5.10.6 (2016-06-20)
|
||||
* @gkatsev fix not fully minified video.min.js file.
|
||||
|
||||
## 5.10.5 (2016-06-07)
|
||||
* @gkatsev pinned dependencies to direct versions ([view](https://github.com/videojs/video.js/pull/3338))
|
||||
* @gkatsev fixed minified vjs in ie8 when initialized with id string ([view](https://github.com/videojs/video.js/pull/3357))
|
||||
* @IJsLauw fixed unhandled exception in deleting poster on ios7 ([view](https://github.com/videojs/video.js/pull/3337))
|
||||
|
||||
## 5.10.4 (2016-05-31)
|
||||
* Patch release to fix dist on npm
|
||||
|
||||
## 5.10.3 (2016-05-27)
|
||||
* @BrandonOCasey fixed source handlers being disposed multiple times when a video is put into the video element directly ([view](https://github.com/videojs/video.js/pull/3343))
|
||||
|
||||
## 5.10.2 (2016-05-12)
|
||||
* @gkatsev nulled out currentSource_ in setSource ([view](https://github.com/videojs/video.js/pull/3314))
|
||||
|
||||
## 5.10.1 (2016-05-03)
|
||||
* @nickygerritsen Pass tech options to source handlers ([view](https://github.com/videojs/video.js/pull/3245))
|
||||
* @gkatsev Use fonts 2.0 that do not require wrapping codepoints ([view](https://github.com/videojs/video.js/pull/3252))
|
||||
* @chrisauclair Make controls visible for accessibility reasons ([view](https://github.com/videojs/video.js/pull/3237))
|
||||
* @gkatsev updated text track documentation and crossorigin warning. Fixes #1888, #1958, #2628, #3202 ([view](https://github.com/videojs/video.js/pull/3256))
|
||||
* @BrandonOCasey added audio and video track support ([view](https://github.com/videojs/video.js/pull/3173))
|
||||
* @OwenEdwards added language attribute in HTML files for accessibility ([view](https://github.com/videojs/video.js/pull/3257))
|
||||
* @incompl clear currentSource_ after subsequent loadstarts ([view](https://github.com/videojs/video.js/pull/3285))
|
||||
* @forbesjo add an audio track selector menu button ([view](https://github.com/videojs/video.js/pull/3223))
|
||||
|
||||
## 5.9.2 (2016-04-19)
|
||||
* @gkatsev grouped text track errors in the console, if we can ([view](https://github.com/videojs/video.js/pull/3259))
|
||||
|
||||
## 5.9.1 (2016-04-19)
|
||||
* @benjipott updated IS_CHROME to not be true on MS Edge ([view](https://github.com/videojs/video.js/pull/3232))
|
||||
* @mister-ben blacklisted Chrome for Android for playback rate support ([view](https://github.com/videojs/video.js/pull/3246))
|
||||
* @gkatsev made the first emulated text track enabled by default ([view](https://github.com/videojs/video.js/pull/3248))
|
||||
* @gkatsev fixed removeRemoteTextTracks not working with return value from addRemoteTextTracks ([view](https://github.com/videojs/video.js/pull/3253))
|
||||
* @forbesjo added back the background color to the poster ([view](https://github.com/videojs/video.js/pull/3267))
|
||||
* @gkatsev fixed text track tests for older IEs ([view](https://github.com/videojs/video.js/pull/3269))
|
||||
|
||||
## 5.9.0 (2016-04-05)
|
||||
* @gkatsev updated vjs to not add dynamic styles when VIDEOJS_NO_DYNAMIC_STYLE is set ([view](https://github.com/videojs/video.js/pull/3093))
|
||||
* @OwenEdwards added basic descriptions track support ([view](https://github.com/videojs/video.js/pull/3098))
|
||||
* @kamilbrenk Added lang
|
||||
* @arius28 added greek translation file (el.json) ([view](https://github.com/videojs/video.js/pull/3185))
|
||||
* @ricardosiri68 changed the relative sass paths ([view](https://github.com/videojs/video.js/pull/3147))
|
||||
* @gkatsev added an option to keep the tooltips inside the player bounds ([view](https://github.com/videojs/video.js/pull/3149))
|
||||
* @defli added currentWidth and currentHeight methods to the player ([view](https://github.com/videojs/video.js/pull/3144))
|
||||
* fix IE8 tests for VIDEOJS_NO_DYNAMIC_STYLE ([view](https://github.com/videojs/video.js/pull/3215))
|
||||
* @OwenEdwards fixed links adding extra tab stop with IE by removing anchor tags on videojs init ([view](https://github.com/videojs/video.js/pull/3194))
|
||||
* @scaryguy updated videojs cdn urls in the README ([view](https://github.com/videojs/video.js/pull/3195))
|
||||
* @mister-ben updated the time tooltips to use the chosen font family ([view](https://github.com/videojs/video.js/pull/3213))
|
||||
* @OwenEdwards improved handling of deprecated use of Button component ([view](https://github.com/videojs/video.js/pull/3236))
|
||||
* @forbesjo added chrome for PR tests ([view](https://github.com/videojs/video.js/pull/3235))
|
||||
* @MCGallaspy added vttjs to the self-hosting guide ([view](https://github.com/videojs/video.js/pull/3229))
|
||||
* @chrisauclair added ARIA region and label to player element ([view](https://github.com/videojs/video.js/pull/3227))
|
||||
* @andyearnshaw updated document event handlers to use el.ownerDocument ([view](https://github.com/videojs/video.js/pull/3230))
|
||||
|
||||
## 5.8.8 (2016-04-04)
|
||||
* @vtytar fixed auto-setup failing if taking too long to load ([view](http://github.com/videojs/video.js/pull/3233))
|
||||
* @seescode fixed css failing on IE8 due to incorrect ie8 hack ([view](http://github.com/videojs/video.js/pull/3226))
|
||||
* @seescode fixed dragging on mute toggle changing the volume ([view](http://github.com/videojs/video.js/pull/3228))
|
||||
|
||||
## 5.8.7 (2016-03-29)
|
||||
* @llun fixed menus from throwing when focused when empty ([view](https://github.com/videojs/video.js/pull/3218))
|
||||
* @mister-ben added dir=ltr to control bar and loading spinner ([view](https://github.com/videojs/video.js/pull/3221))
|
||||
* @avreg fixed notSupportedMessage saying video when meaning media ([view](https://github.com/videojs/video.js/pull/3222))
|
||||
* @mister-ben fixed missing native HTML5 tracks ([view](https://github.com/videojs/video.js/pull/3212))
|
||||
* @mister-ben updated Arabic language files ([view](https://github.com/videojs/video.js/pull/3225))
|
||||
|
||||
## 5.8.6 (2016-03-25)
|
||||
* @misteroneill fixed typo and indenting in language files ([view](https://github.com/videojs/video.js/pull/3207))
|
||||
|
||||
## 5.8.5 (2016-03-17)
|
||||
* @gkatsev cleared vttjs script handlers on dispose. Fixed tests ([view](https://github.com/videojs/video.js/pull/3189))
|
||||
|
||||
## 5.8.4 (2016-03-17)
|
||||
* @gkatsev changed emulated tracks to in novtt to wait for vttjs to load or error before parsing ([view](https://github.com/videojs/video.js/pull/3181))
|
||||
|
||||
## 5.8.3 (2016-03-10)
|
||||
* @gkatsev fixed keyboard control of menus with titles. Fixes #3164 ([view](https://github.com/videojs/video.js/pull/3165))
|
||||
|
||||
## 5.8.2 (2016-03-09)
|
||||
* @gkatsev fixed chapters menu. Fixes #3062 ([view](https://github.com/videojs/video.js/pull/3163))
|
||||
|
||||
## 5.8.1 (2016-03-07)
|
||||
* @gkatsev updated videojs badges in the README ([view](https://github.com/videojs/video.js/pull/3134))
|
||||
* @BrandonOCasey converted remaining text-track modules to ES6 ([view](https://github.com/videojs/video.js/pull/3130))
|
||||
* @gkatsev cleared waiting/spinner on timeupdate. Fixes #3124 ([view](https://github.com/videojs/video.js/pull/3138))
|
||||
* @BrandonOCasey updated text track unit tests to use full es6 syntax ([view](https://github.com/videojs/video.js/pull/3148))
|
||||
* @defli added missing var to sandbox index.html example ([view](https://github.com/videojs/video.js/pull/3155))
|
||||
* @defli fixed typo and updated Turkish translations ([view](https://github.com/videojs/video.js/pull/3156))
|
||||
* @OwenEdwards fixed menu closing on ios, specifically ipad ([view](https://github.com/videojs/video.js/pull/3158))
|
||||
|
||||
## 5.8.0 (2016-02-19)
|
||||
* @gkatsev added issue and PR templates for github ([view](https://github.com/videojs/video.js/pull/3117))
|
||||
* @Nipoto added fa.json (farsi/persian lang file) ([view](https://github.com/videojs/video.js/pull/3116))
|
||||
* @forbesjo updated travis to use latest firefox ([view](https://github.com/videojs/video.js/pull/3112))
|
||||
* @Naouak updated time display to not change if values do not change ([view](https://github.com/videojs/video.js/pull/3101))
|
||||
* @forbesjo updated track settings to not fail restoring settings when localStorage is not available ([view](https://github.com/videojs/video.js/pull/3120))
|
||||
* @mister-ben Added en.json as localization template ([view](https://github.com/videojs/video.js/pull/3096))
|
||||
* @misteroneill added alt css as video-js-cdn.css ([view](https://github.com/videojs/video.js/pull/3118))
|
||||
|
||||
## 5.7.1 (2016-02-11)
|
||||
* @alex-phillips fixed reference to videojs-vtt.js dependency ([view](https://github.com/videojs/video.js/pull/3080))
|
||||
* @gkatsev fixed minified videojs in IE8. Fixes #3064 and #3070 ([view](https://github.com/videojs/video.js/pull/3104))
|
||||
|
||||
## 5.7.0 (2016-02-04)
|
||||
* @forbesjo updated emulated tracks to have listeners removed when they are removed ([view](https://github.com/videojs/video.js/pull/3046))
|
||||
* @incompl improved the UX of time tooltips ([view](https://github.com/videojs/video.js/pull/3060))
|
||||
* @gkatsev updated README to include links to plugins page and getting started and cleaner link to LICENSE ([view](https://github.com/videojs/video.js/pull/3066))
|
||||
* @hartman Corrected adaptive layout selectors to match their intent ([view](https://github.com/videojs/video.js/pull/2923))
|
||||
* @mister-ben updated Umuted to Unmute in lang files ([view](https://github.com/videojs/video.js/pull/3053))
|
||||
* @hartman updated fullscreen and time controls for more consistent widths ([view](https://github.com/videojs/video.js/pull/2893))
|
||||
* @hartman Set a min-width for the progress slider of 4em ([view](https://github.com/videojs/video.js/pull/2902))
|
||||
* @misteroneill fixed iphone useragent detection ([view](https://github.com/videojs/video.js/pull/3077))
|
||||
* @erikyuzwa added ability to add child component at specific index ([view](https://github.com/videojs/video.js/pull/2540))
|
||||
|
||||
## 5.6.0 (2016-01-26)
|
||||
* @OwenEdwards added ClickableComponent. Fixed keyboard operation of buttons ([view](https://github.com/videojs/video.js/pull/3032))
|
||||
* @OwenEdwards Fixed menu keyboard access and ARIA labeling for screen readers ([view](https://github.com/videojs/video.js/pull/3033))
|
||||
* @OwenEdwards Fixed volume menu keyboard access ([view](https://github.com/videojs/video.js/pull/3034))
|
||||
* @mister-ben made $primary-foreground-color a !default sass var ([view](https://github.com/videojs/video.js/pull/3003))
|
||||
* @OwenEdwards fixed double-localization of mute toggle control text ([view](https://github.com/videojs/video.js/pull/3017))
|
||||
* @gkatsev checked muted status when updating volume bar level ([view](https://github.com/videojs/video.js/pull/3037))
|
||||
* @vitor-faiante updated the guides ([view](https://github.com/videojs/video.js/pull/2781))
|
||||
* @aril-spetalen added language support for Norwegian (nb and nn) ([view](https://github.com/videojs/video.js/pull/3021))
|
||||
* @CoWinkKeyDinkInc fixed table in Tracks guide. Replaced some single quotes with double quotes ([view](https://github.com/videojs/video.js/pull/2946))
|
||||
* @hubdotcom changed URLs in README to be protocol-relative ([view](https://github.com/videojs/video.js/pull/3040))
|
||||
* @gkatsev updated to latest videojs-ie8 shim ([view](https://github.com/videojs/video.js/pull/3042))
|
||||
|
||||
## 5.5.3 (2016-01-15)
|
||||
* @gkasev updated vjs to correctly return already created player when given an element ([view](https://github.com/videojs/video.js/pull/3006))
|
||||
* @mister-ben updated CDN urls in setup guide ([view](https://github.com/videojs/video.js/pull/2984))
|
||||
* @rcrooks fixed a couple of docs link and a jsdoc comment ([view](https://github.com/videojs/video.js/pull/2987))
|
||||
|
||||
## 5.5.2 (2016-01-14)
|
||||
* make sure that styleEl_ is in DOM before removing on dispose ([view](https://github.com/videojs/video.js/pull/3004))
|
||||
|
||||
## 5.5.1 (2016-01-08)
|
||||
* @gkatsev fixed sass if else for icons ([view](https://github.com/videojs/video.js/pull/2988))
|
||||
|
||||
## 5.5.0 (2016-01-07)
|
||||
* @hartman fixed usage of lighten in progress component. Fixes #2793 ([view](https://github.com/videojs/video.js/pull/2875))
|
||||
* @misteroneill exposed createEl on videojs ([view](https://github.com/videojs/video.js/pull/2926))
|
||||
* @huitsing updated docstrings for autoplay and loop methods ([view](https://github.com/videojs/video.js/pull/2960))
|
||||
* @rcrooks fixed some broken links in guides ([view](https://github.com/videojs/video.js/pull/2965))
|
||||
* @forbesjo fixed errorDisplay erroring on subsequent openings ([view](https://github.com/videojs/video.js/pull/2966))
|
||||
* @incompl updated build command in CONTRIBUTING.md ([view](https://github.com/videojs/video.js/pull/2967))
|
||||
* @forbesjo updated player to not autoplay if there is no source ([view](https://github.com/videojs/video.js/pull/2971))
|
||||
* @gkatsev updated css to have ascii codepoints for fonticons. Expose new scss file ([view](https://github.com/videojs/video.js/pull/2973))
|
||||
|
||||
## 5.4.6 (2015-12-22)
|
||||
* @gkatsev fixed vertical slider alignment in volume menu button ([view](https://github.com/videojs/video.js/pull/2943))
|
||||
|
||||
## 5.4.5 (2015-12-15)
|
||||
* @gkatsev added mouse/touch listeners to volume menu button ([view](https://github.com/videojs/video.js/pull/2638))
|
||||
* @gkatsev updated styles for inline menu and volume bar ([view](https://github.com/videojs/video.js/pull/2913))
|
||||
* @BrandonOCasey updated sandbox to to use newer CDN urls ([view](https://github.com/videojs/video.js/pull/2917))
|
||||
* @hartman updated options guide doc ([view](https://github.com/videojs/video.js/pull/2908))
|
||||
* @rcrooks fixed simple embed example ([view](https://github.com/videojs/video.js/pull/2915))
|
||||
|
||||
## 5.4.4 (2015-12-09)
|
||||
* @gkatsev switched to use custom vtt.js from npm ([view](https://github.com/videojs/video.js/pull/2905))
|
||||
|
||||
## 5.4.3 (2015-12-08)
|
||||
* @gkatsev updated options customizer and github-release options ([view](https://github.com/videojs/video.js/pull/2903))
|
||||
|
||||
## 5.4.2 (2015-12-08)
|
||||
* @gkatsev updated grunt-release config ([view](https://github.com/videojs/video.js/pull/2900))
|
||||
|
||||
## 5.4.1 (2015-12-08)
|
||||
* @misteroneill updated videojs-ie8 to 1.1.1 ([view](https://github.com/videojs/video.js/pull/2869))
|
||||
* @gkatsev added Player#tech. Fixes #2617 ([view](https://github.com/videojs/video.js/pull/2883))
|
||||
* @nick11703 changed multiline comments in sass with single-line comments ([view](https://github.com/videojs/video.js/pull/2827))
|
||||
* @gkatsev added a Player#reset method. Fixes #2852 ([view](https://github.com/videojs/video.js/pull/2880))
|
||||
* @chemoish emulated HTMLTrackElement to enable track load events ([view](https://github.com/videojs/video.js/pull/2804))
|
||||
* @gkatsev added nullcheck for cues in updateForTrack. Fixes #2870 ([view](https://github.com/videojs/video.js/pull/2896))
|
||||
* @gkatsev added ability to release next tag from master ([view](https://github.com/videojs/video.js/pull/2894))
|
||||
* @gkatsev added chg- and github- release for next releases ([view](https://github.com/videojs/video.js/pull/2899))
|
||||
|
||||
## 5.3.0 (2015-11-25)
|
||||
* @forbesjo updated formatTime to not go negative ([view](https://github.com/videojs/video.js/pull/2821))
|
||||
* @imbcmdth added sourceOrder option for source-first ordering in selectSource ([view](https://github.com/videojs/video.js/pull/2847))
|
||||
|
||||
## 5.2.4 (2015-11-25)
|
||||
* @gesinger checked for track changes before tech started listening ([view](https://github.com/videojs/video.js/pull/2835))
|
||||
* @gesinger fixed handler explosion for cuechange events ([view](https://github.com/videojs/video.js/pull/2849))
|
||||
* @mmcc fixed vertical volume ([view](https://github.com/videojs/video.js/pull/2859))
|
||||
|
||||
## 5.2.3 (2015-11-24)
|
||||
* @gkatsev fixed clearing out errors ([view](https://github.com/videojs/video.js/pull/2850))
|
||||
|
||||
## 5.2.2 (2015-11-23)
|
||||
* @DatTran fixed bower paths. Fixes #2740 ([view](https://github.com/videojs/video.js/pull/2775))
|
||||
* @nbibler ensured classes begin with alpha characters. Fixes #2828 ([view](https://github.com/videojs/video.js/pull/2829))
|
||||
* @bcvio fixed returning current source rather than blob url ([view](https://github.com/videojs/video.js/pull/2833))
|
||||
* @tomaspinho added ended event to API docs ([view](https://github.com/videojs/video.js/pull/2836))
|
||||
* @paladox updated xhr from deprecated ver to v2.2 ([view](https://github.com/videojs/video.js/pull/2837))
|
||||
|
||||
## 5.2.1 (2015-11-16)
|
||||
* @dmlap Check a component is a function before new-ing ([view](https://github.com/videojs/video.js/pull/2814))
|
||||
* @ksjun corrected the registerTech export ([view](https://github.com/videojs/video.js/pull/2816))
|
||||
|
||||
## 5.2.0 (2015-11-10)
|
||||
* @gkatsev made initListeners more general and added Tech.isTech. Fixes #2767 ([view](https://github.com/videojs/video.js/pull/2773))
|
||||
* @dmlap updated swf to 5.0.1 ([view](https://github.com/videojs/video.js/pull/2795))
|
||||
* @gkatsev added a tech registry. Fixes #2772 ([view](https://github.com/videojs/video.js/pull/2782))
|
||||
* @Lillemanden impoved logic for dividing RTMP paths ([view](https://github.com/videojs/video.js/pull/2787))
|
||||
* @bdeitte added a test for improved RTMP path dividing logic ([view](https://github.com/videojs/video.js/pull/2794))
|
||||
* @paladox updated grunt-cli dependency ([view](https://github.com/videojs/video.js/pull/2555))
|
||||
* @paladox updated grunt-contrib-jshint ([view](https://github.com/videojs/video.js/pull/2554))
|
||||
* @siebrand updated dutch translations ([view](https://github.com/videojs/video.js/pull/2556))
|
||||
* @misteroneill exposed DOM helpers ([view](https://github.com/videojs/video.js/pull/2754))
|
||||
* @incompl fixed broken link to reduced test cases article ([view](https://github.com/videojs/video.js/pull/2801))
|
||||
* @zjruan updated text track prototype loops to blacklist constructor for IE8 ([view](https://github.com/videojs/video.js/pull/2565))
|
||||
* @gkatsev fixed usage of textTracksToJson ([view](https://github.com/videojs/video.js/pull/2797))
|
||||
* @gkatsev updated contrib.json to use / as branch-name separator in feature-accept ([view](https://github.com/videojs/video.js/pull/2803))
|
||||
* @gkatsev updated MediaLoader to check for techs in their registry ([view](https://github.com/videojs/video.js/pull/2798))
|
||||
|
||||
## 5.1.0 (2015-11-02)
|
||||
* @typcn bumped grunt-sass to ^1.0.0 to support node 4.x ([view](https://github.com/videojs/video.js/pull/2645))
|
||||
* @gkatsev removed unhelpful isCrossOrigin test ([view](https://github.com/videojs/video.js/pull/2715))
|
||||
* @forbesjo updated karma to use all installed browsers for unit tests ([view](https://github.com/videojs/video.js/pull/2708))
|
||||
* @forbesjo removed android/ios tests to increase build stability ([view](https://github.com/videojs/video.js/pull/2739))
|
||||
* @nickygerritsen added canPlayType method to player ([view](https://github.com/videojs/video.js/pull/2709))
|
||||
* @gkatsev fixes track tests and ignored empty properties in tracks converter ([view](https://github.com/videojs/video.js/pull/2744))
|
||||
* @misteroneill added a modal dialog ([view](https://github.com/videojs/video.js/pull/2668))
|
||||
* @misteroneill removed z-index from big play button ([view](https://github.com/videojs/video.js/pull/2639))
|
||||
* @DaveVoyles updated URL to player API docs ([view](https://github.com/videojs/video.js/pull/2685))
|
||||
* @ ([view](https://github.com/videojs/video.js/pull/2691))
|
||||
* @kahwee Fixed sandbox plugin example to work in Video.js 5 ([view](https://github.com/videojs/video.js/pull/2691))
|
||||
* @Soviut Fixed argument names in some API docs ([view](https://github.com/videojs/video.js/pull/2714))
|
||||
* @forbesjo Added Microsoft Caption Maker link ([view](https://github.com/videojs/video.js/pull/2618))
|
||||
* @misteroneill updated modal dialog CSS ([view](https://github.com/videojs/video.js/pull/2756))
|
||||
* @misteroneill Add browserify
|
||||
* @brkattk updated emulateTextTrack to exit early if no textTracks ([view](https://github.com/videojs/video.js/pull/2426))
|
||||
* @chemoish Fix captions sticking to bottom for webkit browsers. Fixes #2193 ([view](https://github.com/videojs/video.js/pull/2702))
|
||||
* @imbcmdth Deferred the implementation of select functions in the tech to source handlers if they provide them ([view](https://github.com/videojs/video.js/pull/2760))
|
||||
|
||||
## 5.0.2 (2015-10-23)
|
||||
* @imbcmdth fixed an issue with emulateTextTracks being called before the tech dom was ready ([view](https://github.com/videojs/video.js/pull/2692))
|
||||
* @gkatsev bumped obj.assign to fix uncaught SecurityError in iframes. Fixes #2703 ([view](https://github.com/videojs/video.js/pull/2721))
|
||||
* @gkatsev updated contrib update and have contrib release only update local branches ([view](https://github.com/videojs/video.js/pull/2723))
|
||||
* @gkatsev bumped chg to fix stalling issues ([view](https://github.com/videojs/video.js/pull/2732))
|
||||
|
||||
## 5.0.0 (2015-09-29)
|
||||
* @carpasse infer MIME types from file extensions in the HTML5 and Flash techs ([view](https://github.com/videojs/video.js/pull/1974))
|
||||
* @mmcc updated the slider to allow for vertical orientation ([view](https://github.com/videojs/video.js/pull/1816))
|
||||
* @dmlap removed an ie6 hack for flash object embedding ([view](https://github.com/videojs/video.js/pull/1946))
|
||||
@@ -117,8 +444,79 @@ CHANGELOG
|
||||
* @gkatsev made the sass files available via npm in src/css ([view](https://github.com/videojs/video.js/pull/2546))
|
||||
* @heff removed playerOptions from plugin options because it created an inconsistency in plugin inits ([view](https://github.com/videojs/video.js/pull/2532))
|
||||
* @heff added a default data attribute to fix the progress handle display in IE8 ([view](https://github.com/videojs/video.js/pull/2547))
|
||||
* @heff added back the default cdn url for the swf ([view](https://github.com/videojs/video.js/pull/2533))
|
||||
* @gkatsev fixed the default state of userActive ([view](https://github.com/videojs/video.js/pull/2557))
|
||||
* @heff fixed event bubbling in IE8 ([view](https://github.com/videojs/video.js/pull/2563))
|
||||
* @heff cleaned up internal duration handling ([view](https://github.com/videojs/video.js/pull/2552))
|
||||
* @heff fixed the UI for live streams ([view](https://github.com/videojs/video.js/pull/2557))
|
||||
* @gkatsev updated opacity of caption settings background color ([view](https://github.com/videojs/video.js/pull/2573))
|
||||
* @gkatsev made all sass variables !default ([view](https://github.com/videojs/video.js/pull/2574))
|
||||
* @heff fixed the inline volume control and made it the default ([view](https://github.com/videojs/video.js/pull/2553))
|
||||
* @forbesjo fixed webkit deprecation warnings ([view](https://github.com/videojs/video.js/pull/2558))
|
||||
* @forbesjo added Android and iOS browser testing ([view](https://github.com/videojs/video.js/pull/2538))
|
||||
* @heff improved css selector strengths ([view](https://github.com/videojs/video.js/pull/2583))
|
||||
* @heff moved scss vars to be private ([view](https://github.com/videojs/video.js/pull/2584))
|
||||
* @heff added a fancy loading spinner ([view](https://github.com/videojs/video.js/pull/2582))
|
||||
* @gkatsev added a mouse-hover time display to the progress bar ([view](https://github.com/videojs/video.js/pull/2569))
|
||||
* @heff added an attributes argument to createEl() ([view](https://github.com/videojs/video.js/pull/2589))
|
||||
* @heff made tech related functions private in the player ([view](https://github.com/videojs/video.js/pull/2590))
|
||||
* @heff removed the loadedalldata event ([view](https://github.com/videojs/video.js/pull/2591))
|
||||
* @dmlap switched to using raynos/xhr for requests ([view](https://github.com/videojs/video.js/pull/2594))
|
||||
* @heff Fixed double loadstart and ready events ([view](https://github.com/videojs/video.js/pull/2605))
|
||||
* @gkatsev fixed potential double default style elements ([view](https://github.com/videojs/video.js/pull/2619))
|
||||
* @imbcmdth extended createTimeRange to support multiple timeranges ([view](https://github.com/videojs/video.js/pull/2604))
|
||||
* @misteroneill rename "extends" to "extend" for ie8 ([view](https://github.com/videojs/video.js/pull/2624))
|
||||
* @forbesjo removed the PhantomJS dependency ([view](https://github.com/videojs/video.js/pull/2622))
|
||||
* @misteroneill re-exposed videojs.TextTrack ([view](https://github.com/videojs/video.js/pull/2625))
|
||||
* @heff removed a second copy of video.novtt.js from dist ([view](https://github.com/videojs/video.js/pull/2630))
|
||||
* @heff fixed timeranges deprecation warnings in tests ([view](https://github.com/videojs/video.js/pull/2627))
|
||||
* @misteroneill updated play control to use its state for icon ([view](https://github.com/videojs/video.js/pull/2636))
|
||||
* @gkatsev exposed isCrossOrigin and used it to enable CORS for textTrack XHRs ([view](https://github.com/videojs/video.js/pull/2633))
|
||||
* @misteroneill fixed tsml to be used as a tag for template strings ([view](https://github.com/videojs/video.js/pull/2629))
|
||||
* @eXon added support for a tech-supplied poster ([view](https://github.com/videojs/video.js/pull/2339))
|
||||
* @heff improved some skin defaults for external styling ([view](https://github.com/videojs/video.js/pull/2642))
|
||||
* @heff changed component child lists to arrays instead of objects ([view](https://github.com/videojs/video.js/pull/2477))
|
||||
|
||||
--------------------
|
||||
## 4.12.15 (2015-08-31)
|
||||
* @dmlap update to videojs-swf 4.7.4 ([view](https://github.com/videojs/video.js/pull/2463))
|
||||
* @bc-bbay migrate seeking on replay to the flash tech ([view](https://github.com/videojs/video.js/pull/2519))
|
||||
* Updated to v4.7.5 of the swf ([view](https://github.com/videojs/video.js/pull/2531))
|
||||
|
||||
## 4.12.14 (2015-08-21)
|
||||
* @gkatsev removed non-default track auto-disabling ([view](https://github.com/videojs/video.js/pull/2468))
|
||||
|
||||
## 4.12.13 (2015-08-10)
|
||||
* @dmlap update to videojs-swf v4.7.3 ([view](https://github.com/videojs/video.js/pull/2457))
|
||||
|
||||
## 4.12.12 (2015-07-23)
|
||||
* @imbcmdth updated source handlers to use bracket notation so they wont break when using minified videojs ([view](https://github.com/videojs/video.js/pull/2348))
|
||||
* @imbcmdth fix potential triggerReady infinite loop ([view](https://github.com/videojs/video.js/pull/2398))
|
||||
|
||||
## 4.12.11 (2015-07-09)
|
||||
* @saxena-gaurav updated swf to 4.7.2 to fix flash of previous video frame ([view](https://github.com/videojs/video.js/pull/2300))
|
||||
* @gkatsev updated the vtt.js version to fix JSON issues ([view](https://github.com/videojs/video.js/pull/2327))
|
||||
* @dmlap fixed an error caused by calling vjs_getProperty on the swf too early ([view](https://github.com/videojs/video.js/pull/2289))
|
||||
|
||||
## 4.12.10 (2015-06-23)
|
||||
* @dmlap update to video-js-swf 4.7.1 ([view](https://github.com/videojs/video.js/pull/2280))
|
||||
* @imbcmdth src() should not return blob URLs with MSE source handlers ([view](https://github.com/videojs/video.js/pull/2271))
|
||||
|
||||
## 4.12.9 (2015-06-15)
|
||||
* @imbcmdth updated currentSrc to return src instead of blob urls in html5 tech. Fixes #2232 ([view](https://github.com/videojs/video.js/pull/2232))
|
||||
* @imbcmdth fixed async currentSrc behavior ([view](https://github.com/videojs/video.js/pull/2256))
|
||||
|
||||
## 4.12.8 (2015-06-05)
|
||||
* @dmlap add the seekable property ([view](https://github.com/videojs/video.js/pull/2207))
|
||||
* @dmlap fix seekable export ([view](https://github.com/videojs/video.js/pull/2227))
|
||||
|
||||
## 4.12.7 (2015-05-19)
|
||||
* @tjenkinson Added background-color to vjs-poster to remove transparent borders around scaled poster image ([view](https://github.com/videojs/video.js/pull/2138))
|
||||
* @bc-bbay fixed a bug where the player would try to autoplay when there was no source ([view](https://github.com/videojs/video.js/pull/2127))
|
||||
* @bc-bbay update time display on loadedmetadata ([view](https://github.com/videojs/video.js/pull/2151))
|
||||
* @dmlap update swf to 4.7 to pick up preload fix ([view](https://github.com/videojs/video.js/pull/2170))
|
||||
|
||||
## 4.12.6 (2015-05-07)
|
||||
* @saxena-gaurav fixed a bug from disposing after changing techs ([view](https://github.com/videojs/video.js/pull/2125))
|
||||
|
||||
## 4.12.5 (2015-03-17)
|
||||
* Updated to videojs-swf v4.5.4 to fix a potential security issue ([view](https://github.com/videojs/video.js/pull/1955))
|
||||
|
||||
+2
-2
@@ -28,7 +28,7 @@ Guidelines for bug reports:
|
||||
|
||||
2. Check if the issue has already been fixed — try to reproduce it using the latest `master` branch in the repository.
|
||||
|
||||
3. Isolate the problem — **create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/7/edit) as a starting point.
|
||||
3. Isolate the problem — **create a [reduced test case](https://css-tricks.com/reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/7/edit) as a starting point.
|
||||
|
||||
A good bug report should be as detailed as possible, so that others won't have to follow up for the essential details.
|
||||
|
||||
@@ -144,7 +144,7 @@ npm install
|
||||
Build a local copy of video.js and run tests
|
||||
|
||||
```bash
|
||||
grunt
|
||||
grunt dist
|
||||
grunt test
|
||||
```
|
||||
|
||||
|
||||
+3
-1
@@ -1,5 +1,7 @@
|
||||
require('babel/register');
|
||||
|
||||
// Need to `require` a separate Grunt file so we can use ES6 syntax via
|
||||
// Babel's require hook.
|
||||
module.exports = function(grunt) {
|
||||
require('./grunt.js')(grunt);
|
||||
require('./build/grunt.js')(grunt);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
## Description
|
||||
Briefly describe the issue.
|
||||
Include a [reduced test case](https://css-tricks.com/reduced-test-cases/), we have a [starter template](http://jsbin.com/axedog/edit?html,output) on JSBin you can use.
|
||||
|
||||
## Steps to reproduce
|
||||
Explain in detail the exact steps necessary to reproduce the issue.
|
||||
|
||||
1.
|
||||
2.
|
||||
3.
|
||||
|
||||
## Results
|
||||
### Expected
|
||||
Please describe what you expected to see.
|
||||
|
||||
### Actual
|
||||
Please describe what actually happened.
|
||||
|
||||
### Error output
|
||||
If there are any errors at all, please include them here.
|
||||
|
||||
## Additional Information
|
||||
Please include any additional information necessary here. Including the following:
|
||||
### versions
|
||||
#### videojs
|
||||
what version of videojs does this occur with?
|
||||
#### browsers
|
||||
what browser are affected?
|
||||
#### OSes
|
||||
what platforms (operating systems and devices) are affected?
|
||||
### plugins
|
||||
are any videojs plugins being used on the page? If so, please list them below.
|
||||
@@ -0,0 +1,16 @@
|
||||
## Description
|
||||
Please describe the change as necessary.
|
||||
If it's a feature or enhancement please be as detailed as possible.
|
||||
If it's a bug fix, please link the issue that it fixes or describe the bug in as much detail.
|
||||
|
||||
|
||||
## Specific Changes proposed
|
||||
Please list the specific changes involved in this pull request.
|
||||
|
||||
## Requirements Checklist
|
||||
- [ ] Feature implemented / Bug fixed
|
||||
- [ ] If necessary, more likely in a feature request than a bug fix
|
||||
- [ ] Unit Tests updated or fixed
|
||||
- [ ] Docs/guides updated
|
||||
- [ ] Example created ([starter template on JSBin](http://jsbin.com/axedog/edit?html,output))
|
||||
- [ ] Reviewed by Two Core Contributors
|
||||
+15
-16
@@ -1,31 +1,33 @@
|
||||
## Please Note!
|
||||
The master branch is now the development branch for 5.0 and should be considered unstable until the first 5.0 release. If you're looking for the most recent stable release, please refer to the [stable branch](https://github.com/videojs/video.js/tree/stable).
|
||||

|
||||
|
||||
# [Video.js - HTML5 Video Player](http://videojs.com)
|
||||
[](https://travis-ci.org/videojs/video.js)
|
||||
[](https://coveralls.io/github/videojs/video.js?branch=master)
|
||||
|
||||

|
||||
[](https://nodei.co/npm/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~~ 100,000 websites.
|
||||
> 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~~ ~~100,000~~ 200,000 websites.
|
||||
|
||||
## Quick start
|
||||
Thanks to the awesome folks over at [Fastly](http://www.fastly.com/), there's a free, CDN hosted version of Video.js that anyone can use. Simply add these includes to your document's
|
||||
Thanks to the awesome folks over at [Fastly](http://www.fastly.com/), there's a free, CDN hosted version of Video.js that anyone can use.
|
||||
Also, check out the [Getting Started](http://videojs.com/getting-started/) page on our website which has the latest urls as well.
|
||||
Simply add these includes to your document's
|
||||
`<head>`:
|
||||
|
||||
```html
|
||||
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
|
||||
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
|
||||
<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
|
||||
<script src="//vjs.zencdn.net/5.8/video.min.js"></script>
|
||||
```
|
||||
|
||||
Then, whenever you want to use Video.js you can simply use the `<video>` element as your normally would, but with an additional `data-setup` attribute containing any Video.js options. These options
|
||||
can include any Video.js option plus potential [plugin](https://github.com/videojs/video.js/wiki/Plugins) options, just make sure they're valid JSON!
|
||||
can include any Video.js option plus potential [plugin](http://videojs.com/plugins/) options, just make sure they're valid JSON!
|
||||
|
||||
```html
|
||||
<video id="really-cool-video" class="video-js vjs-default-skin" controls
|
||||
preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
|
||||
data-setup='{}'>
|
||||
<source src="really-cool-video.mp4" type='video/mp4'>
|
||||
<source src="really-cool-video.webm" type='video/webm'>
|
||||
<source src="really-cool-video.mp4" type="video/mp4">
|
||||
<source src="really-cool-video.webm" type="video/webm">
|
||||
<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>
|
||||
@@ -48,8 +50,7 @@ var player = videojs('really-cool-video', { /* Options */ }, function() {
|
||||
});
|
||||
```
|
||||
|
||||
If you're ready to dive in, the [documentation](docs/index.md) is the first place to go for more information. Generally the
|
||||
[player API docs](docs/api/vjs.Player.md) are the most pertinent.
|
||||
If you're ready to dive in, the [documentation](http://docs.videojs.com) is the first place to go for more information.
|
||||
|
||||
## Contributing
|
||||
Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the [contributing guide](CONTRIBUTING.md).
|
||||
@@ -60,5 +61,3 @@ To build your own custom version read the section on [contributing code](CONTRIB
|
||||
## License
|
||||
|
||||
Video.js is licensed under the Apache License, Version 2.0. [View the license file](LICENSE)
|
||||
|
||||
Copyright 2014-2015 Brightcove, Inc.
|
||||
|
||||
+2
-2
@@ -2,8 +2,8 @@
|
||||
"name": "video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"main": [
|
||||
"src/js/video.js",
|
||||
"src/css/video-js.scss"
|
||||
"dist/video.js",
|
||||
"dist/video-js.css"
|
||||
],
|
||||
"moduleType": "es6",
|
||||
"keywords": [
|
||||
|
||||
+143
-64
@@ -1,3 +1,4 @@
|
||||
import {gruntCustomizer, gruntOptionsMaker} from './options-customizer.js';
|
||||
module.exports = function(grunt) {
|
||||
require('time-grunt')(grunt);
|
||||
|
||||
@@ -13,9 +14,80 @@ module.exports = function(grunt) {
|
||||
patch: verParts[2]
|
||||
};
|
||||
|
||||
const browserifyGruntDefaults = {
|
||||
browserifyOptions: {
|
||||
standalone: 'videojs'
|
||||
},
|
||||
plugin: [
|
||||
['browserify-derequire']
|
||||
],
|
||||
transform: [
|
||||
require('babelify').configure({
|
||||
sourceMapRelative: './',
|
||||
loose: ['all']
|
||||
}),
|
||||
['browserify-versionify', {
|
||||
placeholder: '__VERSION__',
|
||||
version: pkg.version
|
||||
}],
|
||||
['browserify-versionify', {
|
||||
placeholder: '__VERSION_NO_PATCH__',
|
||||
version: version.majorMinor
|
||||
}],
|
||||
['browserify-versionify', {
|
||||
placeholder: '__SWF_VERSION__',
|
||||
version: pkg.dependencies['videojs-swf']
|
||||
}]
|
||||
]
|
||||
};
|
||||
|
||||
const githubReleaseDefaults = {
|
||||
options: {
|
||||
release: {
|
||||
tag_name: 'v'+ version.full,
|
||||
name: version.full,
|
||||
body: require('chg').find(version.full).changesRaw
|
||||
},
|
||||
},
|
||||
files: {
|
||||
src: [`dist/video-js-${version.full}.zip`] // Files that you want to attach to Release
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Customizes _.merge behavior in `browserifyGruntOptions` to concatenate
|
||||
* arrays. This can be overridden on a per-call basis to
|
||||
*
|
||||
* @see https://lodash.com/docs#merge
|
||||
* @function browserifyGruntCustomizer
|
||||
* @private
|
||||
* @param {Mixed} objectValue
|
||||
* @param {Mixed} sourceValue
|
||||
* @return {Object}
|
||||
*/
|
||||
const browserifyGruntCustomizer = gruntCustomizer;
|
||||
|
||||
/**
|
||||
* Creates a unique object of Browserify Grunt task options.
|
||||
*
|
||||
* @function browserifyGruntOptions
|
||||
* @private
|
||||
* @param {Object} [options]
|
||||
* @param {Function} [customizer=browserifyGruntCustomizer]
|
||||
* If the default array-concatenation behavior is not desireable,
|
||||
* pass _.noop or a unique customizer (https://lodash.com/docs#merge).
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
const browserifyGruntOptions = gruntOptionsMaker(browserifyGruntDefaults, browserifyGruntCustomizer);
|
||||
|
||||
const githubReleaseCustomizer = gruntCustomizer;
|
||||
const githubReleaseOptions = gruntOptionsMaker(githubReleaseDefaults, githubReleaseCustomizer);
|
||||
|
||||
/**
|
||||
* Creates processor functions for license banners.
|
||||
*
|
||||
* @function createLicenseProcessor
|
||||
* @private
|
||||
* @param {Object} data Custom data overriding `bannerCommonData`. Will
|
||||
* not be mutated.
|
||||
@@ -23,11 +95,13 @@ module.exports = function(grunt) {
|
||||
* using an object constructed from `bannerCommonData`
|
||||
* and the `data` argument.
|
||||
*/
|
||||
let createLicenseProcessor = (data) => function () {
|
||||
return grunt.template.process(license, {
|
||||
data: _.merge({}, bannerCommonData, data)
|
||||
});
|
||||
};
|
||||
function createLicenseProcessor(data) {
|
||||
return () => {
|
||||
return grunt.template.process(license, {
|
||||
data: _.merge({}, bannerCommonData, data)
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
version.majorMinor = `${version.major}.${version.minor}`;
|
||||
grunt.vjsVersion = version;
|
||||
@@ -49,10 +123,8 @@ module.exports = function(grunt) {
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
sourceMap: true,
|
||||
sourceMapIn: 'build/temp/video.js.map',
|
||||
sourceMapRoot: '../../src/js',
|
||||
preserveComments: 'some',
|
||||
screwIE8: false,
|
||||
mangle: true,
|
||||
compress: {
|
||||
sequences: true,
|
||||
@@ -74,13 +146,21 @@ module.exports = function(grunt) {
|
||||
},
|
||||
dist: {},
|
||||
watch: {
|
||||
jshint: {
|
||||
files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
|
||||
tasks: 'jshint'
|
||||
novtt: {
|
||||
files: ['build/temp/video.js'],
|
||||
tasks: ['concat:novtt']
|
||||
},
|
||||
minify: {
|
||||
files: ['build/temp/video.js'],
|
||||
tasks: ['uglify']
|
||||
},
|
||||
skin: {
|
||||
files: ['src/css/**/*'],
|
||||
tasks: 'sass'
|
||||
tasks: ['sass']
|
||||
},
|
||||
jshint: {
|
||||
files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
|
||||
tasks: 'jshint'
|
||||
}
|
||||
},
|
||||
connect: {
|
||||
@@ -106,7 +186,6 @@ module.exports = function(grunt) {
|
||||
fonts: { cwd: 'node_modules/videojs-font/fonts/', src: ['*'], dest: 'build/temp/font/', expand: true, filter: 'isFile' },
|
||||
swf: { cwd: 'node_modules/videojs-swf/dist/', src: 'video-js.swf', dest: 'build/temp/', expand: true, filter: 'isFile' },
|
||||
ie8: { cwd: 'node_modules/videojs-ie8/dist/', src: ['**/**'], dest: 'build/temp/ie8/', expand: true, filter: 'isFile' },
|
||||
novtt: { cwd: 'build/temp/', src: 'video.novtt.js', dest: 'build/temp/alt/', expand: true, filter: 'isFile' },
|
||||
dist: { cwd: 'build/temp/', src: ['**/**', '!test*'], dest: 'dist/', expand: true, filter: 'isFile' },
|
||||
examples: { cwd: 'docs/examples/', src: ['**/**'], dest: 'dist/examples/', expand: true, filter: 'isFile' }
|
||||
},
|
||||
@@ -114,7 +193,7 @@ module.exports = function(grunt) {
|
||||
minify: {
|
||||
expand: true,
|
||||
cwd: 'build/temp/',
|
||||
src: ['video-js.css'],
|
||||
src: ['video-js.css', 'alt/video-js-cdn.css'],
|
||||
dest: 'build/temp/',
|
||||
ext: '.min.css'
|
||||
}
|
||||
@@ -122,7 +201,8 @@ module.exports = function(grunt) {
|
||||
sass: {
|
||||
build: {
|
||||
files: {
|
||||
'build/temp/video-js.css': 'src/css/video-js.scss'
|
||||
'build/temp/video-js.css': 'src/css/vjs.scss',
|
||||
'build/temp/alt/video-js-cdn.css': 'src/css/vjs-cdn.scss'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -132,7 +212,12 @@ module.exports = function(grunt) {
|
||||
configFile: 'test/karma.conf.js'
|
||||
},
|
||||
|
||||
defaults: {},
|
||||
defaults: {
|
||||
detectBrowsers: {
|
||||
enabled: !process.env.TRAVIS,
|
||||
usePhantomJS: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
autoWatch: true,
|
||||
@@ -146,7 +231,6 @@ module.exports = function(grunt) {
|
||||
firefox: { browsers: ['Firefox'] },
|
||||
safari: { browsers: ['Safari'] },
|
||||
ie: { browsers: ['IE'] },
|
||||
phantomjs: { browsers: ['PhantomJS'] },
|
||||
|
||||
// this only runs on PRs from the mainrepo on BrowserStack
|
||||
browserstack: { browsers: ['chrome_bs'] },
|
||||
@@ -227,46 +311,37 @@ module.exports = function(grunt) {
|
||||
auth: {
|
||||
user: process.env.VJS_GITHUB_USER,
|
||||
password: process.env.VJS_GITHUB_TOKEN
|
||||
},
|
||||
release: {
|
||||
tag_name: 'v'+ version.full,
|
||||
name: version.full,
|
||||
body: require('chg').find(version.full).changesRaw
|
||||
}
|
||||
},
|
||||
files: {
|
||||
src: [`dist/video-js-${version.full}.zip`] // Files that you want to attach to Release
|
||||
}
|
||||
release: githubReleaseOptions(),
|
||||
prerelease: githubReleaseOptions({
|
||||
options: {
|
||||
release: {
|
||||
prerelease: true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
browserify: {
|
||||
options: {
|
||||
browserifyOptions: {
|
||||
debug: true,
|
||||
standalone: 'videojs'
|
||||
},
|
||||
plugin: [
|
||||
['browserify-derequire']
|
||||
],
|
||||
transform: [
|
||||
require('babelify').configure({
|
||||
sourceMapRelative: './',
|
||||
loose: ['all']
|
||||
}),
|
||||
['browserify-versionify', {
|
||||
placeholder: '__VERSION__',
|
||||
version: pkg.version
|
||||
}],
|
||||
['browserify-versionify', {
|
||||
placeholder: '__VERSION_NO_PATCH__',
|
||||
version: version.majorMinor
|
||||
}]
|
||||
]
|
||||
},
|
||||
options: browserifyGruntOptions(),
|
||||
build: {
|
||||
files: {
|
||||
'build/temp/video.js': ['src/js/video.js']
|
||||
}
|
||||
},
|
||||
dist: {
|
||||
options: browserifyGruntOptions({
|
||||
transform: [
|
||||
['browserify-versionify', {
|
||||
placeholder: '../node_modules/videojs-vtt.js/dist/vtt.js',
|
||||
version: 'https://cdn.rawgit.com/gkatsev/vtt.js/vjs-v0.12.1/dist/vtt.min.js'
|
||||
}],
|
||||
]
|
||||
}),
|
||||
files: {
|
||||
'build/temp/video.js': ['src/js/video.js']
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
watch: true,
|
||||
@@ -282,6 +357,9 @@ module.exports = function(grunt) {
|
||||
debug: true,
|
||||
standalone: false
|
||||
},
|
||||
plugin: [
|
||||
['proxyquireify/plugin']
|
||||
],
|
||||
banner: false,
|
||||
watch: true,
|
||||
keepAlive: true
|
||||
@@ -294,14 +372,6 @@ module.exports = function(grunt) {
|
||||
}
|
||||
}
|
||||
},
|
||||
exorcise: {
|
||||
build: {
|
||||
options: {},
|
||||
files: {
|
||||
'build/temp/video.js.map': ['build/temp/video.js'],
|
||||
}
|
||||
}
|
||||
},
|
||||
coveralls: {
|
||||
options: {
|
||||
// warn instead of failing when coveralls errors
|
||||
@@ -318,13 +388,13 @@ module.exports = function(grunt) {
|
||||
separator: '\n'
|
||||
},
|
||||
src: ['build/temp/video.js'],
|
||||
dest: 'build/temp/video.novtt.js'
|
||||
dest: 'build/temp/alt/video.novtt.js'
|
||||
},
|
||||
vtt: {
|
||||
options: {
|
||||
separator: '\n',
|
||||
},
|
||||
src: ['build/temp/video.js', 'node_modules/vtt.js/dist/vtt.js'],
|
||||
src: ['build/temp/video.js', 'node_modules/videojs-vtt.js/dist/vtt.js'],
|
||||
dest: 'build/temp/video.js',
|
||||
},
|
||||
},
|
||||
@@ -369,16 +439,15 @@ module.exports = function(grunt) {
|
||||
require('load-grunt-tasks')(grunt);
|
||||
grunt.loadNpmTasks('videojs-doc-generator');
|
||||
grunt.loadNpmTasks('chg');
|
||||
grunt.loadNpmTasks('gkatsev-grunt-sass');
|
||||
|
||||
grunt.registerTask('build', [
|
||||
const buildDependents = [
|
||||
'clean:build',
|
||||
|
||||
'jshint',
|
||||
'browserify:build',
|
||||
'exorcise:build',
|
||||
'concat:novtt',
|
||||
'concat:vtt',
|
||||
'copy:novtt',
|
||||
'usebanner:novtt',
|
||||
'usebanner:vtt',
|
||||
'uglify',
|
||||
@@ -391,20 +460,30 @@ module.exports = function(grunt) {
|
||||
'copy:swf',
|
||||
'copy:ie8',
|
||||
'vjslanguages'
|
||||
]);
|
||||
];
|
||||
|
||||
grunt.registerTask('build', buildDependents);
|
||||
|
||||
grunt.registerTask(
|
||||
'build:dist',
|
||||
buildDependents.map(task => task === 'browserify:build' ? 'browserify:dist' : task)
|
||||
);
|
||||
|
||||
grunt.registerTask('dist', [
|
||||
'clean:dist',
|
||||
'build',
|
||||
'build:dist',
|
||||
'copy:dist',
|
||||
'copy:examples',
|
||||
'zip:dist'
|
||||
]);
|
||||
|
||||
grunt.registerTask('skin', ['sass']);
|
||||
|
||||
// Default task - build and test
|
||||
grunt.registerTask('default', ['test']);
|
||||
|
||||
grunt.registerTask('test', ['build', 'karma:defaults']);
|
||||
// The test script includes coveralls only when the TRAVIS env var is set.
|
||||
grunt.registerTask('test', ['build', 'karma:defaults'].concat(process.env.TRAVIS && 'coveralls').filter(Boolean));
|
||||
|
||||
// Run while developing
|
||||
grunt.registerTask('dev', ['build', 'connect:dev', 'concurrent:watchSandbox']);
|
||||
@@ -0,0 +1,49 @@
|
||||
import _ from 'lodash-compat';
|
||||
/**
|
||||
* Customizes _.merge behavior in `gruntOptions` to concatenate
|
||||
* arrays. This can be overridden on a per-call basis to
|
||||
*
|
||||
* @see https://lodash.com/docs#merge
|
||||
* @function GruntCustomizer
|
||||
* @private
|
||||
* @param {Mixed} objectValue
|
||||
* @param {Mixed} sourceValue
|
||||
* @return {Object}
|
||||
*/
|
||||
function gruntCustomizer(objectValue, sourceValue) {
|
||||
if (Array.isArray(objectValue)) {
|
||||
return objectValue.concat(sourceValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a gruntOptions instance for the specific defaultOptions and gruntCustomizer
|
||||
*
|
||||
* @function browserifyGruntOptions
|
||||
* @private
|
||||
* @param {Object} [options]
|
||||
* @param {Function} [customizer=gruntCustomizer]
|
||||
* If the default array-concatenation behavior is not desireable,
|
||||
* pass _.noop or a unique customizer (https://lodash.com/docs#merge).
|
||||
*
|
||||
* @return {Function}
|
||||
*/
|
||||
function gruntOptionsMaker(defaultOptions, gruntCustomizer) {
|
||||
/**
|
||||
* Creates a unique object of Browserify Grunt task options.
|
||||
*
|
||||
* @function gruntOptions
|
||||
* @private
|
||||
* @param {Object} [options]
|
||||
* @param {Function} [customizer=browserifyGruntCustomizer]
|
||||
* If the default array-concatenation behavior is not desireable,
|
||||
* pass _.noop or a unique customizer (https://lodash.com/docs#merge).
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
return function gruntOptions(options = null, customizer = gruntCustomizer) {
|
||||
return _.merge({}, defaultOptions, options, customizer);
|
||||
}
|
||||
};
|
||||
|
||||
export { gruntCustomizer, gruntOptionsMaker };
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"version": "5.0.0-rc.73",
|
||||
"version": "5.11.8",
|
||||
"keywords": [
|
||||
"videojs",
|
||||
"html5",
|
||||
|
||||
+112
-38
@@ -41,7 +41,8 @@
|
||||
[ "git checkout -b stable origin/stable", "Create the stable branch for patches" ],
|
||||
[ "git remote add upstream https://github.com/{{meta.org}}/{{meta.name}}.git", "Add the upstream project as a remote for pulling changes" ],
|
||||
[ "git fetch upstream", "Get all upstream branches and changes" ],
|
||||
{ "include": "update all" }
|
||||
{ "include": "update all" },
|
||||
[ "grunt", "Build the library" ]
|
||||
]
|
||||
},
|
||||
|
||||
@@ -50,22 +51,63 @@
|
||||
"steps": [
|
||||
{ "include": "update stable" },
|
||||
{ "include": "update master" },
|
||||
[ "npm install", "Download dependencies"],
|
||||
[ "grunt", "Build the library" ]
|
||||
[ "npm install", "Download dependencies"]
|
||||
]
|
||||
},
|
||||
"local": {
|
||||
"master": {
|
||||
"steps": [
|
||||
[ "git checkout master", "Switch to the development branch" ],
|
||||
[ "git pull upstream master", "Get any changes to master in the main project" ]
|
||||
]
|
||||
},
|
||||
"stable": {
|
||||
"steps": [
|
||||
[ "git checkout stable", "Switch to the release branch" ],
|
||||
[ "git pull upstream stable", "Get any changes to stable in the main project" ]
|
||||
]
|
||||
},
|
||||
"patch": {
|
||||
"steps": [
|
||||
[ "git checkout patch", "Switch to the patch branch" ],
|
||||
[ "git pull upstream patch", "Get any changes to patch in the main project" ]
|
||||
]
|
||||
}
|
||||
},
|
||||
"remote": {
|
||||
"master": {
|
||||
"steps": [
|
||||
{ "include": "update local master" },
|
||||
[ "git push origin master", "Push any changes to your copy of the main project" ]
|
||||
]
|
||||
},
|
||||
"stable": {
|
||||
"steps": [
|
||||
{ "include": "update local stable" },
|
||||
[ "git push origin stable", "Push any changes to your copy of the main project" ]
|
||||
]
|
||||
},
|
||||
"patch": {
|
||||
"steps": [
|
||||
{ "include": "update local patch" },
|
||||
[ "git push origin patch", "Push any changes to your copy of the main project" ]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
"master": {
|
||||
"steps": [
|
||||
[ "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" ]
|
||||
{ "include": "update remote master" }
|
||||
]
|
||||
},
|
||||
"stable": {
|
||||
"steps": [
|
||||
[ "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" ]
|
||||
{ "include": "update remote stable" }
|
||||
]
|
||||
},
|
||||
"patch": {
|
||||
"steps": [
|
||||
{ "include": "update remote patch" }
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -148,7 +190,10 @@
|
||||
"desc": "Merge a submitted patch",
|
||||
"steps": [
|
||||
{ "include": "update {{meta.branches.release}}" },
|
||||
{ "include": "pull_request accept" }
|
||||
{ "include": "pull_request accept" },
|
||||
[ "git checkout master", "Checkout the developmet branch" ],
|
||||
[ "git merge stable", "Merge the patch changes" ],
|
||||
[ "git push upstream master", "Push the development changes" ]
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -188,21 +233,54 @@
|
||||
|
||||
"patch": {
|
||||
"release_type": "patch",
|
||||
"description": "Create a patch release from the release branch (stable)",
|
||||
"steps": [{ "include": "release run" }]
|
||||
},
|
||||
"minor": {
|
||||
"description": "Create a minor release from the development branch (master)",
|
||||
"release_type": "minor",
|
||||
"steps": [{ "include": "release run" }]
|
||||
"steps": [
|
||||
{ "include": "update local master" },
|
||||
{ "include": "update local stable" },
|
||||
[ "git merge master", "Copy the latest development changes to the release branch" ],
|
||||
{ "include": "release run" },
|
||||
[ "git checkout master", "Checkout the developmet branch" ],
|
||||
[ "git merge stable", "Merge package changes into the dev brach" ],
|
||||
[ "git push upstream master", "Push the dev branch changes to the repo" ]
|
||||
]
|
||||
},
|
||||
|
||||
"next": {
|
||||
"patch": {
|
||||
"description": "Create a patch release and tag it @next on npm",
|
||||
"release_type": "patch",
|
||||
"steps": [{ "include": "release run_next" }]
|
||||
},
|
||||
"minor": {
|
||||
"description": "Create a minor release and tag it @next on npm",
|
||||
"release_type": "minor",
|
||||
"steps": [{ "include": "release run_next" }]
|
||||
},
|
||||
"major": {
|
||||
"description": "Create a major release and tag it @next on npm",
|
||||
"release_type": "major",
|
||||
"steps": [{ "include": "release run_next" }]
|
||||
}
|
||||
},
|
||||
|
||||
"prerelease": {
|
||||
"release_type": "prerelease",
|
||||
"steps": [{ "include": "release run_next" }]
|
||||
},
|
||||
|
||||
"run_next": {
|
||||
"steps": [
|
||||
[ "git checkout master", "Checkout the developmet branch" ],
|
||||
[ "git pull upstream master", "Update the developmet branch" ],
|
||||
{ "include": "branch check" },
|
||||
{ "include": "update local master" },
|
||||
[ "git checkout -b temp-release-branch master","Create a temporary branch for the dist" ],
|
||||
[ "grunt version:{{release_type}}", "Bump package versions" ],
|
||||
[ "./build/bin/version", "Return the current VJS Version from the package.json file", "version" ],
|
||||
[ "grunt chg-release:{{version}}", "Update the changelog with the new release" ],
|
||||
[ "git commit -am 'v{{version}}'", "Add and commit the package changes" ],
|
||||
[ "git checkout master", "Checkout the developmet branch" ],
|
||||
[ "git merge temp-release-branch", "Merge package changes into the dev brach" ],
|
||||
@@ -213,39 +291,34 @@
|
||||
[ "git commit -m 'v{{version}} dist'", "Commit the dist changes" ],
|
||||
[ "git tag -a v{{version}} -m 'v{{version}}'", "Tag the release" ],
|
||||
[ "git push upstream --tags", "Push the new tag to the repo" ],
|
||||
[ "grunt github-release:prerelease", "Create a new pre-release on Github" ],
|
||||
[ "npm publish --tag next", "Publish to npm as 'next'" ],
|
||||
[ "git checkout master", "Checkout the developmet branch" ],
|
||||
[ "git branch -D temp-release-branch", "Delete the temp release branch" ]
|
||||
]
|
||||
},
|
||||
|
||||
"run": {
|
||||
"steps": [
|
||||
{ "include": "branch check" },
|
||||
[ "git checkout stable", "Checkout the release branch" ],
|
||||
[ "git pull upstream stable", "Update the release branch" ],
|
||||
{ "include": "update local stable" },
|
||||
[ "npm install", "Ensure dependency updates have been installed" ],
|
||||
[ "grunt test", "Run tests" ],
|
||||
[ "grunt version:{{ release_type }}", "Bump package versions" ],
|
||||
[ "grunt version:{{release_type}}", "Bump package versions" ],
|
||||
[ "./build/bin/version", "Return the current VJS Version from the package.json file", "version" ],
|
||||
[ "grunt chg-release:{{ version }}", "Update the changelog with the new release" ],
|
||||
[ "grunt clean:dist", "Clean out the dist folder before the build" ],
|
||||
[ "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" ],
|
||||
[ "git commit -am 'Release v{{ version }}'", "Commit the unstaged changes (package.json, changelog, etc)" ],
|
||||
[ "git tag -a v{{version}} -m 'v{{version}}'", "Tag the current version" ],
|
||||
[ "git push upstream stable", "Push changes to the remote" ],
|
||||
[ "git push upstream --tags", "Push tags to the remote" ],
|
||||
[ "grunt chg-release:{{version}}", "Update the changelog with the new release" ],
|
||||
[ "git commit -am 'v{{version}}'", "Add and commit the package changes" ],
|
||||
[ "git push upstream stable", "Push the release branch changes to the repo" ],
|
||||
[ "git checkout -b temp-release-branch stable","Create a temporary branch for the dist" ],
|
||||
[ "grunt dist", "Build the dist" ],
|
||||
[ "git add dist --force", "Add the (otherwise ignored) release files" ],
|
||||
[ "git commit -m 'v{{version}} dist'", "Commit the dist changes" ],
|
||||
[ "git tag -a v{{version}} -m 'v{{version}}'", "Tag the release" ],
|
||||
[ "git push upstream --tags", "Push the new tag to the repo" ],
|
||||
[ "npm publish", "Publish to npm" ],
|
||||
[ "grunt github-release", "Create a new release on Github" ],
|
||||
[ "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 again 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" ]
|
||||
[ "grunt github-release:release", "Create a new release on Github" ],
|
||||
[ "git checkout stable", "Checkout the developmet branch" ],
|
||||
[ "git branch -D temp-release-branch", "Delete the temp release branch" ]
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -330,6 +403,7 @@
|
||||
[ "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" ],
|
||||
[ "npm install", "Install any new dependencies" ],
|
||||
[ "grunt test", "Build and run tests" ]
|
||||
]
|
||||
},
|
||||
@@ -348,20 +422,20 @@
|
||||
{ "prompt": "text", "id": "prNum", "desc": "What is the the pull request number?" },
|
||||
{ "get": "{{meta.urls.repo_api}}/pulls/{{prNum}}", "desc": "Get the PR information", "id": "pr" },
|
||||
{ "get": "{{meta.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 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": "text", "id": "line", "desc": "Describe this change in one line" },
|
||||
[ "grunt chg-add:'{{line}} ([view](https\\://github.com/videojs/video.js/pull/{{prNum}}))'", "Add a line to the changelog" ],
|
||||
[ "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" ],
|
||||
{ "prompt": "confirm", "desc": "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 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" ]
|
||||
[ "git branch -D {{pr.user.login}}/{{pr.head.ref}}", "Delete the local branch used for merging" ]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,660 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,659 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CaptionsButton
|
||||
|
||||
__DEFINED IN__: [src/js/tracks/text-track-controls.js#L401](https://github.com/videojs/video.js/blob/master/src/js/tracks/text-track-controls.js#L401)
|
||||
|
||||
The button component for toggling and selecting captions
|
||||
|
||||
---
|
||||
|
||||
@@ -1,793 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CaptionsTrack
|
||||
|
||||
__EXTENDS__: [vjs.TextTrack](vjs.TextTrack.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L676](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L676)
|
||||
|
||||
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`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L375](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L375)
|
||||
|
||||
---
|
||||
|
||||
### 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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1219](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1219)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1181](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1181)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L315](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### 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#L398](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L398)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### 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#L361](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L361)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1120)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### 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#L346](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L346)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1198](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1198)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1158](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1158)
|
||||
|
||||
---
|
||||
|
||||
### 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#L331](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L331)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersButton
|
||||
|
||||
__DEFINED IN__: [src/js/tracks/text-track-controls.js#L451](https://github.com/videojs/video.js/blob/master/src/js/tracks/text-track-controls.js#L451)
|
||||
|
||||
The button component for toggling and selecting chapters
|
||||
|
||||
---
|
||||
|
||||
@@ -1,793 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersTrack
|
||||
|
||||
__EXTENDS__: [vjs.TextTrack](vjs.TextTrack.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L694](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L694)
|
||||
|
||||
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`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L375](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L375)
|
||||
|
||||
---
|
||||
|
||||
### 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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1219](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1219)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1181](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1181)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L315](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### 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#L398](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L398)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### 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#L361](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L361)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1120)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### 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#L346](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L346)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1198](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1198)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1158](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1158)
|
||||
|
||||
---
|
||||
|
||||
### 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#L331](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L331)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersTrackMenuItem
|
||||
|
||||
__DEFINED IN__: [src/js/tracks/text-track-controls.js#L550](https://github.com/videojs/video.js/blob/master/src/js/tracks/text-track-controls.js#L550)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,679 +0,0 @@
|
||||
<!-- 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)
|
||||
- [clearInterval](#clearinterval-intervalid-)
|
||||
- [clearTimeout](#cleartimeout-timeoutid-)
|
||||
- [contentEl](#contentel)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [dimensions](#dimensions-width-height-)
|
||||
- [dispose](#dispose)
|
||||
- [el](#el)
|
||||
- [enableTouchActivity](#enabletouchactivity)
|
||||
- [getChild](#getchild-name-)
|
||||
- [getChildById](#getchildbyid-id-)
|
||||
- [hasClass](#hasclass-classtocheck-)
|
||||
- [height](#height-num-skiplisteners-)
|
||||
- [hide](#hide)
|
||||
- [id](#id)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [initChildren](#initchildren)
|
||||
- [name](#name)
|
||||
- [off](#off-first-second-third-)
|
||||
- [on](#on-first-second-third-)
|
||||
- [one](#one-first-second-third-)
|
||||
- [options](#options-obj-)
|
||||
- [player](#player)
|
||||
- [ready](#ready-fn-)
|
||||
- [removeChild](#removechild-component-)
|
||||
- [removeClass](#removeclass-classtoremove-)
|
||||
- [setInterval](#setinterval-fn-interval-)
|
||||
- [setTimeout](#settimeout-fn-timeout-)
|
||||
- [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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_defined in_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_defined in_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_defined in_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_defined in_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_defined in_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_defined in_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_defined in_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_defined in_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_defined in_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_defined in_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,659 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
<!-- 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 + constructors
|
||||
|
||||
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 instance 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)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
<!-- 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-)
|
||||
|
||||
- [UNDEFINED](#undefined)
|
||||
- [nativeSourceHandler](#nativesourcehandler-static)
|
||||
- [rtmpSourceHandler](#rtmpsourcehandler-static)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### 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)
|
||||
|
||||
---
|
||||
|
||||
## UNDEFINED
|
||||
|
||||
### nativeSourceHandler `STATIC`
|
||||
> The default native source handler.
|
||||
> This simply passes the source to the video element. Nothing fancy.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __source__ `Object` The source object
|
||||
* __tech__ `vjs.Flash` The instance of the Flash tech
|
||||
|
||||
_defined in_: [src/js/media/flash.js#L229](https://github.com/videojs/video.js/blob/master/src/js/media/flash.js#L229)
|
||||
|
||||
---
|
||||
|
||||
### rtmpSourceHandler `STATIC`
|
||||
> A source handler for RTMP urls
|
||||
|
||||
_defined in_: [src/js/media/flash.rtmp.js#L58](https://github.com/videojs/video.js/blob/master/src/js/media/flash.rtmp.js#L58)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
<!-- 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)
|
||||
- [canControlPlaybackRate](#cancontrolplaybackrate-static)
|
||||
- [canControlVolume](#cancontrolvolume-static)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [isSupported](#issupported-static)
|
||||
- [supportsNativeTextTracks](#supportsnativetexttracks-static)
|
||||
|
||||
- [UNDEFINED](#undefined)
|
||||
- [nativeSourceHandler](#nativesourcehandler-static)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### canControlPlaybackRate() `STATIC`
|
||||
> Check if playbackRate is supported in this browser/device.
|
||||
|
||||
##### RETURNS:
|
||||
* `[type]` [description]
|
||||
|
||||
_defined in_: [src/js/media/html5.js#L542](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L542)
|
||||
|
||||
---
|
||||
|
||||
### canControlVolume() `STATIC`
|
||||
> Check if the volume can be changed in this browser/device.
|
||||
> Volume cannot be changed in a lot of mobile devices.
|
||||
> Specifically, it can't be changed from 1 on iOS.
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_defined in_: [src/js/media/html5.js#L532](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L532)
|
||||
|
||||
---
|
||||
|
||||
### 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)
|
||||
|
||||
---
|
||||
|
||||
### isSupported() `STATIC`
|
||||
> Check if HTML5 video is supported by this browser/device
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_defined in_: [src/js/media/html5.js#L452](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L452)
|
||||
|
||||
---
|
||||
|
||||
### supportsNativeTextTracks() `STATIC`
|
||||
> Check to see if native text tracks are supported by this browser/device
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_defined in_: [src/js/media/html5.js#L552](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L552)
|
||||
|
||||
---
|
||||
|
||||
## UNDEFINED
|
||||
|
||||
### nativeSourceHandler `STATIC`
|
||||
> The default native source handler.
|
||||
> This simply passes the source to the video element. Nothing fancy.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __source__ `Object` The source object
|
||||
* __tech__ `vjs.Html5` The instance of the HTML5 tech
|
||||
|
||||
_defined in_: [src/js/media/html5.js#L472](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L472)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
<!-- 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)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.LoadProgressBar
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__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)
|
||||
|
||||
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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L121](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L121)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,659 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MediaTechController
|
||||
|
||||
__DEFINED IN__: [src/js/media/media.js#L14](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L14)
|
||||
|
||||
Base class for media (HTML5 Video, Flash) controllers
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [withSourceHandlers](#withsourcehandlers-tech--static)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### withSourceHandlers( Tech ) `STATIC`
|
||||
> A functional mixin for techs that want to use the Source Handler pattern.
|
||||
>
|
||||
> ##### EXAMPLE:
|
||||
>
|
||||
> videojs.MediaTechController.withSourceHandlers.call(MyTech);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __Tech__
|
||||
|
||||
_defined in_: [src/js/media/media.js#L428](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L428)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,668 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### 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#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,662 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_defined in_: [src/js/menu.js#L166](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L166)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_defined in_: [src/js/menu.js#L163](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L163)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,673 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### 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( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### 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)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.OffTextTrackMenuItem
|
||||
|
||||
__DEFINED IN__: [src/js/tracks/text-track-controls.js#L296](https://github.com/videojs/video.js/blob/master/src/js/tracks/text-track-controls.js#L296)
|
||||
|
||||
A special menu item for turning of a specific type of text track
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.PlayProgressBar
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__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)
|
||||
|
||||
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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L179](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
Diferenças do arquivo suprimidas por serem muito extensas
Carregar Diff
@@ -1,680 +0,0 @@
|
||||
<!-- 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)
|
||||
- [createEl](#createel)
|
||||
- [dispose](#dispose)
|
||||
- [init](#init-player-options-)
|
||||
- [onClick](#onclick)
|
||||
- [setSrc](#setsrc-url-)
|
||||
- [update](#update)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create the poster image element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/poster.js#L32](https://github.com/videojs/video.js/blob/master/src/js/poster.js#L32)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Clean up the poster image
|
||||
|
||||
_defined in_: [src/js/poster.js#L23](https://github.com/videojs/video.js/blob/master/src/js/poster.js#L23)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Event handler for clicks on the poster image
|
||||
|
||||
_defined in_: [src/js/poster.js#L92](https://github.com/videojs/video.js/blob/master/src/js/poster.js#L92)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setSrc( url )
|
||||
> Set the poster source depending on the display method
|
||||
|
||||
##### PARAMETERS:
|
||||
* __url__
|
||||
|
||||
_defined in_: [src/js/poster.js#L72](https://github.com/videojs/video.js/blob/master/src/js/poster.js#L72)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### update()
|
||||
> Event handler for updates to the player's poster source
|
||||
|
||||
_defined in_: [src/js/poster.js#L55](https://github.com/videojs/video.js/blob/master/src/js/poster.js#L55)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,658 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,669 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### 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#L202](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L202)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SeekHandle
|
||||
|
||||
__EXTENDS__: [vjs.SliderHandle](vjs.SliderHandle.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L199](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L199)
|
||||
|
||||
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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L215](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L215)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,669 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### 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#L202](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L202)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SliderHandle
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/slider.js#L214](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L214)
|
||||
|
||||
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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L225](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L225)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SubtitlesButton
|
||||
|
||||
__DEFINED IN__: [src/js/tracks/text-track-controls.js#L433](https://github.com/videojs/video.js/blob/master/src/js/tracks/text-track-controls.js#L433)
|
||||
|
||||
The button component for toggling and selecting subtitles
|
||||
|
||||
---
|
||||
|
||||
@@ -1,793 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SubtitlesTrack
|
||||
|
||||
__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 subtitles
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate) _`inherited`_
|
||||
- [activeCues](#activecues) _`inherited`_
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L375](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L375)
|
||||
|
||||
---
|
||||
|
||||
### 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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1219](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1219)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1181](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1181)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L315](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### 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#L398](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L398)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### 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#L361](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L361)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1120)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### 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#L346](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L346)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1198](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1198)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1158](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1158)
|
||||
|
||||
---
|
||||
|
||||
### 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#L331](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L331)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,795 +0,0 @@
|
||||
<!-- 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)
|
||||
- [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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L375](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L375)
|
||||
|
||||
---
|
||||
|
||||
### 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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1219](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1219)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1181](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1181)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L315](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### 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#L398](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L398)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### 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#L361](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L361)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1120)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### 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#L346](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L346)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1198](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1198)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1158](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1158)
|
||||
|
||||
---
|
||||
|
||||
### 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#L331](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L331)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackButton
|
||||
|
||||
__DEFINED IN__: [src/js/tracks/text-track-controls.js#L337](https://github.com/videojs/video.js/blob/master/src/js/tracks/text-track-controls.js#L337)
|
||||
|
||||
The base class for buttons that toggle specific text track types (e.g. subtitles)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackDisplay
|
||||
|
||||
__DEFINED IN__: [src/js/tracks/text-track-controls.js#L13](https://github.com/videojs/video.js/blob/master/src/js/tracks/text-track-controls.js#L13)
|
||||
|
||||
The component for displaying text track cues
|
||||
|
||||
---
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackMenuItem
|
||||
|
||||
__DEFINED IN__: [src/js/tracks/text-track-controls.js#L194](https://github.com/videojs/video.js/blob/master/src/js/tracks/text-track-controls.js#L194)
|
||||
|
||||
The specific menu item type for selecting a language within a text track kind
|
||||
|
||||
---
|
||||
|
||||
@@ -1,659 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,669 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### 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#L202](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L202)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,656 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`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-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,662 +0,0 @@
|
||||
<!-- 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`_
|
||||
- [clearInterval](#clearinterval-intervalid-) _`inherited`_
|
||||
- [clearTimeout](#cleartimeout-timeoutid-) _`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`_
|
||||
- [hasClass](#hasclass-classtocheck-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-first-second-third-) _`inherited`_
|
||||
- [on](#on-first-second-third-) _`inherited`_
|
||||
- [one](#one-first-second-third-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [setInterval](#setinterval-fn-interval-) _`inherited`_
|
||||
- [setTimeout](#settimeout-fn-timeout-) _`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#L362](https://github.com/videojs/video.js/blob/master/src/js/component.js#L362)
|
||||
|
||||
---
|
||||
|
||||
### 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#L826](https://github.com/videojs/video.js/blob/master/src/js/component.js#L826)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L166](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L166)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L296](https://github.com/videojs/video.js/blob/master/src/js/component.js#L296)
|
||||
|
||||
---
|
||||
|
||||
### clearInterval( intervalId )
|
||||
> Clears an interval and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __intervalId__ `Number` The id of the interval to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1223)
|
||||
|
||||
---
|
||||
|
||||
### clearTimeout( timeoutId )
|
||||
> Clears a timeout and removes the associated dispose listener
|
||||
|
||||
##### PARAMETERS:
|
||||
* __timeoutId__ `Number` The id of the timeout to clear
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1185](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1185)
|
||||
|
||||
---
|
||||
|
||||
### 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#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/component.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L163](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L163)
|
||||
|
||||
---
|
||||
|
||||
### 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#L938](https://github.com/videojs/video.js/blob/master/src/js/component.js#L938)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L84](https://github.com/videojs/video.js/blob/master/src/js/component.js#L84)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220)
|
||||
|
||||
---
|
||||
|
||||
### 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#L1124](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1124)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L330](https://github.com/videojs/video.js/blob/master/src/js/component.js#L330)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L313](https://github.com/videojs/video.js/blob/master/src/js/component.js#L313)
|
||||
|
||||
---
|
||||
|
||||
### hasClass( classToCheck )
|
||||
> Check if a component's element has a CSS class name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __classToCheck__ `String` Classname to check
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L816](https://github.com/videojs/video.js/blob/master/src/js/component.js#L816)
|
||||
|
||||
---
|
||||
|
||||
### 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#L927](https://github.com/videojs/video.js/blob/master/src/js/component.js#L927)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L857](https://github.com/videojs/video.js/blob/master/src/js/component.js#L857)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258)
|
||||
|
||||
---
|
||||
|
||||
### 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#L481](https://github.com/videojs/video.js/blob/master/src/js/component.js#L481)
|
||||
|
||||
---
|
||||
|
||||
### 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#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277)
|
||||
|
||||
---
|
||||
|
||||
### off( [first], [second], [third] )
|
||||
> Remove an event listener from this component's element
|
||||
>
|
||||
> myComponent.off('eventType', myFunc);
|
||||
>
|
||||
> If myFunc is excluded, ALL listeners for the event type will be removed.
|
||||
> If eventType is excluded, ALL listeners will be removed from the component.
|
||||
>
|
||||
> Alternatively you can use `off` to remove listeners that were added to other
|
||||
> elements or components using `myComponent.on(otherComponent...`.
|
||||
> In this case both the event type and listener function are REQUIRED.
|
||||
>
|
||||
> myComponent.off(otherElement, 'eventType', myFunc);
|
||||
> myComponent.off(otherComponent, 'eventType', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` _(OPTIONAL)_ The event type or other component
|
||||
* __second__ `Function|String` _(OPTIONAL)_ The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L646](https://github.com/videojs/video.js/blob/master/src/js/component.js#L646)
|
||||
|
||||
---
|
||||
|
||||
### on( first, second, third )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myComponent = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myComponent.on('eventType', myFunc);
|
||||
>
|
||||
> The context of myFunc will be myComponent unless previously bound.
|
||||
>
|
||||
> Alternatively, you can add a listener to another element or component.
|
||||
>
|
||||
> myComponent.on(otherElement, 'eventName', myFunc);
|
||||
> myComponent.on(otherComponent, 'eventName', myFunc);
|
||||
>
|
||||
> The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
|
||||
> and `otherComponent.on('eventName', myFunc)` is that this way the listeners
|
||||
> will be automatically cleaned up when either component is disposed.
|
||||
> It will also bind myComponent as the context of myFunc.
|
||||
>
|
||||
> **NOTE**: When using this on elements in the page other than window
|
||||
> and document (both permanent), if you remove the element from the DOM
|
||||
> you need to call `vjs.trigger(el, 'dispose')` on it to clean up
|
||||
> references to it and allow the browser to garbage collect it.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The event handler or event type
|
||||
* __third__ `Function` The event handler
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L577](https://github.com/videojs/video.js/blob/master/src/js/component.js#L577)
|
||||
|
||||
---
|
||||
|
||||
### one( first, second, [third] )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
>
|
||||
> myComponent.one('eventName', myFunc);
|
||||
>
|
||||
> Alternatively you can add a listener to another element or component
|
||||
> that will be triggered only once.
|
||||
>
|
||||
> myComponent.one(otherElement, 'eventName', myFunc);
|
||||
> myComponent.one(otherComponent, 'eventName', myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __first__ `String|vjs.Component` The event type or other component
|
||||
* __second__ `Function|String` The listener function or event type
|
||||
* __third__ `Function` _(OPTIONAL)_ The listener function for other component
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691)
|
||||
|
||||
---
|
||||
|
||||
### 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#L179](https://github.com/videojs/video.js/blob/master/src/js/component.js#L179)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L126](https://github.com/videojs/video.js/blob/master/src/js/component.js#L126)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happened
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L769](https://github.com/videojs/video.js/blob/master/src/js/component.js#L769)
|
||||
|
||||
---
|
||||
|
||||
### 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#L420](https://github.com/videojs/video.js/blob/master/src/js/component.js#L420)
|
||||
|
||||
---
|
||||
|
||||
### 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#L837](https://github.com/videojs/video.js/blob/master/src/js/component.js#L837)
|
||||
|
||||
---
|
||||
|
||||
### setInterval( fn, interval )
|
||||
> Creates an interval and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run every N seconds.
|
||||
* __interval__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the interval ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1202](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1202)
|
||||
|
||||
---
|
||||
|
||||
### setTimeout( fn, timeout )
|
||||
> Creates timeout and sets up disposal automatically.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` The function to run after the timeout.
|
||||
* __timeout__ `Number` Number of ms to delay before executing specified function.
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` Returns the timeout ID
|
||||
|
||||
_inherited from_: [src/js/component.js#L1162](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1162)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L847](https://github.com/videojs/video.js/blob/master/src/js/component.js#L847)
|
||||
|
||||
---
|
||||
|
||||
### 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#L724](https://github.com/videojs/video.js/blob/master/src/js/component.js#L724)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L788](https://github.com/videojs/video.js/blob/master/src/js/component.js#L788)
|
||||
|
||||
---
|
||||
|
||||
### 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#L910](https://github.com/videojs/video.js/blob/master/src/js/component.js#L910)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L1020](https://github.com/videojs/video.js/blob/master/src/js/component.js#L1020)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,183 +0,0 @@
|
||||
<!-- 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)
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addLanguage](#addlanguage-code-data-)
|
||||
- [parseUrl](#parseurl-url-)
|
||||
- [plugin](#plugin-name-init-)
|
||||
- [xhr](#xhr-options-callback-)
|
||||
|
||||
- CLASSES
|
||||
- [BigPlayButton](vjs.BigPlayButton.md)
|
||||
- [Button](vjs.Button.md)
|
||||
- [CaptionsButton](undefined.md)
|
||||
- [ChaptersButton](undefined.md)
|
||||
- [ChaptersTrackMenuItem](undefined.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](undefined.md)
|
||||
- [Menu](vjs.Menu.md)
|
||||
- [MenuButton](vjs.MenuButton.md)
|
||||
- [MenuItem](vjs.MenuItem.md)
|
||||
- [MuteToggle](vjs.MuteToggle.md)
|
||||
- [OffTextTrackMenuItem](undefined.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](undefined.md)
|
||||
- [TextTrackButton](undefined.md)
|
||||
- [TextTrackDisplay](undefined.md)
|
||||
- [TextTrackMenuItem](undefined.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)
|
||||
|
||||
- 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#L92](https://github.com/videojs/video.js/blob/master/src/js/core.js#L92)
|
||||
|
||||
---
|
||||
|
||||
### players
|
||||
> Global player list
|
||||
|
||||
_defined in_: [src/js/core.js#L164](https://github.com/videojs/video.js/blob/master/src/js/core.js#L164)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### addLanguage( code, data )
|
||||
> Utility function for adding languages to the default options. Useful for
|
||||
> amending multiple language support at runtime.
|
||||
>
|
||||
> Example: vjs.addLanguage('es', {'Hello':'Hola'});
|
||||
|
||||
##### PARAMETERS:
|
||||
* __code__ `String` The language code or dictionary property
|
||||
* __data__ `Object` The data values to be translated
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` The resulting global languages dictionary object
|
||||
|
||||
_defined in_: [src/js/core.js#L151](https://github.com/videojs/video.js/blob/master/src/js/core.js#L151)
|
||||
|
||||
---
|
||||
|
||||
### 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#L676](https://github.com/videojs/video.js/blob/master/src/js/lib.js#L676)
|
||||
|
||||
---
|
||||
|
||||
### 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)
|
||||
|
||||
---
|
||||
|
||||
### xhr( options, callback )
|
||||
> Simple http request for retrieving external files (e.g. text tracks)
|
||||
>
|
||||
> ##### Example
|
||||
>
|
||||
> // using url string
|
||||
> videojs.xhr('http://example.com/myfile.vtt', function(error, response, responseBody){});
|
||||
>
|
||||
> // or options block
|
||||
> videojs.xhr({
|
||||
> uri: 'http://example.com/myfile.vtt',
|
||||
> method: 'GET',
|
||||
> responseType: 'text'
|
||||
> }, function(error, response, responseBody){
|
||||
> if (error) {
|
||||
> // log the error
|
||||
> } else {
|
||||
> // successful, do something with the response
|
||||
> }
|
||||
> });
|
||||
>
|
||||
>
|
||||
> API is modeled after the Raynos/xhr, which we hope to use after
|
||||
> getting browserify implemented.
|
||||
> https://github.com/Raynos/xhr/blob/master/index.js
|
||||
|
||||
##### PARAMETERS:
|
||||
* __options__ `Object|String` Options block or URL string
|
||||
* __callback__ `Function` The callback function
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` The request
|
||||
|
||||
_defined in_: [src/js/xhr.js#L31](https://github.com/videojs/video.js/blob/master/src/js/xhr.js#L31)
|
||||
|
||||
---
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
<!-- 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,330 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:15.042 --> 00:00:18.625
|
||||
...إلى... إلى الشمال يمكن أن نرى
|
||||
...يمكن أن نرى الـ
|
||||
|
||||
2
|
||||
00:00:18.750 --> 00:00:20.958
|
||||
...إلى اليمين يمكن أن نرى الـ
|
||||
|
||||
3
|
||||
00:00:21.000 --> 00:00:23.125
|
||||
طاحنات الرؤوس...
|
||||
|
||||
4
|
||||
00:00:23.208 --> 00:00:25.208
|
||||
كل شيئ آمن
|
||||
آمن كلية
|
||||
|
||||
5
|
||||
00:00:26.333 --> 00:00:28.333
|
||||
إيمو ؟
|
||||
|
||||
6
|
||||
00:00:28.875 --> 00:00:30.958
|
||||
! حذاري
|
||||
|
||||
7
|
||||
00:00:47.125 --> 00:00:49.167
|
||||
هل أصبت ؟
|
||||
|
||||
8
|
||||
00:00:52.125 --> 00:00:54.833
|
||||
...لا أظن ذلك
|
||||
وأنت ؟
|
||||
|
||||
9
|
||||
00:00:55.625 --> 00:00:57.625
|
||||
أنا بخير
|
||||
|
||||
10
|
||||
00:00:57.667 --> 00:01:01.667
|
||||
،قم يا إيمو
|
||||
المكان هنا غير آمن
|
||||
|
||||
11
|
||||
00:01:02.208 --> 00:01:04.083
|
||||
لنذهب
|
||||
|
||||
12
|
||||
00:01:04.167 --> 00:01:06.167
|
||||
وماذا بعد ؟
|
||||
|
||||
13
|
||||
00:01:06.167 --> 00:01:08.583
|
||||
...سترى... سترى
|
||||
|
||||
14
|
||||
00:01:16.167 --> 00:01:18.375
|
||||
إيمو، من هنا
|
||||
|
||||
15
|
||||
00:01:34.958 --> 00:01:37.000
|
||||
! إتبعني
|
||||
|
||||
16
|
||||
00:02:11.125 --> 00:02:13.625
|
||||
! أسرع يا إيمو
|
||||
|
||||
17
|
||||
00:02:48.375 --> 00:02:50.375
|
||||
! لست منتبها
|
||||
|
||||
18
|
||||
00:02:50.750 --> 00:02:54.500
|
||||
...أريد فقط أن أجيب الـ
|
||||
الهاتف...
|
||||
|
||||
19
|
||||
00:02:55.000 --> 00:02:58.500
|
||||
،إيمو، أنظر
|
||||
أقصد أنصت
|
||||
|
||||
20
|
||||
00:02:59.750 --> 00:03:03.292
|
||||
عليك أن تتعلم الإصغاء
|
||||
|
||||
21
|
||||
00:03:03.625 --> 00:03:05.917
|
||||
هذا ليس ضربا من اللهو
|
||||
|
||||
22
|
||||
00:03:06.083 --> 00:03:09.958
|
||||
...إنك
|
||||
أقصد إننا قد نموت بسهولة في هذا المكان
|
||||
|
||||
23
|
||||
00:03:10.208 --> 00:03:14.125
|
||||
...أنصت
|
||||
أنصت إلى أصوات الآلة
|
||||
|
||||
24
|
||||
00:03:18.333 --> 00:03:20.417
|
||||
أنصت إلى نَفَسِك
|
||||
|
||||
25
|
||||
00:04:27.208 --> 00:04:29.250
|
||||
ألا تمل أبدا من هذا ؟
|
||||
|
||||
26
|
||||
00:04:29.583 --> 00:04:31.583
|
||||
أمل ؟!؟
|
||||
نعم -
|
||||
|
||||
27
|
||||
00:04:31.750 --> 00:04:34.667
|
||||
إيمو؛ الآلة في دقتها... مثل الساعة
|
||||
|
||||
28
|
||||
00:04:35.500 --> 00:04:37.708
|
||||
...حركة ناشزة واحدة قد
|
||||
|
||||
29
|
||||
00:04:37.833 --> 00:04:39.875
|
||||
تطرحك معجونا
|
||||
|
||||
30
|
||||
00:04:41.042 --> 00:04:43.083
|
||||
...أو ليست
|
||||
|
||||
31
|
||||
00:04:43.125 --> 00:04:46.542
|
||||
! عجينة يا إيمو
|
||||
أ هذا ما تريد ؟ أن تصبح عجينة ؟
|
||||
|
||||
32
|
||||
00:04:48.083 --> 00:04:50.083
|
||||
أيمو، أ هذا هدفك في الحياة ؟
|
||||
|
||||
33
|
||||
00:04:50.583 --> 00:04:52.667
|
||||
أن تصير عجينة ؟
|
||||
|
||||
34
|
||||
00:05:41.833 --> 00:05:43.875
|
||||
إيمو، أغمض عينيك
|
||||
|
||||
35
|
||||
00:05:44.917 --> 00:05:47.000
|
||||
لماذا ؟
|
||||
! الآن -
|
||||
|
||||
36
|
||||
00:05:53.750 --> 00:05:56.042
|
||||
حسن
|
||||
|
||||
37
|
||||
00:05:59.542 --> 00:06:02.792
|
||||
ماذا ترى إلى شمالك يا إيمو ؟
|
||||
|
||||
38
|
||||
00:06:04.417 --> 00:06:06.500
|
||||
لا شيئ
|
||||
حقا ؟ -
|
||||
|
||||
39
|
||||
00:06:06.542 --> 00:06:08.625
|
||||
لا، لا شيئ البتة
|
||||
|
||||
40
|
||||
00:06:08.625 --> 00:06:12.417
|
||||
وماذا ترى إلى جهتك اليمنى يا إيمو ؟
|
||||
|
||||
41
|
||||
00:06:13.667 --> 00:06:17.833
|
||||
،نفس الشيئ يا بروغ
|
||||
! نفس الشيئ بالضبط؛ لا شيئ
|
||||
|
||||
42
|
||||
00:06:17.875 --> 00:06:19.917
|
||||
عظيم
|
||||
|
||||
43
|
||||
00:06:40.625 --> 00:06:42.958
|
||||
أنصت يا بروغ ! هل تسمع ذلك ؟
|
||||
|
||||
44
|
||||
00:06:43.625 --> 00:06:45.625
|
||||
هل نستطيع الذهاب إلى هناك ؟
|
||||
|
||||
45
|
||||
00:06:45.708 --> 00:06:47.792
|
||||
هناك ؟
|
||||
نعم -
|
||||
|
||||
46
|
||||
00:06:47.833 --> 00:06:49.833
|
||||
إنه غير آمن يا إيمو
|
||||
|
||||
47
|
||||
00:06:49.917 --> 00:06:52.500
|
||||
صدقني، إنه غير آمن
|
||||
|
||||
48
|
||||
00:06:53.292 --> 00:06:55.375
|
||||
...لكن لعلي أستطيع
|
||||
|
||||
49
|
||||
00:06:55.417 --> 00:06:57.417
|
||||
...لكن
|
||||
! لا -
|
||||
|
||||
50
|
||||
00:06:57.667 --> 00:06:59.667
|
||||
! لا
|
||||
|
||||
51
|
||||
00:07:00.875 --> 00:07:03.750
|
||||
هل من أسئلة أخرى يا إيمو ؟
|
||||
|
||||
52
|
||||
00:07:04.250 --> 00:07:06.333
|
||||
لا
|
||||
|
||||
53
|
||||
00:07:09.458 --> 00:07:11.542
|
||||
...إيمو
|
||||
نعم -
|
||||
|
||||
54
|
||||
00:07:11.875 --> 00:07:13.958
|
||||
...لماذا يا إيمو... لماذا
|
||||
|
||||
55
|
||||
00:07:15.292 --> 00:07:18.792
|
||||
لماذا لا تستطيع أن ترى حُسْن هذا المكان
|
||||
|
||||
56
|
||||
00:07:18.833 --> 00:07:20.833
|
||||
...والطريقة التي يعمل بها
|
||||
|
||||
57
|
||||
00:07:20.875 --> 00:07:24.000
|
||||
وكيف... وكيف أنه غاية في الكمال
|
||||
|
||||
58
|
||||
00:07:24.083 --> 00:07:27.417
|
||||
! لا يا بروغ، لا أرى ذلك
|
||||
|
||||
59
|
||||
00:07:27.542 --> 00:07:30.333
|
||||
لا أرى ذلك لأنه لا يوجد شيئ هناك
|
||||
|
||||
60
|
||||
00:07:31.500 --> 00:07:35.333
|
||||
ثم لماذا يجب علي أن أسلم حياتي
|
||||
لشيئ لا وجود له ؟
|
||||
|
||||
61
|
||||
00:07:35.583 --> 00:07:37.625
|
||||
هل يمكنك أن تخبرني ؟
|
||||
|
||||
62
|
||||
00:07:37.708 --> 00:07:39.750
|
||||
! أجبني
|
||||
|
||||
63
|
||||
00:07:43.208 --> 00:07:47.333
|
||||
...بروغ
|
||||
! أنت معتوه يا هذا
|
||||
|
||||
64
|
||||
00:07:47.375 --> 00:07:49.417
|
||||
! إبعد عني
|
||||
|
||||
65
|
||||
00:07:52.583 --> 00:07:55.083
|
||||
! لا يا إيمو ! إنه فخ
|
||||
|
||||
66
|
||||
00:07:55.833 --> 00:07:57.875
|
||||
...إنه فخ
|
||||
|
||||
67
|
||||
00:07:57.917 --> 00:08:01.750
|
||||
إلى جنبك الأيسر يمكنك أن ترى
|
||||
حدائق بابل المعلقة
|
||||
|
||||
68
|
||||
00:08:02.250 --> 00:08:04.292
|
||||
هل تعجبك كفخ ؟
|
||||
|
||||
69
|
||||
00:08:05.458 --> 00:08:07.542
|
||||
لا يا أيمو
|
||||
|
||||
70
|
||||
00:08:09.417 --> 00:08:12.792
|
||||
...إلى جنبك الأيمن يمكنك رؤية
|
||||
حزر ماذا ؟
|
||||
|
||||
71
|
||||
00:08:13.000 --> 00:08:15.042
|
||||
! عملاق رودس
|
||||
|
||||
72
|
||||
00:08:15.125 --> 00:08:16.417
|
||||
! لا
|
||||
|
||||
73
|
||||
00:08:16.458 --> 00:08:20.500
|
||||
،عملاق رودس
|
||||
وهو هنا خصيصا من أجلك يا بروغ
|
||||
|
||||
74
|
||||
00:08:20.583 --> 00:08:22.583
|
||||
فقط من أجلك
|
||||
|
||||
75
|
||||
00:08:51.333 --> 00:08:53.375
|
||||
إنه هناك
|
||||
|
||||
76
|
||||
00:08:53.417 --> 00:08:55.500
|
||||
أنا أؤكد لك... إيمو
|
||||
|
||||
77
|
||||
00:08:57.333 --> 00:09:00.000
|
||||
...إنه
|
||||
@@ -0,0 +1,334 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:15.000 --> 00:00:17.951
|
||||
At the left we can see...
|
||||
|
||||
2
|
||||
00:00:18.166 --> 00:00:20.083
|
||||
At the right we can see the...
|
||||
|
||||
3
|
||||
00:00:20.119 --> 00:00:21.962
|
||||
...the head-snarlers
|
||||
|
||||
4
|
||||
00:00:21.999 --> 00:00:24.368
|
||||
Everything is safe.
|
||||
Perfectly safe.
|
||||
|
||||
5
|
||||
00:00:24.582 --> 00:00:27.035
|
||||
Emo?
|
||||
|
||||
6
|
||||
00:00:28.206 --> 00:00:29.996
|
||||
Watch out!
|
||||
|
||||
7
|
||||
00:00:47.037 --> 00:00:48.494
|
||||
Are you hurt?
|
||||
|
||||
8
|
||||
00:00:51.994 --> 00:00:53.949
|
||||
I don't think so.
|
||||
You?
|
||||
|
||||
9
|
||||
00:00:55.160 --> 00:00:56.985
|
||||
I'm Ok.
|
||||
|
||||
10
|
||||
00:00:57.118 --> 00:01:01.111
|
||||
Get up.
|
||||
Emo. it's not safe here.
|
||||
|
||||
11
|
||||
00:01:02.034 --> 00:01:03.573
|
||||
Let's go.
|
||||
|
||||
12
|
||||
00:01:03.610 --> 00:01:05.114
|
||||
What's next?
|
||||
|
||||
13
|
||||
00:01:05.200 --> 00:01:09.146
|
||||
You'll see!
|
||||
|
||||
14
|
||||
00:01:16.032 --> 00:01:18.022
|
||||
Emo.
|
||||
This way.
|
||||
|
||||
15
|
||||
00:01:34.237 --> 00:01:35.481
|
||||
Follow me!
|
||||
|
||||
16
|
||||
00:02:11.106 --> 00:02:12.480
|
||||
Hurry Emo!
|
||||
|
||||
17
|
||||
00:02:48.059 --> 00:02:49.930
|
||||
You're not paying attention!
|
||||
|
||||
18
|
||||
00:02:50.142 --> 00:02:54.052
|
||||
I just want to answer the...
|
||||
...phone.
|
||||
|
||||
19
|
||||
00:02:54.974 --> 00:02:57.972
|
||||
Emo. look.
|
||||
I mean listen.
|
||||
|
||||
20
|
||||
00:02:59.140 --> 00:03:02.008
|
||||
You have to learn to listen.
|
||||
|
||||
21
|
||||
00:03:03.140 --> 00:03:04.965
|
||||
This is not some game.
|
||||
|
||||
22
|
||||
00:03:05.056 --> 00:03:09.345
|
||||
You. I mean we.
|
||||
we could easily die out here.
|
||||
|
||||
23
|
||||
00:03:10.014 --> 00:03:13.959
|
||||
Listen.
|
||||
listen to the sounds of the machine.
|
||||
|
||||
24
|
||||
00:03:18.054 --> 00:03:20.009
|
||||
Listen to your breathing.
|
||||
|
||||
25
|
||||
00:04:27.001 --> 00:04:28.956
|
||||
Well. don't you ever get tired of this?
|
||||
|
||||
26
|
||||
00:04:29.084 --> 00:04:30.909
|
||||
Tired?!?
|
||||
|
||||
27
|
||||
00:04:31.126 --> 00:04:34.491
|
||||
Emo. the machine is like clockwork.
|
||||
|
||||
28
|
||||
00:04:35.083 --> 00:04:37.074
|
||||
One move out of place...
|
||||
|
||||
29
|
||||
00:04:37.166 --> 00:04:39.121
|
||||
...and you're ground to a pulp.
|
||||
|
||||
30
|
||||
00:04:40.958 --> 00:04:42.004
|
||||
But isn't it -
|
||||
|
||||
31
|
||||
00:04:42.041 --> 00:04:46.034
|
||||
Pulp. Emo!
|
||||
Is that what you want. pulp?
|
||||
|
||||
32
|
||||
00:04:47.040 --> 00:04:48.995
|
||||
Emo. your goal in life...
|
||||
|
||||
33
|
||||
00:04:50.081 --> 00:04:51.953
|
||||
...pulp?
|
||||
|
||||
34
|
||||
00:05:41.156 --> 00:05:43.028
|
||||
Emo. close your eyes.
|
||||
|
||||
35
|
||||
00:05:44.156 --> 00:05:46.027
|
||||
Why?
|
||||
- Now!
|
||||
|
||||
36
|
||||
00:05:51.155 --> 00:05:52.102
|
||||
Ok.
|
||||
|
||||
37
|
||||
00:05:53.113 --> 00:05:54.688
|
||||
Good.
|
||||
|
||||
38
|
||||
00:05:59.070 --> 00:06:02.103
|
||||
What do you see at your left side. Emo?
|
||||
|
||||
39
|
||||
00:06:04.028 --> 00:06:05.899
|
||||
Nothing.
|
||||
- Really?
|
||||
|
||||
40
|
||||
00:06:06.027 --> 00:06:07.105
|
||||
No. nothing at all.
|
||||
|
||||
41
|
||||
00:06:07.944 --> 00:06:11.984
|
||||
And at your right.
|
||||
what do you see at your right side. Emo?
|
||||
|
||||
42
|
||||
00:06:13.151 --> 00:06:16.102
|
||||
The same Proog. exactly the same...
|
||||
|
||||
43
|
||||
00:06:16.942 --> 00:06:19.098
|
||||
...nothing!
|
||||
- Great.
|
||||
|
||||
44
|
||||
00:06:40.105 --> 00:06:42.724
|
||||
Listen Proog! Do you hear that!
|
||||
|
||||
45
|
||||
00:06:43.105 --> 00:06:44.894
|
||||
Can we go here?
|
||||
|
||||
46
|
||||
00:06:44.979 --> 00:06:47.894
|
||||
There?
|
||||
It isn't safe. Emo.
|
||||
|
||||
47
|
||||
00:06:49.145 --> 00:06:52.013
|
||||
But...
|
||||
- Trust me. it's not.
|
||||
|
||||
48
|
||||
00:06:53.020 --> 00:06:54.145
|
||||
Maybe I could...
|
||||
|
||||
49
|
||||
00:06:54.181 --> 00:06:55.969
|
||||
No.
|
||||
|
||||
50
|
||||
00:06:57.102 --> 00:06:59.934
|
||||
NO!
|
||||
|
||||
51
|
||||
00:07:00.144 --> 00:07:03.058
|
||||
Any further questions. Emo?
|
||||
|
||||
52
|
||||
00:07:03.976 --> 00:07:05.090
|
||||
No.
|
||||
|
||||
53
|
||||
00:07:09.059 --> 00:07:10.089
|
||||
Emo?
|
||||
|
||||
54
|
||||
00:07:11.142 --> 00:07:13.058
|
||||
Emo. why...
|
||||
|
||||
55
|
||||
00:07:13.095 --> 00:07:14.022
|
||||
Emo...
|
||||
|
||||
56
|
||||
00:07:14.058 --> 00:07:18.003
|
||||
...why can't you see
|
||||
the beauty of this place?
|
||||
|
||||
57
|
||||
00:07:18.141 --> 00:07:20.048
|
||||
The way it works.
|
||||
|
||||
58
|
||||
00:07:20.140 --> 00:07:23.895
|
||||
How perfect it is.
|
||||
|
||||
59
|
||||
00:07:23.932 --> 00:07:26.964
|
||||
No. Proog. I don't see.
|
||||
|
||||
60
|
||||
00:07:27.056 --> 00:07:29.970
|
||||
I don't see because there's nothing there.
|
||||
|
||||
61
|
||||
00:07:31.055 --> 00:07:34.965
|
||||
And why should I trust my
|
||||
life to something that isn't there?
|
||||
|
||||
62
|
||||
00:07:35.055 --> 00:07:36.926
|
||||
Well can you tell me that?
|
||||
|
||||
63
|
||||
00:07:37.054 --> 00:07:38.926
|
||||
Answer me!
|
||||
|
||||
64
|
||||
00:07:42.970 --> 00:07:44.000
|
||||
Proog...
|
||||
|
||||
65
|
||||
00:07:45.053 --> 00:07:46.985
|
||||
...you're a sick man!
|
||||
|
||||
66
|
||||
00:07:47.022 --> 00:07:48.918
|
||||
Stay away from me!
|
||||
|
||||
67
|
||||
00:07:52.052 --> 00:07:54.884
|
||||
No! Emo! It's a trap!
|
||||
|
||||
68
|
||||
00:07:55.135 --> 00:07:56.931
|
||||
Hah. it's a trap.
|
||||
|
||||
69
|
||||
00:07:56.968 --> 00:08:01.043
|
||||
At the left side you can see
|
||||
the hanging gardens of Babylon!
|
||||
|
||||
70
|
||||
00:08:01.967 --> 00:08:03.957
|
||||
How's that for a trap?
|
||||
|
||||
71
|
||||
00:08:05.050 --> 00:08:06.922
|
||||
No. Emo.
|
||||
|
||||
72
|
||||
00:08:09.008 --> 00:08:12.088
|
||||
At the right side you can see...
|
||||
...well guess what...
|
||||
|
||||
73
|
||||
00:08:12.924 --> 00:08:14.665
|
||||
...the colossus of Rhodes!
|
||||
|
||||
74
|
||||
00:08:15.132 --> 00:08:16.053
|
||||
No!
|
||||
|
||||
75
|
||||
00:08:16.090 --> 00:08:21.919
|
||||
The colossus of Rhodes
|
||||
and it is here just for you Proog.
|
||||
|
||||
76
|
||||
00:08:51.001 --> 00:08:52.923
|
||||
It is there...
|
||||
|
||||
77
|
||||
00:08:52.959 --> 00:08:56.040
|
||||
I'm telling you.
|
||||
Emo...
|
||||
|
||||
78
|
||||
00:08:57.000 --> 00:08:59.867
|
||||
...it is.
|
||||
@@ -0,0 +1,326 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:15.042 --> 00:00:18.042
|
||||
左に見えるのは…
|
||||
|
||||
2
|
||||
00:00:18.750 --> 00:00:20.333
|
||||
右に見えるのは…
|
||||
|
||||
3
|
||||
00:00:20.417 --> 00:00:21.917
|
||||
…首刈り機
|
||||
|
||||
4
|
||||
00:00:22.000 --> 00:00:24.625
|
||||
すべて安全
|
||||
完璧に安全だ
|
||||
|
||||
5
|
||||
00:00:26.333 --> 00:00:27.333
|
||||
イーモ?
|
||||
|
||||
6
|
||||
00:00:28.875 --> 00:00:30.250
|
||||
危ない!
|
||||
|
||||
7
|
||||
00:00:47.125 --> 00:00:48.250
|
||||
ケガはないか?
|
||||
|
||||
8
|
||||
00:00:51.917 --> 00:00:53.917
|
||||
ええ、多分…
|
||||
あなたは?
|
||||
|
||||
9
|
||||
00:00:55.625 --> 00:00:57.125
|
||||
わしは平気だ
|
||||
|
||||
10
|
||||
00:00:57.583 --> 00:01:01.667
|
||||
起きてくれイーモ
|
||||
ここは危ない
|
||||
|
||||
11
|
||||
00:01:02.208 --> 00:01:03.667
|
||||
行こう
|
||||
|
||||
12
|
||||
00:01:03.750 --> 00:01:04.917
|
||||
どこに?
|
||||
|
||||
13
|
||||
00:01:05.875 --> 00:01:07.875
|
||||
すぐにわかるさ!
|
||||
|
||||
14
|
||||
00:01:16.167 --> 00:01:18.375
|
||||
イーモ、こっちだ
|
||||
|
||||
15
|
||||
00:01:34.958 --> 00:01:36.958
|
||||
ついて来るんだ!
|
||||
|
||||
16
|
||||
00:02:11.583 --> 00:02:12.792
|
||||
イーモ、早く!
|
||||
|
||||
17
|
||||
00:02:48.375 --> 00:02:50.083
|
||||
むやみにさわるな!
|
||||
|
||||
18
|
||||
00:02:50.750 --> 00:02:54.500
|
||||
僕はただ、電話に
|
||||
…出ようと
|
||||
|
||||
19
|
||||
00:02:55.000 --> 00:02:58.208
|
||||
イーモ、見るんだ…
|
||||
いや、聞いてくれ
|
||||
|
||||
20
|
||||
00:02:59.750 --> 00:03:02.292
|
||||
君は「聞き方」を知る必要がある
|
||||
|
||||
21
|
||||
00:03:03.625 --> 00:03:05.125
|
||||
これは遊びじゃない
|
||||
|
||||
22
|
||||
00:03:06.167 --> 00:03:10.417
|
||||
我々はここでは
|
||||
たやすく死ぬ
|
||||
|
||||
23
|
||||
00:03:11.208 --> 00:03:14.125
|
||||
機械の声を聞くんだ
|
||||
|
||||
24
|
||||
00:03:18.333 --> 00:03:22.417
|
||||
君の息づかいを聞くんだ
|
||||
|
||||
25
|
||||
00:04:27.208 --> 00:04:29.250
|
||||
そんなことして疲れない?
|
||||
|
||||
26
|
||||
00:04:29.583 --> 00:04:31.083
|
||||
疲れる?!
|
||||
|
||||
27
|
||||
00:04:31.750 --> 00:04:34.667
|
||||
この機械は非常に正確で
|
||||
|
||||
28
|
||||
00:04:35.500 --> 00:04:37.708
|
||||
一つ間違えば…
|
||||
|
||||
29
|
||||
00:04:37.833 --> 00:04:40.792
|
||||
…地面に落ちてバラバラだ
|
||||
|
||||
30
|
||||
00:04:41.042 --> 00:04:42.375
|
||||
え、でも―
|
||||
|
||||
31
|
||||
00:04:42.417 --> 00:04:46.542
|
||||
バラバラだぞ、イーモ!
|
||||
それでいいのか?
|
||||
|
||||
32
|
||||
00:04:48.083 --> 00:04:50.000
|
||||
バラバラで死ぬんだぞ?
|
||||
|
||||
33
|
||||
00:04:50.583 --> 00:04:52.250
|
||||
バラバラだ!
|
||||
|
||||
34
|
||||
00:05:41.833 --> 00:05:43.458
|
||||
イーモ、目を閉じるんだ
|
||||
|
||||
35
|
||||
00:05:44.917 --> 00:05:46.583
|
||||
なぜ?
|
||||
―早く!
|
||||
|
||||
36
|
||||
00:05:53.750 --> 00:05:56.042
|
||||
それでいい
|
||||
|
||||
37
|
||||
00:05:59.542 --> 00:06:03.792
|
||||
左に見えるものは何だ、イーモ?
|
||||
|
||||
38
|
||||
00:06:04.417 --> 00:06:06.000
|
||||
え…何も
|
||||
―本当か?
|
||||
|
||||
39
|
||||
00:06:06.333 --> 00:06:07.917
|
||||
全く何も
|
||||
|
||||
40
|
||||
00:06:08.042 --> 00:06:12.833
|
||||
では右は
|
||||
何か見えるか、イーモ?
|
||||
|
||||
41
|
||||
00:06:13.875 --> 00:06:16.917
|
||||
同じだよプルーグ、全く同じ…
|
||||
|
||||
42
|
||||
00:06:17.083 --> 00:06:18.583
|
||||
何もない!
|
||||
|
||||
43
|
||||
00:06:40.625 --> 00:06:43.208
|
||||
プルーグ!何か聞こえない?
|
||||
|
||||
44
|
||||
00:06:43.625 --> 00:06:45.042
|
||||
あそこに行かないか?
|
||||
|
||||
45
|
||||
00:06:45.208 --> 00:06:48.042
|
||||
あそこ?
|
||||
…安全じゃない
|
||||
|
||||
46
|
||||
00:06:49.917 --> 00:06:52.500
|
||||
でも…
|
||||
―本当に危ないぞ
|
||||
|
||||
47
|
||||
00:06:53.292 --> 00:06:54.792
|
||||
大丈夫だよ…
|
||||
|
||||
48
|
||||
00:06:54.833 --> 00:06:56.333
|
||||
だめだ
|
||||
|
||||
49
|
||||
00:06:57.667 --> 00:07:00.167
|
||||
だめだ!
|
||||
|
||||
50
|
||||
00:07:00.875 --> 00:07:03.750
|
||||
まだ続ける気か、イーモ?
|
||||
|
||||
51
|
||||
00:07:04.250 --> 00:07:05.917
|
||||
いいえ…
|
||||
|
||||
52
|
||||
00:07:09.458 --> 00:07:10.833
|
||||
イーモ?
|
||||
|
||||
53
|
||||
00:07:11.875 --> 00:07:13.542
|
||||
イーモ、なぜ…
|
||||
|
||||
54
|
||||
00:07:13.583 --> 00:07:14.458
|
||||
イーモ…
|
||||
|
||||
55
|
||||
00:07:14.500 --> 00:07:18.500
|
||||
…なぜここの美しさが
|
||||
見えない?
|
||||
|
||||
56
|
||||
00:07:18.833 --> 00:07:20.750
|
||||
仕組みがこんなに…
|
||||
|
||||
57
|
||||
00:07:20.875 --> 00:07:24.000
|
||||
こんなに完全なのに
|
||||
|
||||
58
|
||||
00:07:24.083 --> 00:07:27.417
|
||||
もういいよ!プルーグ!
|
||||
|
||||
59
|
||||
00:07:27.542 --> 00:07:30.333
|
||||
そこには何もないんだから
|
||||
|
||||
60
|
||||
00:07:31.500 --> 00:07:35.333
|
||||
なぜ命を「ない」物に
|
||||
ゆだねなきゃ?
|
||||
|
||||
61
|
||||
00:07:35.583 --> 00:07:37.125
|
||||
教えてくれないか?
|
||||
|
||||
62
|
||||
00:07:37.500 --> 00:07:39.167
|
||||
さあ!
|
||||
|
||||
63
|
||||
00:07:43.208 --> 00:07:44.583
|
||||
プルーグ…
|
||||
|
||||
64
|
||||
00:07:45.500 --> 00:07:47.333
|
||||
あなたは病気なんだ
|
||||
|
||||
65
|
||||
00:07:47.375 --> 00:07:49.208
|
||||
僕から離れてくれ
|
||||
|
||||
66
|
||||
00:07:52.583 --> 00:07:55.083
|
||||
いかん!イーモ!ワナだ!
|
||||
|
||||
67
|
||||
00:07:55.833 --> 00:07:57.167
|
||||
ワナだ? ふーん
|
||||
|
||||
68
|
||||
00:07:57.208 --> 00:08:01.750
|
||||
左に何が見える?
|
||||
バビロンの空中庭園!
|
||||
|
||||
69
|
||||
00:08:02.250 --> 00:08:04.292
|
||||
これがワナとでも?
|
||||
|
||||
70
|
||||
00:08:05.458 --> 00:08:07.125
|
||||
だめだ、イーモ
|
||||
|
||||
71
|
||||
00:08:09.417 --> 00:08:12.792
|
||||
右にあるのは…
|
||||
…すごい!…
|
||||
|
||||
72
|
||||
00:08:13.000 --> 00:08:14.750
|
||||
…ロードス島の巨像だ!
|
||||
|
||||
73
|
||||
00:08:15.833 --> 00:08:16.708
|
||||
やめろ!
|
||||
|
||||
74
|
||||
00:08:16.750 --> 00:08:22.167
|
||||
この巨像はあなたの物
|
||||
プルーグ、あなたのだよ
|
||||
|
||||
75
|
||||
00:08:51.333 --> 00:08:53.167
|
||||
いってるじゃないか…
|
||||
|
||||
76
|
||||
00:08:53.208 --> 00:08:55.500
|
||||
そこにあるって、イーモ…
|
||||
|
||||
77
|
||||
00:08:57.333 --> 00:09:00.000
|
||||
…あるって
|
||||
@@ -0,0 +1,356 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:14.958 --> 00:00:17.833
|
||||
Слева мы видим...
|
||||
|
||||
2
|
||||
00:00:18.458 --> 00:00:20.208
|
||||
справа мы видим...
|
||||
|
||||
3
|
||||
00:00:20.333 --> 00:00:21.875
|
||||
...голово-клацов.
|
||||
|
||||
4
|
||||
00:00:22.000 --> 00:00:24.583
|
||||
всё в порядке.
|
||||
в полном порядке.
|
||||
|
||||
5
|
||||
00:00:26.333 --> 00:00:27.333
|
||||
Имо?
|
||||
|
||||
6
|
||||
00:00:28.833 --> 00:00:30.250
|
||||
Осторожно!
|
||||
|
||||
7
|
||||
00:00:47.125 --> 00:00:48.250
|
||||
Ты не ранен?
|
||||
|
||||
8
|
||||
00:00:51.875 --> 00:00:53.875
|
||||
Вроде нет...
|
||||
а ты?
|
||||
|
||||
9
|
||||
00:00:55.583 --> 00:00:57.125
|
||||
Я в порядке.
|
||||
|
||||
10
|
||||
00:00:57.542 --> 00:01:01.625
|
||||
Вставай.
|
||||
Имо. здесь не безопасно.
|
||||
|
||||
11
|
||||
00:01:02.208 --> 00:01:03.625
|
||||
Пойдём.
|
||||
|
||||
12
|
||||
00:01:03.708 --> 00:01:05.708
|
||||
Что дальше?
|
||||
|
||||
13
|
||||
00:01:05.833 --> 00:01:07.833
|
||||
Ты увидишь!
|
||||
|
||||
14
|
||||
00:01:08.000 --> 00:01:08.833
|
||||
Ты увидишь...
|
||||
|
||||
15
|
||||
00:01:16.167 --> 00:01:18.375
|
||||
Имо. сюда.
|
||||
|
||||
16
|
||||
00:01:34.917 --> 00:01:35.750
|
||||
За мной!
|
||||
|
||||
17
|
||||
00:02:11.542 --> 00:02:12.750
|
||||
Имо. быстрее!
|
||||
|
||||
18
|
||||
00:02:48.375 --> 00:02:50.083
|
||||
Ты не обращаешь внимания!
|
||||
|
||||
19
|
||||
00:02:50.708 --> 00:02:54.500
|
||||
Я только хотел ответить на ...
|
||||
...звонок.
|
||||
|
||||
20
|
||||
00:02:55.000 --> 00:02:58.208
|
||||
Имо. смотри.
|
||||
то есть слушай...
|
||||
|
||||
21
|
||||
00:02:59.708 --> 00:03:02.292
|
||||
Ты должен учиться слушать.
|
||||
|
||||
22
|
||||
00:03:03.250 --> 00:03:05.333
|
||||
Это не какая-нибудь игра.
|
||||
|
||||
23
|
||||
00:03:06.000 --> 00:03:08.833
|
||||
Ты. вернее мы. легко можем погибнуть здесь.
|
||||
|
||||
24
|
||||
00:03:10.000 --> 00:03:11.167
|
||||
Слушай...
|
||||
|
||||
25
|
||||
00:03:11.667 --> 00:03:14.125
|
||||
слушай звуки машины.
|
||||
|
||||
26
|
||||
00:03:18.333 --> 00:03:20.417
|
||||
Слушай своё дыхание.
|
||||
|
||||
27
|
||||
00:04:27.208 --> 00:04:29.250
|
||||
И не надоест тебе это?
|
||||
|
||||
28
|
||||
00:04:29.542 --> 00:04:31.083
|
||||
Надоест?!?
|
||||
|
||||
29
|
||||
00:04:31.708 --> 00:04:34.625
|
||||
Имо! Машина -
|
||||
она как часовой механизм.
|
||||
|
||||
30
|
||||
00:04:35.500 --> 00:04:37.667
|
||||
Одно движение не туда...
|
||||
|
||||
31
|
||||
00:04:37.792 --> 00:04:39.750
|
||||
...и тебя размелют в месиво!
|
||||
|
||||
32
|
||||
00:04:41.042 --> 00:04:42.375
|
||||
А разве это не -
|
||||
|
||||
33
|
||||
00:04:42.417 --> 00:04:46.500
|
||||
Месиво. Имо!
|
||||
ты этого хочешь? месиво?
|
||||
|
||||
34
|
||||
00:04:48.083 --> 00:04:50.000
|
||||
Имо. твоя цель в жизни?
|
||||
|
||||
35
|
||||
00:04:50.542 --> 00:04:52.250
|
||||
Месиво!
|
||||
|
||||
36
|
||||
00:05:41.792 --> 00:05:43.458
|
||||
Имо. закрой глаза.
|
||||
|
||||
37
|
||||
00:05:44.875 --> 00:05:46.542
|
||||
Зачем?
|
||||
- Ну же!
|
||||
|
||||
38
|
||||
00:05:51.500 --> 00:05:52.333
|
||||
Ладно.
|
||||
|
||||
39
|
||||
00:05:53.708 --> 00:05:56.042
|
||||
Хорошо.
|
||||
|
||||
40
|
||||
00:05:59.500 --> 00:06:02.750
|
||||
Что ты видишь слева от себя. Имо?
|
||||
|
||||
41
|
||||
00:06:04.417 --> 00:06:06.000
|
||||
Ничего.
|
||||
- Точно?
|
||||
|
||||
42
|
||||
00:06:06.333 --> 00:06:07.875
|
||||
да. совсем ничего.
|
||||
|
||||
43
|
||||
00:06:08.042 --> 00:06:12.708
|
||||
А справа от себя.
|
||||
что ты видишь справа от себя. Имо?
|
||||
|
||||
44
|
||||
00:06:13.833 --> 00:06:16.875
|
||||
Да то же Пруг. в точности то же...
|
||||
|
||||
45
|
||||
00:06:17.042 --> 00:06:18.500
|
||||
Ничего!
|
||||
|
||||
46
|
||||
00:06:18.667 --> 00:06:19.500
|
||||
Прекрасно...
|
||||
|
||||
47
|
||||
00:06:40.583 --> 00:06:42.917
|
||||
Прислушайся. Пруг! Ты слышишь это?
|
||||
|
||||
48
|
||||
00:06:43.583 --> 00:06:45.042
|
||||
Может. мы пойдём туда?
|
||||
|
||||
49
|
||||
00:06:45.208 --> 00:06:48.042
|
||||
Туда?
|
||||
Это не безопасно. Имо.
|
||||
|
||||
50
|
||||
00:06:49.875 --> 00:06:52.500
|
||||
Но...
|
||||
- Поверь мне. это так.
|
||||
|
||||
51
|
||||
00:06:53.292 --> 00:06:54.750
|
||||
Может я бы ...
|
||||
|
||||
52
|
||||
00:06:54.792 --> 00:06:56.333
|
||||
Нет.
|
||||
|
||||
53
|
||||
00:06:57.625 --> 00:06:59.583
|
||||
- Но...
|
||||
- НЕТ!
|
||||
|
||||
54
|
||||
00:06:59.708 --> 00:07:00.833
|
||||
Нет!
|
||||
|
||||
55
|
||||
00:07:00.833 --> 00:07:03.708
|
||||
Ещё вопросы. Имо?
|
||||
|
||||
56
|
||||
00:07:04.250 --> 00:07:05.875
|
||||
Нет.
|
||||
|
||||
57
|
||||
00:07:09.458 --> 00:07:10.792
|
||||
Имо?
|
||||
|
||||
58
|
||||
00:07:11.833 --> 00:07:13.500
|
||||
Имо. почему...
|
||||
|
||||
59
|
||||
00:07:13.542 --> 00:07:14.458
|
||||
Имо...
|
||||
|
||||
60
|
||||
00:07:14.500 --> 00:07:18.500
|
||||
...почему? почему ты не видишь
|
||||
красоты этого места?
|
||||
|
||||
61
|
||||
00:07:18.792 --> 00:07:20.708
|
||||
То как оно работает.
|
||||
|
||||
62
|
||||
00:07:20.833 --> 00:07:24.000
|
||||
Как совершенно оно.
|
||||
|
||||
63
|
||||
00:07:24.083 --> 00:07:27.417
|
||||
Нет. Пруг. я не вижу.
|
||||
|
||||
64
|
||||
00:07:27.500 --> 00:07:30.333
|
||||
Я не вижу. потому что здесь ничего нет.
|
||||
|
||||
65
|
||||
00:07:31.375 --> 00:07:35.333
|
||||
И почему я должен доверять свою жизнь
|
||||
чему-то. чего здесь нет?
|
||||
|
||||
66
|
||||
00:07:35.542 --> 00:07:37.125
|
||||
это ты мне можешь сказать?
|
||||
|
||||
67
|
||||
00:07:37.500 --> 00:07:39.167
|
||||
Ответь мне!
|
||||
|
||||
68
|
||||
00:07:43.208 --> 00:07:44.542
|
||||
Пруг...
|
||||
|
||||
69
|
||||
00:07:45.500 --> 00:07:47.333
|
||||
Ты просто больной!
|
||||
|
||||
70
|
||||
00:07:47.375 --> 00:07:48.500
|
||||
Отстань от меня.
|
||||
|
||||
71
|
||||
00:07:48.625 --> 00:07:49.917
|
||||
Имо...
|
||||
|
||||
72
|
||||
00:07:52.542 --> 00:07:55.083
|
||||
Нет! Имо! Это ловушка!
|
||||
|
||||
73
|
||||
00:07:55.792 --> 00:07:57.167
|
||||
Это ловушка!
|
||||
|
||||
74
|
||||
00:07:57.208 --> 00:08:01.708
|
||||
Слева от себя вы можете увидеть
|
||||
Висящие сады Семирамиды!
|
||||
|
||||
75
|
||||
00:08:02.250 --> 00:08:04.292
|
||||
Сойдёт за ловушку?
|
||||
|
||||
76
|
||||
00:08:05.458 --> 00:08:07.125
|
||||
Нет. Имо.
|
||||
|
||||
77
|
||||
00:08:09.417 --> 00:08:12.750
|
||||
Справа от себя вы можете увидеть...
|
||||
...угадай кого...
|
||||
|
||||
78
|
||||
00:08:13.000 --> 00:08:14.708
|
||||
...Колосса Родосского!
|
||||
|
||||
79
|
||||
00:08:15.500 --> 00:08:16.625
|
||||
Нет!
|
||||
|
||||
80
|
||||
00:08:16.667 --> 00:08:21.125
|
||||
Колосс Родосский!
|
||||
И он здесь специально для тебя. Пруг.
|
||||
|
||||
81
|
||||
00:08:21.167 --> 00:08:22.208
|
||||
Специально для тебя...
|
||||
|
||||
82
|
||||
00:08:51.333 --> 00:08:53.167
|
||||
Она здесь есть!
|
||||
|
||||
83
|
||||
00:08:53.208 --> 00:08:55.500
|
||||
Говорю тебе.
|
||||
Имо...
|
||||
|
||||
84
|
||||
00:08:57.333 --> 00:09:00.000
|
||||
...она есть... есть...
|
||||
@@ -0,0 +1,349 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:15.042 --> 00:00:18.250
|
||||
Till vänster kan vi se...
|
||||
Ser vi...
|
||||
|
||||
2
|
||||
00:00:18.708 --> 00:00:20.333
|
||||
Till höger ser vi...
|
||||
|
||||
3
|
||||
00:00:20.417 --> 00:00:21.958
|
||||
...huvudkaparna.
|
||||
|
||||
4
|
||||
00:00:22.000 --> 00:00:24.792
|
||||
Allt är säkert.
|
||||
alldeles ofarligt.
|
||||
|
||||
5
|
||||
00:00:24.917 --> 00:00:26.833
|
||||
Emo?
|
||||
|
||||
6
|
||||
00:00:28.750 --> 00:00:30.167
|
||||
Se upp!
|
||||
|
||||
7
|
||||
00:00:46.708 --> 00:00:48.750
|
||||
Är du skadad?
|
||||
|
||||
8
|
||||
00:00:51.875 --> 00:00:54.458
|
||||
Jag tror inte det...
|
||||
Är du?
|
||||
|
||||
9
|
||||
00:00:55.292 --> 00:00:57.333
|
||||
Jag är ok.
|
||||
|
||||
10
|
||||
00:00:57.542 --> 00:01:01.625
|
||||
Res dig upp Emo.
|
||||
Det är inte säkert här.
|
||||
|
||||
11
|
||||
00:01:02.208 --> 00:01:03.625
|
||||
Kom så går vi.
|
||||
|
||||
12
|
||||
00:01:03.708 --> 00:01:05.708
|
||||
Vad nu då?
|
||||
|
||||
13
|
||||
00:01:05.833 --> 00:01:07.833
|
||||
Du får se...
|
||||
|
||||
14
|
||||
00:01:08.042 --> 00:01:10.417
|
||||
Du får se.
|
||||
|
||||
15
|
||||
00:01:15.958 --> 00:01:18.375
|
||||
Emo. den här vägen.
|
||||
|
||||
16
|
||||
00:01:34.417 --> 00:01:36.750
|
||||
Följ efter mig!
|
||||
|
||||
17
|
||||
00:02:11.250 --> 00:02:13.250
|
||||
Skynda dig. Emo!
|
||||
|
||||
18
|
||||
00:02:48.375 --> 00:02:50.583
|
||||
Du är inte uppmärksam!
|
||||
|
||||
19
|
||||
00:02:50.708 --> 00:02:54.500
|
||||
Jag vill bara svara...
|
||||
... i telefonen.
|
||||
|
||||
20
|
||||
00:02:54.500 --> 00:02:58.208
|
||||
Emo. se här...
|
||||
Lyssna menar jag.
|
||||
|
||||
21
|
||||
00:02:59.708 --> 00:03:02.292
|
||||
Du måste lära dig att lyssna.
|
||||
|
||||
22
|
||||
00:03:03.292 --> 00:03:05.208
|
||||
Det här är ingen lek.
|
||||
|
||||
23
|
||||
00:03:05.250 --> 00:03:08.917
|
||||
Du... Jag menar vi.
|
||||
vi skulle kunna dö här ute.
|
||||
|
||||
24
|
||||
00:03:09.917 --> 00:03:11.417
|
||||
Lyssna...
|
||||
|
||||
25
|
||||
00:03:11.708 --> 00:03:14.833
|
||||
Lyssna på ljuden från maskinen.
|
||||
|
||||
26
|
||||
00:03:18.125 --> 00:03:21.417
|
||||
Lyssna på dina andetag.
|
||||
|
||||
27
|
||||
00:04:26.625 --> 00:04:29.250
|
||||
Tröttnar du aldrig på det här?
|
||||
|
||||
28
|
||||
00:04:29.542 --> 00:04:31.083
|
||||
Tröttnar!?
|
||||
|
||||
29
|
||||
00:04:31.208 --> 00:04:33.458
|
||||
Emo. maskinen är som...
|
||||
|
||||
30
|
||||
00:04:33.458 --> 00:04:35.333
|
||||
Som ett urverk.
|
||||
|
||||
31
|
||||
00:04:35.417 --> 00:04:37.167
|
||||
Ett felsteg...
|
||||
|
||||
32
|
||||
00:04:37.208 --> 00:04:39.750
|
||||
...och du blir krossad.
|
||||
|
||||
33
|
||||
00:04:41.042 --> 00:04:42.292
|
||||
Men är det inte -
|
||||
|
||||
34
|
||||
00:04:42.292 --> 00:04:47.000
|
||||
Krossad. Emo!
|
||||
Är det vad du vill bli? Krossad till mos?
|
||||
|
||||
35
|
||||
00:04:47.500 --> 00:04:50.542
|
||||
Emo. är det ditt mål i livet?
|
||||
|
||||
36
|
||||
00:04:50.667 --> 00:04:53.250
|
||||
Att bli mos!?
|
||||
|
||||
37
|
||||
00:05:41.375 --> 00:05:43.458
|
||||
Emo. blunda.
|
||||
|
||||
38
|
||||
00:05:44.375 --> 00:05:46.542
|
||||
Varför då?
|
||||
- Blunda!
|
||||
|
||||
39
|
||||
00:05:51.292 --> 00:05:55.042
|
||||
Ok.
|
||||
- Bra.
|
||||
|
||||
40
|
||||
00:05:59.500 --> 00:06:02.750
|
||||
Vad ser du till vänster om dig Emo?
|
||||
|
||||
41
|
||||
00:06:04.125 --> 00:06:06.292
|
||||
Ingenting.
|
||||
- Säker?
|
||||
|
||||
42
|
||||
00:06:06.333 --> 00:06:07.958
|
||||
Ingenting alls.
|
||||
|
||||
43
|
||||
00:06:08.042 --> 00:06:12.625
|
||||
Jaså. och till höger om dig...
|
||||
Vad ser du där. Emo?
|
||||
|
||||
44
|
||||
00:06:13.750 --> 00:06:15.583
|
||||
Samma där Proog...
|
||||
|
||||
45
|
||||
00:06:15.583 --> 00:06:18.083
|
||||
Exakt samma där. ingenting!
|
||||
|
||||
46
|
||||
00:06:18.083 --> 00:06:19.667
|
||||
Perfekt.
|
||||
|
||||
47
|
||||
00:06:40.500 --> 00:06:42.917
|
||||
Lyssna Proog! Hör du?
|
||||
|
||||
48
|
||||
00:06:43.500 --> 00:06:45.125
|
||||
Kan vi gå dit?
|
||||
|
||||
49
|
||||
00:06:45.208 --> 00:06:48.125
|
||||
Gå dit?
|
||||
Det är inte tryggt.
|
||||
|
||||
50
|
||||
00:06:49.583 --> 00:06:52.583
|
||||
Men. men...
|
||||
- Tro mig. det inte säkert.
|
||||
|
||||
51
|
||||
00:06:53.000 --> 00:06:54.292
|
||||
Men kanske om jag -
|
||||
|
||||
52
|
||||
00:06:54.292 --> 00:06:56.333
|
||||
Nej.
|
||||
|
||||
53
|
||||
00:06:57.208 --> 00:07:00.167
|
||||
Men -
|
||||
- Nej. NEJ!
|
||||
|
||||
54
|
||||
00:07:00.917 --> 00:07:03.792
|
||||
Några fler frågor Emo?
|
||||
|
||||
55
|
||||
00:07:04.250 --> 00:07:05.875
|
||||
Nej.
|
||||
|
||||
56
|
||||
00:07:09.542 --> 00:07:11.375
|
||||
Emo?
|
||||
- Ja?
|
||||
|
||||
57
|
||||
00:07:11.542 --> 00:07:15.667
|
||||
Emo. varför...
|
||||
|
||||
58
|
||||
00:07:15.792 --> 00:07:18.583
|
||||
Varför kan du inte se skönheten i det här?
|
||||
|
||||
59
|
||||
00:07:18.792 --> 00:07:21.708
|
||||
Hur det fungerar.
|
||||
|
||||
60
|
||||
00:07:21.833 --> 00:07:24.000
|
||||
Hur perfekt det är.
|
||||
|
||||
61
|
||||
00:07:24.083 --> 00:07:27.333
|
||||
Nej Proog. jag kan inte se det.
|
||||
|
||||
62
|
||||
00:07:27.333 --> 00:07:30.333
|
||||
Jag ser det inte. för det finns inget där.
|
||||
|
||||
63
|
||||
00:07:31.292 --> 00:07:35.333
|
||||
Och varför skulle jag lägga mitt liv
|
||||
i händerna på något som inte finns?
|
||||
|
||||
64
|
||||
00:07:35.333 --> 00:07:37.083
|
||||
Kan du berätta det för mig?
|
||||
- Emo...
|
||||
|
||||
65
|
||||
00:07:37.083 --> 00:07:39.167
|
||||
Svara mig!
|
||||
|
||||
66
|
||||
00:07:43.500 --> 00:07:45.208
|
||||
Proog...
|
||||
|
||||
67
|
||||
00:07:45.208 --> 00:07:47.083
|
||||
Du är inte frisk!
|
||||
|
||||
68
|
||||
00:07:47.167 --> 00:07:49.292
|
||||
Håll dig borta från mig!
|
||||
|
||||
69
|
||||
00:07:52.292 --> 00:07:55.083
|
||||
Nej! Emo!
|
||||
Det är en fälla!
|
||||
|
||||
70
|
||||
00:07:55.375 --> 00:07:57.208
|
||||
Heh. det är en fälla.
|
||||
|
||||
71
|
||||
00:07:57.208 --> 00:08:01.708
|
||||
På vänster sida ser vi...
|
||||
Babylons hängande trädgårdar!
|
||||
|
||||
72
|
||||
00:08:01.958 --> 00:08:04.000
|
||||
Vad sägs om den fällan?
|
||||
|
||||
73
|
||||
00:08:05.458 --> 00:08:07.333
|
||||
Nej. Emo.
|
||||
|
||||
74
|
||||
00:08:08.917 --> 00:08:12.667
|
||||
Till höger ser vi...
|
||||
Gissa!
|
||||
|
||||
75
|
||||
00:08:12.750 --> 00:08:15.125
|
||||
Rhodos koloss!
|
||||
|
||||
76
|
||||
00:08:15.375 --> 00:08:16.500
|
||||
Nej!
|
||||
|
||||
77
|
||||
00:08:16.500 --> 00:08:20.250
|
||||
Kolossen på Rhodos!
|
||||
Och den är här för din skull. Proog...
|
||||
|
||||
78
|
||||
00:08:20.250 --> 00:08:23.250
|
||||
Bara för din skull.
|
||||
|
||||
79
|
||||
00:08:50.917 --> 00:08:53.250
|
||||
Den är där...
|
||||
|
||||
80
|
||||
00:08:53.625 --> 00:08:56.417
|
||||
Tro mig.
|
||||
Emo...
|
||||
|
||||
81
|
||||
00:08:57.000 --> 00:09:00.000
|
||||
Det är den.
|
||||
Det är den...
|
||||
@@ -0,0 +1,44 @@
|
||||
WEBVTT
|
||||
|
||||
NOTE Created by Owen Edwards 2015. http://creativecommons.org/licenses/by/2.5/
|
||||
NOTE Based on 'finalbreakdown.rtf', part of the prepoduction notes, which are:
|
||||
NOTE (c) Copyright 2006, Blender Foundation /
|
||||
NOTE Netherlands Media Art Institute /
|
||||
NOTE www.elephantsdream.org
|
||||
|
||||
1
|
||||
00:00:00.000 --> 00:00:27.500
|
||||
Prologue
|
||||
|
||||
2
|
||||
00:00:27.500 --> 00:01:10.000
|
||||
Switchboard trap
|
||||
|
||||
3
|
||||
00:01:10.000 --> 00:03:25.000
|
||||
Telephone/Lecture
|
||||
|
||||
4
|
||||
00:03:25.000 --> 00:04:52.000
|
||||
Typewriter
|
||||
|
||||
5
|
||||
00:04:52.000 --> 00:06:19.500
|
||||
Proog shows Emo stuff
|
||||
|
||||
6
|
||||
00:06:19.500 --> 00:07:09.000
|
||||
Which way
|
||||
|
||||
7
|
||||
00:07:09.000 --> 00:07:45.000
|
||||
Emo flips out
|
||||
|
||||
8
|
||||
00:07:45.000 --> 00:09:25.000
|
||||
Emo creates
|
||||
|
||||
9
|
||||
00:09:25.000 --> 00:10:53.000
|
||||
Closing credits
|
||||
|
||||
@@ -0,0 +1,280 @@
|
||||
WEBVTT
|
||||
License: CC BY 4.0 http://creativecommons.org/licenses/by/4.0/
|
||||
Author: Silvia Pfeiffer
|
||||
|
||||
1
|
||||
00:00:00.000 --> 00:00:05.000
|
||||
The orange open movie project presents
|
||||
|
||||
2
|
||||
00:00:05.010 --> 00:00:12.000
|
||||
Introductory titles are showing on the background of a water pool with fishes swimming and mechanical objects lying on a stone floor.
|
||||
|
||||
3
|
||||
00:00:12.010 --> 00:00:14.800
|
||||
elephants dream
|
||||
|
||||
4
|
||||
00:00:26.100 --> 00:00:28.206
|
||||
Two people stand on a small bridge.
|
||||
|
||||
5
|
||||
00:00:30.010 --> 00:00:40.000
|
||||
The old man, Proog, shoves the younger and less experienced Emo on the ground to save him from being mowed down by a barrage of jack plugs that whir back and forth between the two massive switch-board-like walls.
|
||||
|
||||
6
|
||||
00:00:40.000 --> 00:00:47.000
|
||||
The plugs are oblivious of the two, endlessly channeling streams of bizarre sounds and data.
|
||||
|
||||
7
|
||||
00:00:48.494 --> 00:00:51.994
|
||||
Emo sits on the bridge and checks his limbs.
|
||||
|
||||
8
|
||||
00:01:09.150 --> 00:01:16.030
|
||||
After the squealing plugs move on, Proog makes sure that Emo is unharmed and urges him onwards through a crack in one of the plug-walls.
|
||||
|
||||
9
|
||||
00:01:18.050 --> 00:01:24.000
|
||||
They walk through the narrow hall into a massive room that fades away into blackness on all sides.
|
||||
|
||||
10
|
||||
00:01:24.050 --> 00:01:34.200
|
||||
Only one path is visible, suspended in mid-air that runs between thousands of dangling electric cables on which sit crowds of robin-like robotic birds.
|
||||
|
||||
11
|
||||
00:01:36.000 --> 00:01:40.000
|
||||
As Proog and Emo enter the room, the birds begin to wake up and notice them.
|
||||
|
||||
12
|
||||
00:01:42.000 --> 00:01:50.000
|
||||
Realizing the danger, Proog grabs Emo by the arm.
|
||||
|
||||
13
|
||||
00:01:50.050 --> 00:02:00.000
|
||||
They run along the increasingly bizarre path as the birds begin to swarm.
|
||||
|
||||
14
|
||||
00:02:00.050 --> 00:02:11.000
|
||||
All sound is blocked out by the birds which are making the same noises as the jack-plugs, garbled screaming and obscure sentences and static.
|
||||
|
||||
15
|
||||
00:02:12.600 --> 00:02:17.000
|
||||
The path dead-ends, stopping in the middle of no-where above the infinite drop.
|
||||
|
||||
16
|
||||
00:02:17.600 --> 00:02:22.000
|
||||
Proog turns around as the birds reach them and begin to dive-bomb at them.
|
||||
|
||||
17
|
||||
00:02:22.600 --> 00:02:28.000
|
||||
At the last moment, Proog takes out an old candlestick phone and the birds dive into the speaker piece.
|
||||
|
||||
18
|
||||
00:02:28.600 --> 00:02:31.000
|
||||
The screen cuts to black.
|
||||
|
||||
19
|
||||
00:02:31.600 --> 00:02:38.000
|
||||
In the next scene, Proog stands at one end of a room, suspiciously watching what is probably the same candlestick phone, which is ringing.
|
||||
|
||||
20
|
||||
00:02:38.500 --> 00:02:41.000
|
||||
Emo watches from the other side of the room.
|
||||
|
||||
21
|
||||
00:02:41.500 --> 00:02:43.000
|
||||
The phone continues to ring.
|
||||
|
||||
22
|
||||
00:02:43.500 --> 00:02:48.000
|
||||
After a while Emo approaches it to answer it, but Proog slaps his hand away.
|
||||
|
||||
23
|
||||
00:02:57.972 --> 00:02:59.100
|
||||
Proog takes the ear-piece off the hook.
|
||||
|
||||
24
|
||||
00:03:13.500 --> 00:03:18.054
|
||||
The phone speaker revealed a mass of clawed, fleshy polyps which scream and gibber obscenely.
|
||||
|
||||
25
|
||||
00:03:25.000 --> 00:03:33.000
|
||||
There is a solemn silence as Emo looks around the room and the technical objects therein.
|
||||
|
||||
26
|
||||
00:03:38.000 --> 00:03:44.000
|
||||
Emo laughs disbelievingly and Proog walks away.
|
||||
|
||||
27
|
||||
00:03:46.000 --> 00:03:54.000
|
||||
In the next scene, the two enter another massive black room.
|
||||
|
||||
28
|
||||
00:03:54.500 --> 00:04:04.000
|
||||
There is no path, the entry platform is the only structure that seems to be there except for another exit, lit distantly at the far side.
|
||||
|
||||
29
|
||||
00:04:04.500 --> 00:04:14.000
|
||||
Proog takes a step forward into the void, and his feet are suddenly caught by giant typewriter arms that rocket up out of the blackness to catch his feet as he dances across mid-air.
|
||||
|
||||
30
|
||||
00:04:14.500 --> 00:04:22.000
|
||||
Emo follows Proog with somewhat less enthusiasm as the older man leads the way.
|
||||
|
||||
31
|
||||
00:04:52.000 --> 00:04:58.000
|
||||
They reach the end of the room and go through a hall into a small compartment.
|
||||
|
||||
32
|
||||
00:05:02.000 --> 00:05:06.000
|
||||
Proog presses a button, and the door shuts.
|
||||
|
||||
33
|
||||
00:05:06.500 --> 00:05:09.000
|
||||
It is an elevator.
|
||||
|
||||
34
|
||||
00:05:09.500 --> 00:05:24.000
|
||||
The elevator lurches suddenly as it is grabbed by a giant mechanical arm and thrown upwards, rushing up through an ever-widening tunnel.
|
||||
|
||||
35
|
||||
00:05:26.500 --> 00:05:32.000
|
||||
When it begins to slow down, another arm grabs the capsule and throws it even further up.
|
||||
|
||||
36
|
||||
00:05:32.500 --> 00:05:40.000
|
||||
As it moves up, the walls unlock and fall away, leaving only the floor with the two on it, rushing higher and higher.
|
||||
|
||||
37
|
||||
00:05:54.500 --> 00:05:59.000
|
||||
They exit the tunnel into a black sky and the platform reaches the peak of its arc.
|
||||
|
||||
38
|
||||
00:06:19.500 --> 00:06:26.000
|
||||
The elevator begins to drop down another shaft, coming to rest as it slams into the floor of another room and bringing the two to a level stop.
|
||||
|
||||
39
|
||||
00:06:26.500 --> 00:06:28.000
|
||||
A camera flashes.
|
||||
|
||||
40
|
||||
00:06:28.010 --> 00:06:34.000
|
||||
They are in a large, dingy room filled with strange, generator-like devices and dotted with boxy holographic projectors.
|
||||
|
||||
41
|
||||
00:06:34.500 --> 00:06:38.000
|
||||
One of them is projecting a portion of wall with a door in it right beside them.
|
||||
|
||||
42
|
||||
00:06:38.500 --> 00:06:40.000
|
||||
The door seems harmless enough.
|
||||
|
||||
43
|
||||
00:06:42.800 --> 00:06:45.100
|
||||
From behind the door comes light music.
|
||||
|
||||
44
|
||||
00:06:56.000 --> 00:07:00.100
|
||||
Proog presses a button on his cane, which changes the holograph to another wall.
|
||||
|
||||
45
|
||||
00:07:05.100 --> 00:07:11.000
|
||||
Proog finishes the wall, and boxes them into a Safe Room, out of the view of anything outside.
|
||||
|
||||
46
|
||||
00:07:39.000 --> 00:07:42.500
|
||||
Proog slaps him, trying to bring him to his senses.
|
||||
|
||||
47
|
||||
00:07:45.000 --> 00:07:52.000
|
||||
Emo storms away down the length of the room towards a wall he apparently cannot see and the wall begins to move, extending the length of the room.
|
||||
|
||||
48
|
||||
00:08:00.000 --> 00:08:07.000
|
||||
The walls begin to discolour and mechanical roots start tearing through the walls to his left.
|
||||
|
||||
49
|
||||
00:08:07.010 --> 00:08:09.000
|
||||
The roots move forwards toward Proog.
|
||||
|
||||
50
|
||||
00:08:22.000 --> 00:08:31.000
|
||||
The rest of the safety wall crumples away as a pair of massive hands heave out of the ground and begin to attack.
|
||||
|
||||
51
|
||||
00:08:31.010 --> 00:08:37.000
|
||||
Proog is knocked down by the shockwave, while Emo turns and begins to walk away, waving his finger around his temple in the 'crazy' sign.
|
||||
|
||||
52
|
||||
00:08:37.010 --> 00:08:44.000
|
||||
In a last effort, Proog extricates himself from the tentacle roots, and cracks Emo over the back of the head with his cane.
|
||||
|
||||
53
|
||||
00:08:44.500 --> 00:08:51.000
|
||||
As Emo collapses, everything falls away, and Proog and Emo are left in one tiny patch of light in the middle of blackness.
|
||||
|
||||
54
|
||||
00:09:00.000 --> 00:09:20.000
|
||||
The scene fades to black while panning over a pile of tentacle roots lying on the ground.
|
||||
|
||||
55
|
||||
00:09:26.000 --> 00:09:28.000
|
||||
Credits begin:
|
||||
|
||||
56
|
||||
00:09:28.500 --> 00:09:35.000
|
||||
Orange Open Movie Team
|
||||
Director: Bassum Kurdali
|
||||
Art Director: Andreas Goralczyk
|
||||
|
||||
57
|
||||
00:09:35.500 --> 00:09:39.000
|
||||
Music and Sound Design: Jan Morgenstern
|
||||
|
||||
58
|
||||
00:09:39.500 --> 00:09:44.000
|
||||
Emo: Cas Jansen
|
||||
Proog: Tygo Gernandt
|
||||
|
||||
59
|
||||
00:09:44.500 --> 00:09:50.000
|
||||
Screenplay: Pepijn Zwanenberg
|
||||
Original Concept & Scenario: Andreas Goralczyk, Bassam Kurdali, Ton Roosendaal
|
||||
|
||||
60
|
||||
00:09:50.500 --> 00:10:24.000
|
||||
More people for
|
||||
Additional Artwork and Animation
|
||||
Texture Photography
|
||||
Software Development
|
||||
3D Modelling, Animation, Rendering, Compiling Software
|
||||
Special Thanks to Open Source Projects
|
||||
Rendering Services Provided
|
||||
Hardware Sponsored
|
||||
Casting
|
||||
Sound FX, Foley, Dialogue Editing, Audio Mix and Post
|
||||
Voice Recording
|
||||
HDCam conversion
|
||||
Netherlands Media Art Institute Staff
|
||||
Blender Foundation Staff
|
||||
|
||||
61
|
||||
00:10:24.500 --> 00:10:30.000
|
||||
Many Thanks to our Donation and DVD sponsors
|
||||
|
||||
62
|
||||
00:10:30.500 --> 00:10:47.000
|
||||
Elephants Dream has been realised with financial support from
|
||||
The Netherlands Film Fund
|
||||
Mondriaan Foundation
|
||||
VSBfonds
|
||||
Uni-Verse / EU Sixth Framework Programme
|
||||
|
||||
63
|
||||
00:10:47.500 --> 00:10:53.000
|
||||
Produced By
|
||||
Ton Roosendaal
|
||||
Copyright 2006
|
||||
Netherlands Media Art Institute / Montevideo
|
||||
Blender Foundation
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Video.js Text Descriptions, Chapters & Captions Example</title>
|
||||
|
||||
<link href="../../video-js.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<script src="../../video.js"></script>
|
||||
|
||||
<!-- Set the location of the flash SWF -->
|
||||
<script>
|
||||
videojs.setGlobalOptions({
|
||||
flash: {
|
||||
swf: '../../video-js.swf'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page demonstrates a text descriptions track (intended primarily for blind and visually impaired consumers of visual media)</p>
|
||||
|
||||
<!-- NOTE: we have to disable native Text Track support for the HTML5 tech,
|
||||
since even HTML5 video players with native Text Track support
|
||||
don't currently support 'description' text tracks in any
|
||||
useful way! -->
|
||||
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360"
|
||||
data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
|
||||
<source src="https://archive.org/download/ElephantsDream/ed_hd.mp4" type="video/mp4">
|
||||
<source src="https://archive.org/download/ElephantsDream/ed_hd.ogv" type="video/ogv">
|
||||
|
||||
<track kind="captions" src="captions.en.vtt" srclang="en" label="English" default></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<track kind="captions" src="captions.sv.vtt" srclang="sv" label="Swedish"></track>
|
||||
<track kind="captions" src="captions.ru.vtt" srclang="ru" label="Russian"></track>
|
||||
<track kind="captions" src="captions.ja.vtt" srclang="ja" label="Japanese"></track>
|
||||
<track kind="captions" src="captions.ar.vtt" srclang="ar" label="Arabic"></track>
|
||||
|
||||
<track kind="descriptions" src="descriptions.en.vtt" srclang="en" label="English"></track>
|
||||
|
||||
<track kind="chapters" src="chapters.en.vtt" srclang="en" label="English"></track>
|
||||
|
||||
<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>
|
||||
@@ -1,37 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Video.js | HTML5 Video Player</title>
|
||||
|
||||
<!-- Chang URLs to wherever Video.js files will be hosted -->
|
||||
<!-- Default URLs assume the examples folder is included alongside video.js -->
|
||||
<link href="../../video-js.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Include ES5 shim, sham and html5 shiv for ie8 support -->
|
||||
<!-- Exclude this if you don't need ie8 support -->
|
||||
<script src="../../ie8/videojs-ie8.min.js"></script>
|
||||
|
||||
<!-- video.js must be in the <head> for older IEs to work. -->
|
||||
<script src="../../video.min.js"></script>
|
||||
|
||||
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = "../../video-js.swf";
|
||||
</script>
|
||||
<title>Video.js | HTML5 Video Player</title>
|
||||
<link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
|
||||
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
|
||||
<script src="http://vjs.zencdn.net/5.0.2/video.js"></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="../shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
|
||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
||||
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
|
||||
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
|
||||
<track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
|
||||
<!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<track kind="subtitles" src="../shared/example-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>
|
||||
|
||||
@@ -17,7 +17,7 @@ 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
|
||||
```js
|
||||
videojs("example_video_1").ready(function(){
|
||||
var myPlayer = this;
|
||||
|
||||
@@ -41,4 +41,4 @@ myPlayer.currentTime(120);
|
||||
|
||||
```
|
||||
|
||||
The full list of player API methods and events can be found in the [player API docs](../api/vjs.Player.md).
|
||||
The full list of player API methods and events can be found in the [player API docs](http://docs.videojs.com/docs/api/index.html).
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
# Audio Tracks
|
||||
|
||||
Audio Tracks are a function of HTML5 video for providing alternative audio track selections to the user, so that a track other than the main track can be played. Video.js makes audio tracks work across all browsers. There are currently five types of tracks:
|
||||
|
||||
- **Alternative**: alternative audio for the main video track
|
||||
- **Descriptions**: descriptions of what is happening in the video track
|
||||
- **Main**: the main audio track for this video
|
||||
- **Translation**: a translation of the main audio track
|
||||
- **Commentary**: commentary on the video, usually the director of the content talking about design choices
|
||||
|
||||
## Missing Funtionality
|
||||
- It is currently impossible to add AudioTracks in a non-programtic way
|
||||
- Literal switching of AudioTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation
|
||||
|
||||
## Adding to Video.js
|
||||
|
||||
> Right now adding audio tracks in the HTML is unsupported. Audio Tracks must be added programatically.
|
||||
|
||||
You must add audio tracks [programatically](#api) for the time being.
|
||||
|
||||
## Attributes
|
||||
Audio Track propertites and settings
|
||||
|
||||
### kind
|
||||
One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.
|
||||
|
||||
### label
|
||||
The label for the track that will be show to the user, for example in a menu that list the different languages available for audio tracks.
|
||||
|
||||
### language
|
||||
The two-letter code (valid BCP 47 language tag) for the language of the audio track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
|
||||
|
||||
### enabled
|
||||
If this track should be playing or not. In video.js we only allow one track to be enabled at a time. so if you enable more than one the last one to be enabled will end up being the only one.
|
||||
|
||||
## Interacting with Audio Tracks
|
||||
### Doing something when a track becomes enabled
|
||||
When a new track is enabled (other than the main track) an event is fired on the `AudioTrackList` called `change` you can listen to that event and do something with it.
|
||||
Here's an example:
|
||||
```js
|
||||
// get the current players AudioTrackList object
|
||||
let tracks = player.audioTracks();
|
||||
|
||||
// listen to the change event
|
||||
tracks.addEventListener('change', function() {
|
||||
|
||||
// print the currently enabled AudioTrack label
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
let track = tracks[i];
|
||||
|
||||
if (track.enabled) {
|
||||
console.log(track.label);
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### `player.audioTracks() -> AudioTrackList`
|
||||
This is the main interface into the audio tracks of the player.
|
||||
It returns an AudioTrackList which is an array like object that contains all the `AudioTrack` on the player.
|
||||
|
||||
### `player.audioTracks().addTrack(AudioTrack)`
|
||||
Add an existing AudioTrack to the players internal list of AudioTracks.
|
||||
|
||||
### `player.audioTracks().removeTrack(AudioTrack)`
|
||||
Remove a track from the AudioTrackList currently on the player. if no track exists this will do nothing.
|
||||
+38
-11
@@ -41,19 +41,46 @@ Player
|
||||
BigPlayButton
|
||||
ControlBar
|
||||
PlayToggle
|
||||
FullscreenToggle
|
||||
CurrentTimeDisplay
|
||||
TimeDivider
|
||||
DurationDisplay
|
||||
RemainingTimeDisplay
|
||||
VolumeMenuButton
|
||||
CurrentTimeDisplay (Hidden by default)
|
||||
TimeDivider (Hidden by default)
|
||||
DurationDisplay (Hidden by default)
|
||||
ProgressControl
|
||||
SeekBar
|
||||
LoadProgressBar
|
||||
MouseTimeDisplay
|
||||
PlayProgressBar
|
||||
SeekHandle
|
||||
VolumeControl
|
||||
VolumeBar
|
||||
VolumeLevel
|
||||
VolumeHandle
|
||||
MuteToggle
|
||||
LiveDisplay (Hidden by default)
|
||||
RemainingTimeDisplay
|
||||
CustomControlsSpacer (No UI)
|
||||
ChaptersButton (Hidden by default)
|
||||
SubtitlesButton (Hidden by default)
|
||||
CaptionsButton (Hidden by default)
|
||||
FullscreenToggle
|
||||
ErrorDisplay
|
||||
TextTrackSettings
|
||||
```
|
||||
|
||||
## Progress Control
|
||||
The progress control is made up of the SeekBar. The seekbar contains the load progress bar
|
||||
and the play progress bar. In addition, it contains the Mouse Time Display which
|
||||
is used to display the time tooltip that follows the mouse cursor.
|
||||
The play progress bar also has a time tooltip that show the current time.
|
||||
|
||||
By default, the progress control is sandwiched between the volume menu button and
|
||||
the remaining time display inside the control bar, but in some cases, a skin would
|
||||
want to move the progress control above the control bar and have it span the full
|
||||
width of the player, in those cases, it is less than ideal to have the tooltips
|
||||
get cut off or leave the bounds of the player. This can be prevented by setting the
|
||||
`keepTooltipsInside` option on the progress control. This also makes the tooltips use
|
||||
a real element instead of pseudo elements so targetting them with css will be different.
|
||||
|
||||
```js
|
||||
let player = videojs('myplayer', {
|
||||
controlBar: {
|
||||
progressControl: {
|
||||
keepTooltipsInside: true
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
+177
-193
@@ -5,7 +5,11 @@ Multiple language support allows for users of non-English locales to natively in
|
||||
|
||||
Creating the Language File
|
||||
--------------------------
|
||||
Video.js uses key/value object dictionaries in JSON form. A sample dictionary for Spanish `['es']` would look as follows;
|
||||
Video.js uses key/value object dictionaries in JSON form.
|
||||
|
||||
An English lang file is at [/lang/en.json](https://github.com/videojs/video.js/tree/master/lang/en.json) which should be used as a template for new files. This will be kept up to date with strings in the core player that need localizations.
|
||||
|
||||
A sample dictionary for Spanish `['es']` would look as follows:
|
||||
|
||||
```JSON
|
||||
{
|
||||
@@ -21,13 +25,14 @@ Video.js uses key/value object dictionaries in JSON form. A sample dictionary fo
|
||||
"Fullscreen": "Pantalla completa",
|
||||
"Non-Fullscreen": "Pantalla no completa",
|
||||
"Mute": "Silenciar",
|
||||
"Unmuted": "No silenciado",
|
||||
"Unmute": "No silenciado",
|
||||
"Playback Rate": "Velocidad de reproducción",
|
||||
"Subtitles": "Subtítulos",
|
||||
"subtitles off": "Subtítulos desactivados",
|
||||
"Captions": "Subtítulos especiales",
|
||||
"captions off": "Subtítulos especiales desactivados",
|
||||
"Chapters": "Capítulos",
|
||||
"Close Modal Dialog": "Cerca de diálogo modal",
|
||||
"You aborted the video playback": "Ha interrumpido la reproducción del vídeo.",
|
||||
"A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
|
||||
"The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
|
||||
@@ -38,7 +43,7 @@ Video.js uses key/value object dictionaries in JSON form. A sample dictionary fo
|
||||
|
||||
Notes:
|
||||
|
||||
- The file name should always be in the format `XX.json`, where `XX` is the two letter value of the language reported to the browser (for options see the bottom of this document).
|
||||
- The file name should always be in the format `XX.json`, where `XX` is the language code. This should be a two letter code (for options see the bottom of this document) except for cases where a more specific code with sub-code is appropriate, e.g. `zh-CN.lang`.
|
||||
- For automatic inclusion at build time, add your language file to the `/lang` directory (see 'Adding Languages to Video.js below').
|
||||
|
||||
Adding Languages to Video.js
|
||||
@@ -69,13 +74,14 @@ NOTE: These need to be added after the core Video.js script.
|
||||
"Fullscreen": "Pantalla completa",
|
||||
"Non-Fullscreen": "Pantalla no completa",
|
||||
"Mute": "Silenciar",
|
||||
"Unmuted": "No silenciado",
|
||||
"Unmute": "No silenciado",
|
||||
"Playback Rate": "Velocidad de reproducción",
|
||||
"Subtitles": "Subtítulos",
|
||||
"subtitles off": "Subtítulos desactivados",
|
||||
"Captions": "Subtítulos especiales",
|
||||
"captions off": "Subtítulos especiales desactivados",
|
||||
"Chapters": "Capítulos",
|
||||
"Close Modal Dialog": "Cerca de diálogo modal",
|
||||
"You aborted the video playback": "Ha interrumpido la reproducción del vídeo.",
|
||||
"A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
|
||||
"The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
|
||||
@@ -89,12 +95,12 @@ NOTE: These need to be added after the core Video.js script.
|
||||
3. During a Video.js player instantiation. Adding the languages to the configuration object provided in the `data-setup` attribute.
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js vjs-default-skin"
|
||||
controls preload="auto" width="640" height="264"
|
||||
data-setup='{"languages":{"es":{"Play":"Juego"}}}'>
|
||||
<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' />
|
||||
<video id="example_video_1" class="video-js vjs-default-skin"
|
||||
controls preload="auto" width="640" height="264"
|
||||
data-setup='{"languages":{"es":{"Play":"Juego"}}}'>
|
||||
<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="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
|
||||
|
||||
@@ -110,12 +116,12 @@ Setting Default Language in a Video.js Player
|
||||
During a Video.js player instantiation you can force it to localize to a specific language by including the locale value into the configuration object via the `data-setup` attribute. Valid options listed at the bottom of the page for reference.
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js vjs-default-skin"
|
||||
controls preload="auto" width="640" height="264"
|
||||
data-setup='{"language":"es"}'>
|
||||
<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' />
|
||||
<video id="example_video_1" class="video-js vjs-default-skin"
|
||||
controls preload="auto" width="640" height="264"
|
||||
data-setup='{"language":"es"}'>
|
||||
<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="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
|
||||
|
||||
@@ -125,14 +131,14 @@ During a Video.js player instantiation you can force it to localize to a specifi
|
||||
Determining Player Language
|
||||
---------------------------
|
||||
|
||||
The player language is set to one of the following in descending priority
|
||||
The player language is set to one of the following in descending priority:
|
||||
|
||||
* The language set in setup options as above
|
||||
* The document language (`lang` attribute of the `html` element)
|
||||
* Browser language preference
|
||||
* The language specified in setup options as above
|
||||
* The language specified by the closet element with a `lang` attribute. This could be the player itself or a parent element. Usually the document language is specified on the `html` tag.
|
||||
* Browser language preference (the first language if more than one is configured)
|
||||
* 'en'
|
||||
|
||||
That can be overridden after instantiation with `language('fr')`.
|
||||
The player language can be change after instantiation with `language('fr')`. However localizable text will not be modified by doing this, for best results set the language beforehand.
|
||||
|
||||
Language selection
|
||||
------------------
|
||||
@@ -145,7 +151,7 @@ Localization in Plugins
|
||||
|
||||
When you're developing a plugin, you can also introduce new localized strings. Simply wrap the string with the player's `localize` function:
|
||||
|
||||
```javascript
|
||||
```js
|
||||
var details = '<div class="vjs-errors-details">' + player.localize('Technical details') + '</div>';
|
||||
```
|
||||
|
||||
@@ -153,179 +159,157 @@ Language Codes
|
||||
--------------
|
||||
The following is a list of official language codes.
|
||||
|
||||
**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](../../lang) folder located in the project root.
|
||||
**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the project root.
|
||||
|
||||
<table border="0" cellspacing="5" cellpadding="5">
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
<table>
|
||||
<tr><th>ab<th><td>Abkhazian</td></tr>
|
||||
<tr><th>aa<th><td>Afar</td></tr>
|
||||
<tr><th>af<th><td>Afrikaans</td></tr>
|
||||
<tr><th>sq<th><td>Albanian</td></tr>
|
||||
<tr><th>am<th><td>Amharic</td></tr>
|
||||
<tr><th>ar<th><td>Arabic</td></tr>
|
||||
<tr><th>an<th><td>Aragonese</td></tr>
|
||||
<tr><th>hy<th><td>Armenian</td></tr>
|
||||
<tr><th>as<th><td>Assamese</td></tr>
|
||||
<tr><th>ay<th><td>Aymara</td></tr>
|
||||
<tr><th>az<th><td>Azerbaijani</td></tr>
|
||||
<tr><th>ba<th><td>Bashkir</td></tr>
|
||||
<tr><th>eu<th><td>Basque</td></tr>
|
||||
<tr><th>bn<th><td>Bengali (Bangla)</td></tr>
|
||||
<tr><th>dz<th><td>Bhutani</td></tr>
|
||||
<tr><th>bh<th><td>Bihari</td></tr>
|
||||
<tr><th>bi<th><td>Bislama</td></tr>
|
||||
<tr><th>br<th><td>Breton</td></tr>
|
||||
<tr><th>bg<th><td>Bulgarian</td></tr>
|
||||
<tr><th>my<th><td>Burmese</td></tr>
|
||||
<tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
|
||||
<tr><th>km<th><td>Cambodian</td></tr>
|
||||
<tr><th>ca<th><td>Catalan</td></tr>
|
||||
<tr><th>zh<th><td>Chinese (Simplified)</td></tr>
|
||||
<tr><th>zh<th><td>Chinese (Traditional)</td></tr>
|
||||
<tr><th>co<th><td>Corsican</td></tr>
|
||||
<tr><th>hr<th><td>Croatian</td></tr>
|
||||
<tr><th>cs<th><td>Czech</td></tr>
|
||||
<tr><th>da<th><td>Danish</td></tr>
|
||||
<tr><th>nl<th><td>Dutch</td></tr>
|
||||
<tr><th>en<th><td>English</td></tr>
|
||||
<tr><th>eo<th><td>Esperanto</td></tr>
|
||||
<tr><th>et<th><td>Estonian</td></tr>
|
||||
<tr><th>fo<th><td>Faeroese</td></tr>
|
||||
<tr><th>fa<th><td>Farsi</td></tr>
|
||||
<tr><th>fj<th><td>Fiji</td></tr>
|
||||
<tr><th>fi<th><td>Finnish</td></tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<table>
|
||||
<tr><th>fr<th><td>French</td></tr>
|
||||
<tr><th>fy<th><td>Frisian</td></tr>
|
||||
<tr><th>gl<th><td>Galician</td></tr>
|
||||
<tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
|
||||
<tr><th>gv<th><td>Gaelic (Manx)</td></tr>
|
||||
<tr><th>ka<th><td>Georgian</td></tr>
|
||||
<tr><th>de<th><td>German</td></tr>
|
||||
<tr><th>el<th><td>Greek</td></tr>
|
||||
<tr><th>kl<th><td>Greenlandic</td></tr>
|
||||
<tr><th>gn<th><td>Guarani</td></tr>
|
||||
<tr><th>gu<th><td>Gujarati</td></tr>
|
||||
<tr><th>ht<th><td>Haitian Creole</td></tr>
|
||||
<tr><th>ha<th><td>Hausa</td></tr>
|
||||
<tr><th>he<th><td>Hebrew</td></tr>
|
||||
<tr><th>hi<th><td>Hindi</td></tr>
|
||||
<tr><th>hu<th><td>Hungarian</td></tr>
|
||||
<tr><th>is<th><td>Icelandic</td></tr>
|
||||
<tr><th>io<th><td>Ido</td></tr>
|
||||
<tr><th>id<th><td>Indonesian</td></tr>
|
||||
<tr><th>ia<th><td>Interlingua</td></tr>
|
||||
<tr><th>ie<th><td>Interlingue</td></tr>
|
||||
<tr><th>iu<th><td>Inuktitut</td></tr>
|
||||
<tr><th>ik<th><td>Inupiak</td></tr>
|
||||
<tr><th>ga<th><td>Irish</td></tr>
|
||||
<tr><th>it<th><td>Italian</td></tr>
|
||||
<tr><th>ja<th><td>Japanese</td></tr>
|
||||
<tr><th>jv<th><td>Javanese</td></tr>
|
||||
<tr><th>kn<th><td>Kannada</td></tr>
|
||||
<tr><th>ks<th><td>Kashmiri</td></tr>
|
||||
<tr><th>kk<th><td>Kazakh</td></tr>
|
||||
<tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
|
||||
<tr><th>ky<th><td>Kirghiz</td></tr>
|
||||
<tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
|
||||
<tr><th>ko<th><td>Korean</td></tr>
|
||||
<tr><th>ku<th><td>Kurdish</td></tr>
|
||||
<tr><th>lo<th><td>Laothian</td></tr>
|
||||
<tr><th>la<th><td>Latin</td></tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<table>
|
||||
<tr><th>lv<th><td>Latvian (Lettish)</td></tr>
|
||||
<tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
|
||||
<tr><th>ln<th><td>Lingala</td></tr>
|
||||
<tr><th>lt<th><td>Lithuanian</td></tr>
|
||||
<tr><th>mk<th><td>Macedonian</td></tr>
|
||||
<tr><th>mg<th><td>Malagasy</td></tr>
|
||||
<tr><th>ms<th><td>Malay</td></tr>
|
||||
<tr><th>ml<th><td>Malayalam</td></tr>
|
||||
<tr><th>mt<th><td>Maltese</td></tr>
|
||||
<tr><th>mi<th><td>Maori</td></tr>
|
||||
<tr><th>mr<th><td>Marathi</td></tr>
|
||||
<tr><th>mo<th><td>Moldavian</td></tr>
|
||||
<tr><th>mn<th><td>Mongolian</td></tr>
|
||||
<tr><th>na<th><td>Nauru</td></tr>
|
||||
<tr><th>ne<th><td>Nepali</td></tr>
|
||||
<tr><th>no<th><td>Norwegian</td></tr>
|
||||
<tr><th>oc<th><td>Occitan</td></tr>
|
||||
<tr><th>or<th><td>Oriya</td></tr>
|
||||
<tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
|
||||
<tr><th>ps<th><td>Pashto (Pushto)</td></tr>
|
||||
<tr><th>pl<th><td>Polish</td></tr>
|
||||
<tr><th>pt<th><td>Portuguese</td></tr>
|
||||
<tr><th>pa<th><td>Punjabi</td></tr>
|
||||
<tr><th>qu<th><td>Quechua</td></tr>
|
||||
<tr><th>rm<th><td>Rhaeto-Romance</td></tr>
|
||||
<tr><th>ro<th><td>Romanian</td></tr>
|
||||
<tr><th>ru<th><td>Russian</td></tr>
|
||||
<tr><th>sm<th><td>Samoan</td></tr>
|
||||
<tr><th>sg<th><td>Sangro</td></tr>
|
||||
<tr><th>sa<th><td>Sanskrit</td></tr>
|
||||
<tr><th>sr<th><td>Serbian</td></tr>
|
||||
<tr><th>sh<th><td>Serbo-Croatian</td></tr>
|
||||
<tr><th>st<th><td>Sesotho</td></tr>
|
||||
<tr><th>tn<th><td>Setswana</td></tr>
|
||||
<tr><th>sn<th><td>Shona</td></tr>
|
||||
<tr><th>ii<th><td>Sichuan Yi</td></tr>
|
||||
<tr><th>sd<th><td>Sindhi</td></tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<table>
|
||||
<tr><th>si<th><td>Sinhalese</td></tr>
|
||||
<tr><th>ss<th><td>Siswati</td></tr>
|
||||
<tr><th>sk<th><td>Slovak</td></tr>
|
||||
<tr><th>sl<th><td>Slovenian</td></tr>
|
||||
<tr><th>so<th><td>Somali</td></tr>
|
||||
<tr><th>es<th><td>Spanish</td></tr>
|
||||
<tr><th>su<th><td>Sundanese</td></tr>
|
||||
<tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
|
||||
<tr><th>sv<th><td>Swedish</td></tr>
|
||||
<tr><th>tl<th><td>Tagalog</td></tr>
|
||||
<tr><th>tg<th><td>Tajik</td></tr>
|
||||
<tr><th>ta<th><td>Tamil</td></tr>
|
||||
<tr><th>tt<th><td>Tatar</td></tr>
|
||||
<tr><th>te<th><td>Telugu</td></tr>
|
||||
<tr><th>th<th><td>Thai</td></tr>
|
||||
<tr><th>bo<th><td>Tibetan</td></tr>
|
||||
<tr><th>ti<th><td>Tigrinya</td></tr>
|
||||
<tr><th>to<th><td>Tonga</td></tr>
|
||||
<tr><th>ts<th><td>Tsonga</td></tr>
|
||||
<tr><th>tr<th><td>Turkish</td></tr>
|
||||
<tr><th>tk<th><td>Turkmen</td></tr>
|
||||
<tr><th>tw<th><td>Twi</td></tr>
|
||||
<tr><th>ug<th><td>Uighur</td></tr>
|
||||
<tr><th>uk<th><td>Ukrainian</td></tr>
|
||||
<tr><th>ur<th><td>Urdu</td></tr>
|
||||
<tr><th>uz<th><td>Uzbek</td></tr>
|
||||
<tr><th>vi<th><td>Vietnamese</td></tr>
|
||||
<tr><th>vo<th><td>Volapük</td></tr>
|
||||
<tr><th>wa<th><td>Wallon</td></tr>
|
||||
<tr><th>cy<th><td>Welsh</td></tr>
|
||||
<tr><th>wo<th><td>Wolof</td></tr>
|
||||
<tr><th>xh<th><td>Xhosa</td></tr>
|
||||
<tr><th>yi<th><td>Yiddish</td></tr>
|
||||
<tr><th>yo<th><td>Yoruba</td></tr>
|
||||
<tr><th>zu<th><td>Zulu</td></tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
<table>
|
||||
<tr><th>ab<th><td>Abkhazian</td></tr>
|
||||
<tr><th>aa<th><td>Afar</td></tr>
|
||||
<tr><th>af<th><td>Afrikaans</td></tr>
|
||||
<tr><th>sq<th><td>Albanian</td></tr>
|
||||
<tr><th>am<th><td>Amharic</td></tr>
|
||||
<tr><th>ar<th><td>Arabic</td></tr>
|
||||
<tr><th>an<th><td>Aragonese</td></tr>
|
||||
<tr><th>hy<th><td>Armenian</td></tr>
|
||||
<tr><th>as<th><td>Assamese</td></tr>
|
||||
<tr><th>ay<th><td>Aymara</td></tr>
|
||||
<tr><th>az<th><td>Azerbaijani</td></tr>
|
||||
<tr><th>ba<th><td>Bashkir</td></tr>
|
||||
<tr><th>eu<th><td>Basque</td></tr>
|
||||
<tr><th>bn<th><td>Bengali (Bangla)</td></tr>
|
||||
<tr><th>dz<th><td>Bhutani</td></tr>
|
||||
<tr><th>bh<th><td>Bihari</td></tr>
|
||||
<tr><th>bi<th><td>Bislama</td></tr>
|
||||
<tr><th>br<th><td>Breton</td></tr>
|
||||
<tr><th>bg<th><td>Bulgarian</td></tr>
|
||||
<tr><th>my<th><td>Burmese</td></tr>
|
||||
<tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
|
||||
<tr><th>km<th><td>Cambodian</td></tr>
|
||||
<tr><th>ca<th><td>Catalan</td></tr>
|
||||
<tr><th>zh<th><td>Chinese (Simplified)</td></tr>
|
||||
<tr><th>zh<th><td>Chinese (Traditional)</td></tr>
|
||||
<tr><th>co<th><td>Corsican</td></tr>
|
||||
<tr><th>hr<th><td>Croatian</td></tr>
|
||||
<tr><th>cs<th><td>Czech</td></tr>
|
||||
<tr><th>da<th><td>Danish</td></tr>
|
||||
<tr><th>nl<th><td>Dutch</td></tr>
|
||||
<tr><th>en<th><td>English</td></tr>
|
||||
<tr><th>eo<th><td>Esperanto</td></tr>
|
||||
<tr><th>et<th><td>Estonian</td></tr>
|
||||
<tr><th>fo<th><td>Faeroese</td></tr>
|
||||
<tr><th>fa<th><td>Farsi</td></tr>
|
||||
<tr><th>fj<th><td>Fiji</td></tr>
|
||||
<tr><th>fi<th><td>Finnish</td></tr>
|
||||
<tr><th>fr<th><td>French</td></tr>
|
||||
<tr><th>fy<th><td>Frisian</td></tr>
|
||||
<tr><th>gl<th><td>Galician</td></tr>
|
||||
<tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
|
||||
<tr><th>gv<th><td>Gaelic (Manx)</td></tr>
|
||||
<tr><th>ka<th><td>Georgian</td></tr>
|
||||
<tr><th>de<th><td>German</td></tr>
|
||||
<tr><th>el<th><td>Greek</td></tr>
|
||||
<tr><th>kl<th><td>Greenlandic</td></tr>
|
||||
<tr><th>gn<th><td>Guarani</td></tr>
|
||||
<tr><th>gu<th><td>Gujarati</td></tr>
|
||||
<tr><th>ht<th><td>Haitian Creole</td></tr>
|
||||
<tr><th>ha<th><td>Hausa</td></tr>
|
||||
<tr><th>he<th><td>Hebrew</td></tr>
|
||||
<tr><th>hi<th><td>Hindi</td></tr>
|
||||
<tr><th>hu<th><td>Hungarian</td></tr>
|
||||
<tr><th>is<th><td>Icelandic</td></tr>
|
||||
<tr><th>io<th><td>Ido</td></tr>
|
||||
<tr><th>id<th><td>Indonesian</td></tr>
|
||||
<tr><th>ia<th><td>Interlingua</td></tr>
|
||||
<tr><th>ie<th><td>Interlingue</td></tr>
|
||||
<tr><th>iu<th><td>Inuktitut</td></tr>
|
||||
<tr><th>ik<th><td>Inupiak</td></tr>
|
||||
<tr><th>ga<th><td>Irish</td></tr>
|
||||
<tr><th>it<th><td>Italian</td></tr>
|
||||
<tr><th>ja<th><td>Japanese</td></tr>
|
||||
<tr><th>jv<th><td>Javanese</td></tr>
|
||||
<tr><th>kn<th><td>Kannada</td></tr>
|
||||
<tr><th>ks<th><td>Kashmiri</td></tr>
|
||||
<tr><th>kk<th><td>Kazakh</td></tr>
|
||||
<tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
|
||||
<tr><th>ky<th><td>Kirghiz</td></tr>
|
||||
<tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
|
||||
<tr><th>ko<th><td>Korean</td></tr>
|
||||
<tr><th>ku<th><td>Kurdish</td></tr>
|
||||
<tr><th>lo<th><td>Laothian</td></tr>
|
||||
<tr><th>la<th><td>Latin</td></tr>
|
||||
<tr><th>lv<th><td>Latvian (Lettish)</td></tr>
|
||||
<tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
|
||||
<tr><th>ln<th><td>Lingala</td></tr>
|
||||
<tr><th>lt<th><td>Lithuanian</td></tr>
|
||||
<tr><th>mk<th><td>Macedonian</td></tr>
|
||||
<tr><th>mg<th><td>Malagasy</td></tr>
|
||||
<tr><th>ms<th><td>Malay</td></tr>
|
||||
<tr><th>ml<th><td>Malayalam</td></tr>
|
||||
<tr><th>mt<th><td>Maltese</td></tr>
|
||||
<tr><th>mi<th><td>Maori</td></tr>
|
||||
<tr><th>mr<th><td>Marathi</td></tr>
|
||||
<tr><th>mo<th><td>Moldavian</td></tr>
|
||||
<tr><th>mn<th><td>Mongolian</td></tr>
|
||||
<tr><th>na<th><td>Nauru</td></tr>
|
||||
<tr><th>ne<th><td>Nepali</td></tr>
|
||||
<tr><th>no<th><td>Norwegian</td></tr>
|
||||
<tr><th>oc<th><td>Occitan</td></tr>
|
||||
<tr><th>or<th><td>Oriya</td></tr>
|
||||
<tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
|
||||
<tr><th>ps<th><td>Pashto (Pushto)</td></tr>
|
||||
<tr><th>pl<th><td>Polish</td></tr>
|
||||
<tr><th>pt<th><td>Portuguese</td></tr>
|
||||
<tr><th>pa<th><td>Punjabi</td></tr>
|
||||
<tr><th>qu<th><td>Quechua</td></tr>
|
||||
<tr><th>rm<th><td>Rhaeto-Romance</td></tr>
|
||||
<tr><th>ro<th><td>Romanian</td></tr>
|
||||
<tr><th>ru<th><td>Russian</td></tr>
|
||||
<tr><th>sm<th><td>Samoan</td></tr>
|
||||
<tr><th>sg<th><td>Sangro</td></tr>
|
||||
<tr><th>sa<th><td>Sanskrit</td></tr>
|
||||
<tr><th>sr<th><td>Serbian</td></tr>
|
||||
<tr><th>sh<th><td>Serbo-Croatian</td></tr>
|
||||
<tr><th>st<th><td>Sesotho</td></tr>
|
||||
<tr><th>tn<th><td>Setswana</td></tr>
|
||||
<tr><th>sn<th><td>Shona</td></tr>
|
||||
<tr><th>ii<th><td>Sichuan Yi</td></tr>
|
||||
<tr><th>sd<th><td>Sindhi</td></tr>
|
||||
<tr><th>si<th><td>Sinhalese</td></tr>
|
||||
<tr><th>ss<th><td>Siswati</td></tr>
|
||||
<tr><th>sk<th><td>Slovak</td></tr>
|
||||
<tr><th>sl<th><td>Slovenian</td></tr>
|
||||
<tr><th>so<th><td>Somali</td></tr>
|
||||
<tr><th>es<th><td>Spanish</td></tr>
|
||||
<tr><th>su<th><td>Sundanese</td></tr>
|
||||
<tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
|
||||
<tr><th>sv<th><td>Swedish</td></tr>
|
||||
<tr><th>tl<th><td>Tagalog</td></tr>
|
||||
<tr><th>tg<th><td>Tajik</td></tr>
|
||||
<tr><th>ta<th><td>Tamil</td></tr>
|
||||
<tr><th>tt<th><td>Tatar</td></tr>
|
||||
<tr><th>te<th><td>Telugu</td></tr>
|
||||
<tr><th>th<th><td>Thai</td></tr>
|
||||
<tr><th>bo<th><td>Tibetan</td></tr>
|
||||
<tr><th>ti<th><td>Tigrinya</td></tr>
|
||||
<tr><th>to<th><td>Tonga</td></tr>
|
||||
<tr><th>ts<th><td>Tsonga</td></tr>
|
||||
<tr><th>tr<th><td>Turkish</td></tr>
|
||||
<tr><th>tk<th><td>Turkmen</td></tr>
|
||||
<tr><th>tw<th><td>Twi</td></tr>
|
||||
<tr><th>ug<th><td>Uighur</td></tr>
|
||||
<tr><th>uk<th><td>Ukrainian</td></tr>
|
||||
<tr><th>ur<th><td>Urdu</td></tr>
|
||||
<tr><th>uz<th><td>Uzbek</td></tr>
|
||||
<tr><th>vi<th><td>Vietnamese</td></tr>
|
||||
<tr><th>vo<th><td>Volapük</td></tr>
|
||||
<tr><th>wa<th><td>Wallon</td></tr>
|
||||
<tr><th>cy<th><td>Welsh</td></tr>
|
||||
<tr><th>wo<th><td>Wolof</td></tr>
|
||||
<tr><th>xh<th><td>Xhosa</td></tr>
|
||||
<tr><th>yi<th><td>Yiddish</td></tr>
|
||||
<tr><th>yo<th><td>Yoruba</td></tr>
|
||||
<tr><th>zu<th><td>Zulu</td></tr>
|
||||
</table>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -119,22 +119,7 @@ Component Options
|
||||
You can set the options for any single player component. For instance, if you wanted to remove the `muteToggle` button, which
|
||||
is a child of `controlBar`, you can just set that component to false:
|
||||
|
||||
```javascript
|
||||
var player = videojs('video-id', {
|
||||
children: {
|
||||
controlBar: {
|
||||
children: {
|
||||
muteToggle: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
All the children can start getting a little verbose, so to simplify things, you can also set options for child components directly on the parent options.
|
||||
This is functionally the exact same as the above, for instance.
|
||||
|
||||
```javascript
|
||||
```js
|
||||
var player = videojs('video-id', {
|
||||
controlBar: {
|
||||
muteToggle: false
|
||||
@@ -146,8 +131,8 @@ This also works using the `data-setup` attribute on the video element, just reme
|
||||
notation.
|
||||
|
||||
```html
|
||||
<video ... data-setup='{ "children": { "controlBar": { "children": { "muteToggle": false } } } }'></video>
|
||||
<video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video>
|
||||
```
|
||||
|
||||
The [components guide](components.md) has an excellent breakdown of the structure of a player, you
|
||||
just need to remember to nest child components in a `children` object for each level.
|
||||
The [components guide](./components.md) has an excellent breakdown of the structure of a player, you
|
||||
just need to remember to nest child components in a `children` array for each level.
|
||||
|
||||
@@ -11,19 +11,23 @@ Step 1: Write Some Javascript
|
||||
-----------------------------
|
||||
You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:
|
||||
|
||||
```js
|
||||
function examplePlugin(options) {
|
||||
this.on('play', function(e) {
|
||||
console.log('playback has started!');
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
|
||||
When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](./api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
|
||||
|
||||
Step 2: Registering A Plugin
|
||||
-------------------------------
|
||||
It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:
|
||||
|
||||
```js
|
||||
videojs.plugin('examplePlugin', examplePlugin);
|
||||
```
|
||||
|
||||
From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...
|
||||
|
||||
@@ -31,6 +35,7 @@ Step 3: Using A Plugin
|
||||
----------------------
|
||||
There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:
|
||||
|
||||
```js
|
||||
videojs('vidId', {
|
||||
plugins: {
|
||||
examplePlugin: {
|
||||
@@ -38,10 +43,17 @@ There are two ways to initialize a plugin. If you're creating your video tag dyn
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
|
||||
|
||||
```js
|
||||
var video = videojs('cool-vid');
|
||||
video.examplePlugin({ exampleOption: true });
|
||||
```
|
||||
|
||||
That's it. Head on over to the [Video.js wiki](https://github.com/videojs/video.js/wiki/Plugins) and add your plugin to the list so everyone else can check it out.
|
||||
|
||||
## How should I use the Video.js icons in my plugin?
|
||||
|
||||
If you'd like to use any of the icons available in the [Video.js icon set](http://videojs.github.io/font/), please target them via the CSS class names instead of codepoints. The codepoints *may* change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.
|
||||
|
||||
@@ -6,11 +6,11 @@ Sometimes, you want to remove players after page load (in single page apps or mo
|
||||
Call `.dispose()`
|
||||
-----------------
|
||||
|
||||
To remove the html associated with your videojs player from the page always call the player's [`dispose()`](https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md#dispose) method:
|
||||
To remove the html associated with your videojs player from the page always call the player's [`dispose()`](http://docs.videojs.com/docs/api/player.html#Methodsdispose) method:
|
||||
|
||||
```javascript```
|
||||
```js
|
||||
var oldPlayer = document.getElementById('my-player');
|
||||
videojs(oldPlayer).dispose();
|
||||
videojs(oldPlayer).dispose();
|
||||
```
|
||||
|
||||
This method will:
|
||||
|
||||
+11
-8
@@ -9,15 +9,17 @@ Step 1: Include the Video.js Javascript and CSS files in the head of your page.
|
||||
You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. As of Video.js 5.0, the source is [transpiled from ES2015](http://babeljs.io/) (formerly known as ES6) to [ES5](https://es5.github.io/), but IE8 only supports ES3. In order to continue to support IE8, we've bundled an [ES5 shim and sham](https://github.com/es-shims/es5-shim) together and hosted it on the CDN.
|
||||
|
||||
```html
|
||||
<script src="//vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
|
||||
<script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
|
||||
```
|
||||
|
||||
### CDN Version ###
|
||||
```html
|
||||
<link href="//vjs.zencdn.net/4.12/video-js.min.css" rel="stylesheet">
|
||||
<script src="//vjs.zencdn.net/4.12/video.min.js"></script>
|
||||
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
|
||||
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
|
||||
```
|
||||
|
||||
Alternatively you can always [go here](http://videojs.com/getting-started/) to get the latest URL for videojs CDN.
|
||||
|
||||
We include a stripped down Google Analytics pixel that tracks a random percentage (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global **before** including Video.js:
|
||||
|
||||
```js
|
||||
@@ -39,10 +41,11 @@ $ bower install --save video.js
|
||||
|
||||
### Self Hosted. ###
|
||||
To entirely self-host, you'll need to pull in the font files and let Video.js know where the swf is located. If you simply copy the dist folder or zip file contents into your project everything
|
||||
should Just Work™, but the paths can easily be changed by editing the LESS file and re-building, or by modifying the generated CSS file.
|
||||
should Just Work™, but the paths can easily be changed by editing the LESS file and re-building, or by modifying the generated CSS file. Additionally include the [videojs-vtt.js](https://www.npmjs.com/package/videojs-vtt.js) source, which adds the `WebVTT` object to the global scope.
|
||||
|
||||
```html
|
||||
<link href="//example.com/path/to/video-js.min.css" rel="stylesheet">
|
||||
<script src="//example.com/path/to/videojs-vtt.js"></script>
|
||||
<script src="//example.com/path/to/video.min.js"></script>
|
||||
<script>
|
||||
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
|
||||
@@ -56,7 +59,7 @@ With Video.js you just use an HTML5 video tag to embed a video. Video.js will th
|
||||
|
||||
> Note: The `data-setup` attribute described here should not be used if you use the alternative setup described in the next section.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
@@ -70,9 +73,9 @@ Otherwise include/exclude attributes, settings, sources, and tracks exactly as y
|
||||
controls preload="auto" width="640" height="264"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
data-setup='{"example_option":true}'>
|
||||
<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' />
|
||||
<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>
|
||||
```
|
||||
|
||||
+34
-9
@@ -1,20 +1,41 @@
|
||||
Skins
|
||||
=====
|
||||
|
||||
The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), and by default these styles are added to the dom for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding
|
||||
## Base Skin
|
||||
The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)),
|
||||
and by default these styles are added to the DOM for you!
|
||||
That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding
|
||||
the styles you'd like to change.
|
||||
|
||||
If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = false` before Video.js is loaded. Keep in mind that without these base styles
|
||||
enabled, you'll need to manually include them.
|
||||
If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded.
|
||||
Keep in mind that without these base styles enabled, you'll need to manually include them.
|
||||
|
||||
Video.js does not currently include the base skin automatically yet, so, this option isn't necessary.
|
||||
|
||||
## Default style elements
|
||||
Video.js uses a couple of style elements dynamically, specifically, there's a default styles element as well as a player dimensions style element.
|
||||
They are used to provide extra default flexiblity with styling the player. However, in some cases, like if a user has the HEAD tag managed by React, users do not want this.
|
||||
When `window.VIDEOJS_NO_DYNAMIC_STYLE` is set to `true`, video.js will *not* include these element in the page.
|
||||
This means that default dimensions and configured player dimensions will *not* be applied.
|
||||
For example, the following player will end up having a width and height of 0 when initialized if `window.VIDEOJS_NO_DYNAMIC_STYLE === true`:
|
||||
```html
|
||||
<video width="600" height="300"></video>
|
||||
```
|
||||
|
||||
### `Player#width` and `Player#height`
|
||||
When `VIDEOJS_NO_DYNAMIC_STYLE` is set, `Player#width` and `Player#height` will apply any width and height
|
||||
that is set directly to the video element (or whatever element the current tech uses).
|
||||
|
||||
|
||||
## Icons
|
||||
|
||||
You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](../../sandbox/icons.html.example) in the sandbox directory.
|
||||
You can view all of the icons available in the base theme by renaming and viewing
|
||||
[`icons.html.example`](https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example) in the sandbox directory.
|
||||
|
||||
## Customization
|
||||
|
||||
When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. You should include a new class matching the
|
||||
name of your theme, then just start overriding!
|
||||
When you create a new skin, the easiest way to get started is to simply override the base Video.js theme.
|
||||
You should include a new class matching the name of your theme, then just start overriding!
|
||||
|
||||
```css
|
||||
.vjs-skin-hotdog-stand { color: #FF0000; }
|
||||
@@ -22,8 +43,12 @@ name of your theme, then just start overriding!
|
||||
.vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; }
|
||||
```
|
||||
|
||||
This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), but you can skin any other aspect.
|
||||
Our suggestion is to use a browser such as Firefox and Chrome, and use the developer tools to inspect the different elements and see what you'd like to change and what classes
|
||||
This would take care of the major areas of the skin (play progress, the control bar background, and icon colors),
|
||||
but you can skin any other aspect.
|
||||
Our suggestion is to use a browser such as Firefox and Chrome,
|
||||
and use the developer tools to inspect the different elements and see what you'd like to change and what classes
|
||||
to target when you do so.
|
||||
|
||||
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).
|
||||
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).
|
||||
|
||||
@@ -49,6 +49,40 @@ When adding additional Tech to a video player, make sure to add the supported te
|
||||
techOrder: ["html5", "flash", "other supported tech"]
|
||||
});
|
||||
|
||||
Technology Ordering
|
||||
==================
|
||||
By default Video.js performs "Tech-first" ordering when it searches for a source/tech combination to play videos. This means that if you have two sources and two techs, video.js will try to play each video with the first tech in the `techOrder` option property before moving on to try the next playback technology.
|
||||
|
||||
Tech-first ordering can present a problem if you have a `sourceHandler` that supports both `Html5` and `Flash` techs such as videojs-contrib-hls.
|
||||
|
||||
For example, given the following video element:
|
||||
|
||||
<video data-setup='{"techOrder": ["html5", "flash"]}'>
|
||||
<source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
|
||||
<source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
There is a good chance that the mp4 source will be selected on platforms that do not have media source extensions. Video.js will try all sources against the first playback technology, in this case `Html5`, and select the first source that can play - in this case MP4.
|
||||
|
||||
In "Tech-first" mode, the tests run something like this:
|
||||
Can video.m3u8 play with Html5? No...
|
||||
Can video.mp4 play with Html5? Yes! Use the second source.
|
||||
|
||||
Video.js now provides another method of selecting the source - "Source-first" ordering. In this mode, Video.js tries the first source against every tech in `techOrder` before moving onto the next source.
|
||||
|
||||
With a player setup as follows:
|
||||
|
||||
<video data-setup='{"techOrder": ["html5", "flash"], "sourceOrder": true}'>
|
||||
<source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
|
||||
<source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
The Flash-based HLS support will be tried before falling back to the MP4 source.
|
||||
|
||||
In "Source-first" mode, the tests run something like this:
|
||||
Can video.m3u8 play with Html5? No...
|
||||
Can video.m3u8 play with Flash? Yes! Use the first source.
|
||||
|
||||
Flash Technology
|
||||
==================
|
||||
The Flash playback tech is a part of the default `techOrder`. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
# Text Tracks
|
||||
|
||||
Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
|
||||
|
||||
- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
|
||||
- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
|
||||
- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
|
||||
- **Descriptions**: Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
|
||||
- **Metadata**: Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
|
||||
|
||||
## 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](https://dev.modern.ie/testdrive/demos/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 ]. 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
|
||||
Once you have your WebVTT file created, you can add it to Video.js using the track tag. Put your track tag after all the source elements, and before any fallback content.
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js"
|
||||
controls preload="auto" width="640" height="264"
|
||||
data-setup='{"example_option":true}'>
|
||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
|
||||
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
|
||||
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
|
||||
|
||||
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
|
||||
|
||||
</video>
|
||||
```
|
||||
|
||||
You can also add tracks [programatically](#api).
|
||||
|
||||
## Subtitles from Another Domain
|
||||
Because we're pulling in the text track file via Javascript, the [same-origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) applies. If you'd like to have a player served from one domain,
|
||||
but the text track served from another, you'll need to [enable CORS](http://enable-cors.org/) in order to do so.
|
||||
In addition to enabling CORS on the server serving the text tracks, you will need to add the [`crossorigin` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) to the video element itself. This attribute has two values `anonymous` and `use-credentials`. Most users will want to use `anonymous` with cross-origin tracks.
|
||||
It can be added to the video element like so:
|
||||
```html
|
||||
<video class="video-js" crossorigin="anonymous">
|
||||
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
||||
<track src="http://example.com/oceans.vtt" kind="captions" srclang="en" label="English">
|
||||
</video>
|
||||
```
|
||||
One thing to be aware of is that in this case the video files themselves will *also* needs CORS headers applied to it. This is because some browsers apply the crossorigin attribute to the video source itself and not just the tracks and is considered a [security concern by the spec](https://html.spec.whatwg.org/multipage/embedded-content.html#security-and-privacy-considerations).
|
||||
|
||||
## Track Attributes
|
||||
Additional settings for track tags.
|
||||
|
||||
### kind
|
||||
One of the five track types listed above. Kind defaults to subtitles if no kind is included.
|
||||
|
||||
### label
|
||||
The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.
|
||||
|
||||
### default
|
||||
The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
|
||||
NOTE: For chapters, default is required if you want the chapters menu to show.
|
||||
|
||||
### srclang
|
||||
The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
|
||||
|
||||
## Interacting with Text Tracks
|
||||
### Showing tracks programmatically
|
||||
Some of you would want to turn captions on and off programmatically rather than just forcing the user to do so themselves. This can be easily achieved by modifying the `mode` of the text tracks.
|
||||
The `mode` can be one of three values `disabled`, `hidden`, and `showing`.
|
||||
When a text track's `mode` is `disabled`, the track does not show on screen as the video is playing.
|
||||
When the `mode` is set to `showing`, the track is visible to the viewer and updates while the video is playing.
|
||||
You can change of a particular track like so:
|
||||
```js
|
||||
let tracks = player.textTracks();
|
||||
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
let track = tracks[i];
|
||||
|
||||
// find the captions track that's in english
|
||||
if (track.kind === 'captions' && track.language === 'en') {
|
||||
track.mode = 'showing';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Doing something when a cue becomes active
|
||||
Above, we mentioned that `mode` can also be `hidden`, what this means is that the track will update
|
||||
as the video is playing but it won't be visible to the viewer. This is most useful for `metadata` text tracks.
|
||||
One usecase for metadata text tracks is to have something happen when their cues become active, to do so, you listen to the `cuechange` event on the track. These events fire when the mode is `showing` as well.
|
||||
Here's an example:
|
||||
```js
|
||||
let tracks = player.textTracks();
|
||||
let metadataTrack;
|
||||
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
let track = tracks[i];
|
||||
|
||||
// find the metadata track that's labeled ads
|
||||
if (track.kind === 'captions' && track.label === 'ads') {
|
||||
track.mode = 'hidden';
|
||||
// store it for usage outside of the loop
|
||||
metadataTrack = track;
|
||||
}
|
||||
}
|
||||
|
||||
metadataTrack.addEventListener('cuechange', function() {
|
||||
player.ads.startLinearAdMode();
|
||||
});
|
||||
```
|
||||
|
||||
## Emulated Text Tracks
|
||||
By default, video.js will try and use native text tracks if possible and fall back to emulated text tracks if the native functionality is broken or incomplete or non-existent.
|
||||
The Flash tech will always use the emulated text track functionality.
|
||||
The video.js API and TextTrack objects were modeled after the w3c's specification.
|
||||
video.js uses [Mozilla's vtt.js](https://github.com/mozilla/vtt.js) library to parse and display its emulated text tracks.
|
||||
|
||||
If you wanted to disable native text track functionality and force video.js to use emulated text tracks always, you can supply the `nativeTextTracks` option to the tech like so:
|
||||
```js
|
||||
let player = videojs('myvideo', {
|
||||
html5: {
|
||||
nativeTextTracks: false
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Text Track Settings
|
||||
When using emulated Text Tracks, captions will have an additional item in the menu called "caption settings".
|
||||
This allows the viewer of the player to change some styles of how the captions are displayed on screen.
|
||||
|
||||
If you don't want that, you can disable it by turning off the text track settings component and hiding the menu item like so:
|
||||
```js
|
||||
let player = videojs('myvideo', {
|
||||
// make the text track settings dialog not initialize
|
||||
textTrackSettings: false
|
||||
});
|
||||
```
|
||||
```css
|
||||
/* hide the captions settings item from the captions menu */
|
||||
.vjs-texttrack-settings {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
## Text Track Precedence
|
||||
In general, the Descriptions tracks is of lower precedence than captions and subtitles.
|
||||
What this means for you?
|
||||
* If you are using the `default` attribute, videojs will choose the first track that is marked as `default` and turn it on. If There are multiple tracks marked `default`, it will try and turn on the first `captions` or `subtitles` track *before* any `descriptions` tracks.
|
||||
* This only applied to the emulated captions support, native text tracks behavior will change depending on the browser
|
||||
* If you select a given track from the menu, videojs will turn off all the other tracks of the same kind. This may seem like you can have both subtitles and captions turned on at the same time but unfortuantely, at this time we only support one track being displayed at a time.
|
||||
* This means that for emulated text tracks, we'll choose the first captions or subtitles track that is enabled to display.
|
||||
* When native text tracks are supported, we will still disable the other tracks of the same kind but it is possible that multiple text tracks are shown.
|
||||
* If a `descriptions` track is selected and subsequently a `subtitles` or `captions` track is selected, the `descriptions` track is disabled and its menu button is also disabled.
|
||||
* When enabling a track programmatically, there's not much checking that videojs does.
|
||||
* For emulated text tracks, when it's time to display the captions, video.js would choose the first track that's showing, again choosing `subtitles` or `captions` over `descriptions`, if necessary.
|
||||
* For native text tracks, this behavior depends on the browser. Some browsers will let you have multiple text tracks but others will disable all other tracks when a new one is selected.
|
||||
|
||||
## API
|
||||
|
||||
### `player.textTracks() -> TextTrackList`
|
||||
This is the main interface into the text tracks of the player.
|
||||
It return a TextTrackList which lists all the tracks on the player.
|
||||
|
||||
### `player.remoteTextTracks() -> TextTrackList`
|
||||
This is a helper method to get a list of all the tracks that were created from `track` elements or that were added to the player by the `addRemoteTextTrack` method. All these tracks are removeable from the player, where-as not all tracks from `player.textTracks()` are necessarily removeable.
|
||||
|
||||
### `player.remoteTextTrackEls() -> HTMLTrackElementList`
|
||||
Another helper method, this is a list of all the `track` elements associated with the player. Both emulated or otherwise.
|
||||
|
||||
### `player.addTextTrack(String kind, [String label [, String language]]) -> TextTrack`
|
||||
This is based on the [w3c spec API](http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack) and when given a kind and an optional label and language, will create a new text track for you to use.
|
||||
This method is intended for purely programmatic usage of tracks and has one important limitation:
|
||||
tracks created using this method *cannot* be removed. The native `addTextTrack` does not have a corresponding `removeTextTrack`, so, we actually discourage the usage of this method.
|
||||
|
||||
### `player.addRemoteTextTrack(Object options) -> HTMLTrackElement`
|
||||
This function takes an options object that looks pretty similar to the track element and returns a HTMLTrackElement.
|
||||
This object has a `track` property on it which is the actual TextTrack object.
|
||||
This `TextTrack` object is equivalent to the one that can be returned from `player.addTextTrack` with the added bonus that it can be removed from the player.
|
||||
Internally, video.js will either add a `<track>` element for you, or emulate that depending on whether native text tracks are supported or not.
|
||||
The options available are:
|
||||
* `kind`
|
||||
* `label`
|
||||
* `language` (also `srclang`)
|
||||
* `id`
|
||||
* `src`
|
||||
|
||||
### `player.removeRemoteTextTrack(HTMLTrackElement|TextTrack)`
|
||||
This function takes either an HTMLTrackElement or a TextTrack object and removes it from the player.
|
||||
+5
-229
@@ -1,230 +1,6 @@
|
||||
Tracks
|
||||
======
|
||||
# Tracks
|
||||
There are currently three types of tracks
|
||||
|
||||
Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
|
||||
|
||||
- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
|
||||
- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
|
||||
- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
|
||||
- **Descriptions** (not supported yet): Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
|
||||
- **Metadata** (not supported yet): Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
------------------
|
||||
Once you have your WebVTT file created, you can add it to Video.js using the track tag. Put your track tag after all the source elements, and before any fallback content.
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js vjs-default-skin"
|
||||
controls preload="auto" width="640" height="264"
|
||||
data-setup='{"example_option":true}'>
|
||||
<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="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
|
||||
|
||||
</video>
|
||||
```
|
||||
|
||||
Subtitles from Another Domain
|
||||
-----------------------------
|
||||
Because we're pulling in the text track file via Javascript, the [same-origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) applies. If you'd like to have a player served from one domain,
|
||||
but the text track served from another, you'll need to [enable CORS](http://enable-cors.org/) in order to do so.
|
||||
|
||||
Track Attributes
|
||||
----------------
|
||||
Additional settings for track tags.
|
||||
|
||||
### kind
|
||||
One of the five track types listed above. Kind defaults to subtitles if no kind is included.
|
||||
|
||||
### label
|
||||
The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.
|
||||
|
||||
### default
|
||||
The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
|
||||
NOTE: For chapters, default is required if you want the chapters menu to show.
|
||||
|
||||
### srclang
|
||||
The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. Here's a list of available language codes.
|
||||
|
||||
<table border="0" cellspacing="5" cellpadding="5">
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
<table>
|
||||
<tr><th>ab<th><td>Abkhazian</td></tr>
|
||||
<tr><th>aa<th><td>Afar</td></tr>
|
||||
<tr><th>af<th><td>Afrikaans</td></tr>
|
||||
<tr><th>sq<th><td>Albanian</td></tr>
|
||||
<tr><th>am<th><td>Amharic</td></tr>
|
||||
<tr><th>ar<th><td>Arabic</td></tr>
|
||||
<tr><th>an<th><td>Aragonese</td></tr>
|
||||
<tr><th>hy<th><td>Armenian</td></tr>
|
||||
<tr><th>as<th><td>Assamese</td></tr>
|
||||
<tr><th>ay<th><td>Aymara</td></tr>
|
||||
<tr><th>az<th><td>Azerbaijani</td></tr>
|
||||
<tr><th>ba<th><td>Bashkir</td></tr>
|
||||
<tr><th>eu<th><td>Basque</td></tr>
|
||||
<tr><th>bn<th><td>Bengali (Bangla)</td></tr>
|
||||
<tr><th>dz<th><td>Bhutani</td></tr>
|
||||
<tr><th>bh<th><td>Bihari</td></tr>
|
||||
<tr><th>bi<th><td>Bislama</td></tr>
|
||||
<tr><th>br<th><td>Breton</td></tr>
|
||||
<tr><th>bg<th><td>Bulgarian</td></tr>
|
||||
<tr><th>my<th><td>Burmese</td></tr>
|
||||
<tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
|
||||
<tr><th>km<th><td>Cambodian</td></tr>
|
||||
<tr><th>ca<th><td>Catalan</td></tr>
|
||||
<tr><th>zh<th><td>Chinese (Simplified)</td></tr>
|
||||
<tr><th>zh<th><td>Chinese (Traditional)</td></tr>
|
||||
<tr><th>co<th><td>Corsican</td></tr>
|
||||
<tr><th>hr<th><td>Croatian</td></tr>
|
||||
<tr><th>cs<th><td>Czech</td></tr>
|
||||
<tr><th>da<th><td>Danish</td></tr>
|
||||
<tr><th>nl<th><td>Dutch</td></tr>
|
||||
<tr><th>en<th><td>English</td></tr>
|
||||
<tr><th>eo<th><td>Esperanto</td></tr>
|
||||
<tr><th>et<th><td>Estonian</td></tr>
|
||||
<tr><th>fo<th><td>Faeroese</td></tr>
|
||||
<tr><th>fa<th><td>Farsi</td></tr>
|
||||
<tr><th>fj<th><td>Fiji</td></tr>
|
||||
<tr><th>fi<th><td>Finnish</td></tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<table>
|
||||
<tr><th>fr<th><td>French</td></tr>
|
||||
<tr><th>fy<th><td>Frisian</td></tr>
|
||||
<tr><th>gl<th><td>Galician</td></tr>
|
||||
<tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
|
||||
<tr><th>gv<th><td>Gaelic (Manx)</td></tr>
|
||||
<tr><th>ka<th><td>Georgian</td></tr>
|
||||
<tr><th>de<th><td>German</td></tr>
|
||||
<tr><th>el<th><td>Greek</td></tr>
|
||||
<tr><th>kl<th><td>Greenlandic</td></tr>
|
||||
<tr><th>gn<th><td>Guarani</td></tr>
|
||||
<tr><th>gu<th><td>Gujarati</td></tr>
|
||||
<tr><th>ht<th><td>Haitian Creole</td></tr>
|
||||
<tr><th>ha<th><td>Hausa</td></tr>
|
||||
<tr><th>he<th><td>Hebrew</td></tr>
|
||||
<tr><th>hi<th><td>Hindi</td></tr>
|
||||
<tr><th>hu<th><td>Hungarian</td></tr>
|
||||
<tr><th>is<th><td>Icelandic</td></tr>
|
||||
<tr><th>io<th><td>Ido</td></tr>
|
||||
<tr><th>id<th><td>Indonesian</td></tr>
|
||||
<tr><th>ia<th><td>Interlingua</td></tr>
|
||||
<tr><th>ie<th><td>Interlingue</td></tr>
|
||||
<tr><th>iu<th><td>Inuktitut</td></tr>
|
||||
<tr><th>ik<th><td>Inupiak</td></tr>
|
||||
<tr><th>ga<th><td>Irish</td></tr>
|
||||
<tr><th>it<th><td>Italian</td></tr>
|
||||
<tr><th>ja<th><td>Japanese</td></tr>
|
||||
<tr><th>jv<th><td>Javanese</td></tr>
|
||||
<tr><th>kn<th><td>Kannada</td></tr>
|
||||
<tr><th>ks<th><td>Kashmiri</td></tr>
|
||||
<tr><th>kk<th><td>Kazakh</td></tr>
|
||||
<tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
|
||||
<tr><th>ky<th><td>Kirghiz</td></tr>
|
||||
<tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
|
||||
<tr><th>ko<th><td>Korean</td></tr>
|
||||
<tr><th>ku<th><td>Kurdish</td></tr>
|
||||
<tr><th>lo<th><td>Laothian</td></tr>
|
||||
<tr><th>la<th><td>Latin</td></tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<table>
|
||||
<tr><th>lv<th><td>Latvian (Lettish)</td></tr>
|
||||
<tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
|
||||
<tr><th>ln<th><td>Lingala</td></tr>
|
||||
<tr><th>lt<th><td>Lithuanian</td></tr>
|
||||
<tr><th>mk<th><td>Macedonian</td></tr>
|
||||
<tr><th>mg<th><td>Malagasy</td></tr>
|
||||
<tr><th>ms<th><td>Malay</td></tr>
|
||||
<tr><th>ml<th><td>Malayalam</td></tr>
|
||||
<tr><th>mt<th><td>Maltese</td></tr>
|
||||
<tr><th>mi<th><td>Maori</td></tr>
|
||||
<tr><th>mr<th><td>Marathi</td></tr>
|
||||
<tr><th>mo<th><td>Moldavian</td></tr>
|
||||
<tr><th>mn<th><td>Mongolian</td></tr>
|
||||
<tr><th>na<th><td>Nauru</td></tr>
|
||||
<tr><th>ne<th><td>Nepali</td></tr>
|
||||
<tr><th>no<th><td>Norwegian</td></tr>
|
||||
<tr><th>oc<th><td>Occitan</td></tr>
|
||||
<tr><th>or<th><td>Oriya</td></tr>
|
||||
<tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
|
||||
<tr><th>ps<th><td>Pashto (Pushto)</td></tr>
|
||||
<tr><th>pl<th><td>Polish</td></tr>
|
||||
<tr><th>pt<th><td>Portuguese</td></tr>
|
||||
<tr><th>pa<th><td>Punjabi</td></tr>
|
||||
<tr><th>qu<th><td>Quechua</td></tr>
|
||||
<tr><th>rm<th><td>Rhaeto-Romance</td></tr>
|
||||
<tr><th>ro<th><td>Romanian</td></tr>
|
||||
<tr><th>ru<th><td>Russian</td></tr>
|
||||
<tr><th>sm<th><td>Samoan</td></tr>
|
||||
<tr><th>sg<th><td>Sangro</td></tr>
|
||||
<tr><th>sa<th><td>Sanskrit</td></tr>
|
||||
<tr><th>sr<th><td>Serbian</td></tr>
|
||||
<tr><th>sh<th><td>Serbo-Croatian</td></tr>
|
||||
<tr><th>st<th><td>Sesotho</td></tr>
|
||||
<tr><th>tn<th><td>Setswana</td></tr>
|
||||
<tr><th>sn<th><td>Shona</td></tr>
|
||||
<tr><th>ii<th><td>Sichuan Yi</td></tr>
|
||||
<tr><th>sd<th><td>Sindhi</td></tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<table>
|
||||
<tr><th>si<th><td>Sinhalese</td></tr>
|
||||
<tr><th>ss<th><td>Siswati</td></tr>
|
||||
<tr><th>sk<th><td>Slovak</td></tr>
|
||||
<tr><th>sl<th><td>Slovenian</td></tr>
|
||||
<tr><th>so<th><td>Somali</td></tr>
|
||||
<tr><th>es<th><td>Spanish</td></tr>
|
||||
<tr><th>su<th><td>Sundanese</td></tr>
|
||||
<tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
|
||||
<tr><th>sv<th><td>Swedish</td></tr>
|
||||
<tr><th>tl<th><td>Tagalog</td></tr>
|
||||
<tr><th>tg<th><td>Tajik</td></tr>
|
||||
<tr><th>ta<th><td>Tamil</td></tr>
|
||||
<tr><th>tt<th><td>Tatar</td></tr>
|
||||
<tr><th>te<th><td>Telugu</td></tr>
|
||||
<tr><th>th<th><td>Thai</td></tr>
|
||||
<tr><th>bo<th><td>Tibetan</td></tr>
|
||||
<tr><th>ti<th><td>Tigrinya</td></tr>
|
||||
<tr><th>to<th><td>Tonga</td></tr>
|
||||
<tr><th>ts<th><td>Tsonga</td></tr>
|
||||
<tr><th>tr<th><td>Turkish</td></tr>
|
||||
<tr><th>tk<th><td>Turkmen</td></tr>
|
||||
<tr><th>tw<th><td>Twi</td></tr>
|
||||
<tr><th>ug<th><td>Uighur</td></tr>
|
||||
<tr><th>uk<th><td>Ukrainian</td></tr>
|
||||
<tr><th>ur<th><td>Urdu</td></tr>
|
||||
<tr><th>uz<th><td>Uzbek</td></tr>
|
||||
<tr><th>vi<th><td>Vietnamese</td></tr>
|
||||
<tr><th>vo<th><td>Volapük</td></tr>
|
||||
<tr><th>wa<th><td>Wallon</td></tr>
|
||||
<tr><th>cy<th><td>Welsh</td></tr>
|
||||
<tr><th>wo<th><td>Wolof</td></tr>
|
||||
<tr><th>xh<th><td>Xhosa</td></tr>
|
||||
<tr><th>yi<th><td>Yiddish</td></tr>
|
||||
<tr><th>yo<th><td>Yoruba</td></tr>
|
||||
<tr><th>zu<th><td>Zulu</td></tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
* [AudioTracks](./audio-tracks.md) - allows the selection of alternative AudioTracks for a video
|
||||
* [VideoTracks](./video-tracks.md) - allows the selection of an alternative VideoTrack for a video
|
||||
* [TextTracks](./text-tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
# Video Tracks
|
||||
|
||||
Video Tracks are a function of HTML5 video for providing a selection of alternative video tracks to the user, so that they can change type of video they want to watch. Video.js makes video tracks work across all browsers. There are currently six types of tracks:
|
||||
|
||||
- **Alternative**: an alternative video representation of the main video track
|
||||
- **Captions**: The main video track with burned in captions
|
||||
- **Main**: the main video track
|
||||
- **Sign**: the main video track with added sign language overlay
|
||||
- **Subtitles**: the main video track with burned in subtitles
|
||||
- **Commentary**: the main video track with burned in commentary
|
||||
|
||||
## Missing Funtionality
|
||||
- It is currently impossible to add VideoTracks in a non-programtic way
|
||||
- Literal switching of VideoTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation
|
||||
- There is currently no UI implementation of VideoTracks
|
||||
|
||||
## Adding to Video.js
|
||||
|
||||
> Right now adding video tracks in the HTML is unsupported. Video Tracks must be added programatically.
|
||||
|
||||
You must add video tracks [programatically](#api) for the time being.
|
||||
|
||||
## Attributes
|
||||
Video Track propertites and settings
|
||||
|
||||
### kind
|
||||
One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.
|
||||
|
||||
### label
|
||||
The label for the track that will be show to the user, for example in a menu that list the different languages available for video tracks.
|
||||
|
||||
### language
|
||||
The two-letter code (valid BCP 47 language tag) for the language of the video track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
|
||||
|
||||
### selected
|
||||
If this track should be playing or not. Trying to select more than one track will cause other tracks to be deselected.
|
||||
|
||||
## Interacting with Video Tracks
|
||||
### Doing something when a track becomes enabled
|
||||
When a new track is enabled (other than the main track) an event is fired on the `VideoTrackList` called `change` you can listen to that event and do something with it.
|
||||
Here's an example:
|
||||
```js
|
||||
// get the current players VideoTrackList object
|
||||
let tracks = player.videoTracks();
|
||||
|
||||
// listen to the change event
|
||||
tracks.addEventListener('change', function() {
|
||||
// get the currently selected track
|
||||
let index = tracks.selectedIndex;
|
||||
let track = tracks[index];
|
||||
|
||||
// print the currently selected track
|
||||
console.log(track.label);
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### `player.videoTracks() -> VideoTrackList`
|
||||
This is the main interface into the video tracks of the player.
|
||||
It returns an VideoTrackList which is an array like object that contains all the `VideoTrack` on the player.
|
||||
|
||||
### `player.videoTracks().addTrack(VideoTrack)`
|
||||
Add an existing VideoTrack to the players internal list of VideoTracks.
|
||||
|
||||
### `player.videoTracks().removeTrack(VideoTrack)`
|
||||
Remove a track from the VideoTrackList currently on the player. if no track exists this will do nothing.
|
||||
|
||||
### `player.videoTracks().selectedIndex`
|
||||
The current index for the selected track
|
||||
+1
-1
@@ -14,7 +14,7 @@ There are two categories of docs: [Guides](./guides/) and [API docs](./api/). Gu
|
||||
|
||||
* [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.
|
||||
|
||||
* [Tracks](./guides/tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
|
||||
* [Tracks](./guides/tracks.md) - Tracks are used for displaying text information over a video, selecting different audio tracks for a video, or selected different video tracks for a video.
|
||||
|
||||
### Customizing
|
||||
|
||||
|
||||
+10
-2
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "ملء الشاشة",
|
||||
"Non-Fullscreen": "غير ملء الشاشة",
|
||||
"Mute": "صامت",
|
||||
"Unmuted": "غير الصامت",
|
||||
"Unmute": "غير الصامت",
|
||||
"Playback Rate": "معدل التشغيل",
|
||||
"Subtitles": "الترجمة",
|
||||
"subtitles off": "ايقاف الترجمة",
|
||||
@@ -22,5 +22,13 @@
|
||||
"A network error caused the media download to fail part-way.": "تسبب خطأ في الشبكة بفشل تحميل الفيديو بالكامل.",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "لا يمكن تحميل الفيديو بسبب فشل في الخادم أو الشبكة ، أو فشل بسبب عدم امكانية قراءة تنسيق الفيديو.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "تم ايقاف تشغيل الفيديو بسبب مشكلة فساد أو لأن الفيديو المستخدم يستخدم ميزات غير مدعومة من متصفحك.",
|
||||
"No compatible source was found for this media.": "فشل العثور على أي مصدر متوافق مع هذا الفيديو."
|
||||
"No compatible source was found for this media.": "فشل العثور على أي مصدر متوافق مع هذا الفيديو.",
|
||||
"Play Video": "تشغيل الفيديو",
|
||||
"Close": "أغلق",
|
||||
"Modal Window": "نافذة مشروطة",
|
||||
"This is a modal window": "هذه نافذة مشروطة",
|
||||
"This modal can be closed by pressing the Escape key or activating the close button.": "يمكن غلق هذه النافذة المشروطة عن طريق الضغط على زر الخروج أو تفعيل زر الإغلاق",
|
||||
", opens captions settings dialog": ", تفتح نافذة خيارات التعليقات",
|
||||
", opens subtitles settings dialog": ", تفتح نافذة خيارات الترجمة",
|
||||
", selected": ", مختار"
|
||||
}
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Puni ekran",
|
||||
"Non-Fullscreen": "Mali ekran",
|
||||
"Mute": "Prigušen",
|
||||
"Unmuted": "Ne-prigušen",
|
||||
"Unmute": "Ne-prigušen",
|
||||
"Playback Rate": "Stopa reprodukcije",
|
||||
"Subtitles": "Podnaslov",
|
||||
"subtitles off": "Podnaslov deaktiviran",
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Цял екран",
|
||||
"Non-Fullscreen": "Спиране на цял екран",
|
||||
"Mute": "Без звук",
|
||||
"Unmuted": "Със звук",
|
||||
"Unmute": "Със звук",
|
||||
"Playback Rate": "Скорост на възпроизвеждане",
|
||||
"Subtitles": "Субтитри",
|
||||
"subtitles off": "Спряни субтитри",
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Pantalla completa",
|
||||
"Non-Fullscreen": "Pantalla no completa",
|
||||
"Mute": "Silencia",
|
||||
"Unmuted": "Amb so",
|
||||
"Unmute": "Amb so",
|
||||
"Playback Rate": "Velocitat de reproducció",
|
||||
"Subtitles": "Subtítols",
|
||||
"subtitles off": "Subtítols desactivats",
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Celá obrazovka",
|
||||
"Non-Fullscreen": "Zmenšená obrazovka",
|
||||
"Mute": "Ztlumit zvuk",
|
||||
"Unmuted": "Přehrát zvuk",
|
||||
"Unmute": "Přehrát zvuk",
|
||||
"Playback Rate": "Rychlost přehrávání",
|
||||
"Subtitles": "Titulky",
|
||||
"subtitles off": "Titulky vypnuty",
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Fuldskærm",
|
||||
"Non-Fullscreen": "Luk fuldskærm",
|
||||
"Mute": "Uden lyd",
|
||||
"Unmuted": "Med lyd",
|
||||
"Unmute": "Med lyd",
|
||||
"Playback Rate": "Afspilningsrate",
|
||||
"Subtitles": "Undertekster",
|
||||
"subtitles off": "Uden undertekster",
|
||||
|
||||
+10
-2
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Vollbild",
|
||||
"Non-Fullscreen": "Kein Vollbild",
|
||||
"Mute": "Ton aus",
|
||||
"Unmuted": "Ton ein",
|
||||
"Unmute": "Ton ein",
|
||||
"Playback Rate": "Wiedergabegeschwindigkeit",
|
||||
"Subtitles": "Untertitel",
|
||||
"subtitles off": "Untertitel aus",
|
||||
@@ -22,5 +22,13 @@
|
||||
"A network error caused the media download to fail part-way.": "Der Videodownload ist aufgrund eines Netzwerkfehlers fehlgeschlagen.",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Die Videowiedergabe wurde entweder wegen eines Problems mit einem beschädigten Video oder wegen verwendeten Funktionen, die vom Browser nicht unterstützt werden, abgebrochen.",
|
||||
"No compatible source was found for this media.": "Für dieses Video wurde keine kompatible Quelle gefunden."
|
||||
"No compatible source was found for this media.": "Für dieses Video wurde keine kompatible Quelle gefunden.",
|
||||
"Play Video": "Video abspielen",
|
||||
"Close": "Schließen",
|
||||
"Modal Window": "Modales Fenster",
|
||||
"This is a modal window": "Dies ist ein modales Fenster",
|
||||
"This modal can be closed by pressing the Escape key or activating the close button.": "Durch Drücken der Esc-Taste bzw. Betätigung der Schaltfläche \"Schließen\" wird dieses modale Fenster geschlossen.",
|
||||
", opens captions settings dialog": ", öffnet Einstellungen für Untertitel",
|
||||
", opens subtitles settings dialog": ", öffnet Einstellungen für Untertitel",
|
||||
", selected": " (ausgewählt)"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"Play": "Aναπαραγωγή",
|
||||
"Pause": "Παύση",
|
||||
"Current Time": "Τρέχων χρόνος",
|
||||
"Duration Time": "Συνολικός χρόνος",
|
||||
"Remaining Time": "Υπολοιπόμενος χρόνος",
|
||||
"Stream Type": "Τύπος ροής",
|
||||
"LIVE": "ΖΩΝΤΑΝΑ",
|
||||
"Loaded": "Φόρτωση επιτυχής",
|
||||
"Progress": "Πρόοδος",
|
||||
"Fullscreen": "Πλήρης οθόνη",
|
||||
"Non-Fullscreen": "Έξοδος από πλήρη οθόνη",
|
||||
"Mute": "Σίγαση",
|
||||
"Unmute": "Kατάργηση σίγασης",
|
||||
"Playback Rate": "Ρυθμός αναπαραγωγής",
|
||||
"Subtitles": "Υπότιτλοι",
|
||||
"subtitles off": "απόκρυψη υπότιτλων",
|
||||
"Captions": "Λεζάντες",
|
||||
"captions off": "απόκρυψη λεζάντων",
|
||||
"Chapters": "Κεφάλαια",
|
||||
"You aborted the media playback": "Ακυρώσατε την αναπαραγωγή",
|
||||
"A network error caused the media download to fail part-way.": "Ένα σφάλμα δικτύου προκάλεσε την αποτυχία μεταφόρτωσης του αρχείου προς αναπαραγωγή.",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "Το αρχείο προς αναπαραγωγή δεν ήταν δυνατό να φορτωθεί είτε γιατί υπήρξε σφάλμα στον διακομιστή ή το δίκτυο, είτε γιατί ο τύπος του αρχείου δεν υποστηρίζεται.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Η αναπαραγωγή ακυρώθηκε είτε λόγω κατεστραμμένου αρχείου, είτε γιατί το αρχείο απαιτεί λειτουργίες που δεν υποστηρίζονται από το πρόγραμμα περιήγησης που χρησιμοποιείτε.",
|
||||
"No compatible source was found for this media.": "Δεν βρέθηκε συμβατή πηγή αναπαραγωγής για το συγκεκριμένο αρχείο.",
|
||||
"Play video": "Αναπαραγωγή βίντεο",
|
||||
"Close": "Κλείσιμο",
|
||||
"Modal Window": "Aναδυόμενο παράθυρο",
|
||||
"This is a modal window": "Το παρών είναι ένα αναδυόμενο παράθυρο",
|
||||
"This modal can be closed by pressing the Escape key or activating the close button.": "Αυτό το παράθυρο μπορεί να εξαφανιστεί πατώντας το πλήκτρο Escape ή πατώντας το κουμπί κλεισίματος.",
|
||||
", opens captions settings dialog": ", εμφανίζει τις ρυθμίσεις για τις λεζάντες",
|
||||
", opens subtitles settings dialog": ", εμφανίζει τις ρυθμίσεις για τους υπότιτλους",
|
||||
", selected": ", επιλεγμένο"
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"Play": "Play",
|
||||
"Pause": "Pause",
|
||||
"Current Time": "Current Time",
|
||||
"Duration Time": "Duration Time",
|
||||
"Remaining Time": "Remaining Time",
|
||||
"Stream Type": "Stream Type",
|
||||
"LIVE": "LIVE",
|
||||
"Loaded": "Loaded",
|
||||
"Progress": "Progress",
|
||||
"Fullscreen": "Fullscreen",
|
||||
"Non-Fullscreen": "Non-Fullscreen",
|
||||
"Mute": "Mute",
|
||||
"Unmute": "Unmute",
|
||||
"Playback Rate": "Playback Rate",
|
||||
"Subtitles": "Subtitles",
|
||||
"subtitles off": "subtitles off",
|
||||
"Captions": "Captions",
|
||||
"captions off": "captions off",
|
||||
"Chapters": "Chapters",
|
||||
"Close Modal Dialog": "Close Modal Dialog",
|
||||
"Descriptions": "Descriptions",
|
||||
"descriptions off": "descriptions off",
|
||||
"Audio Track": "Audio Track",
|
||||
"You aborted the media playback": "You aborted the media playback",
|
||||
"A network error caused the media download to fail part-way.": "A network error caused the media download to fail part-way.",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "The media could not be loaded, either because the server or network failed or because the format is not supported.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",
|
||||
"No compatible source was found for this media.": "No compatible source was found for this media.",
|
||||
"Play Video": "Play Video",
|
||||
"Close": "Close",
|
||||
"Modal Window": "Modal Window",
|
||||
"This is a modal window": "This is a modal window",
|
||||
"This modal can be closed by pressing the Escape key or activating the close button.": "This modal can be closed by pressing the Escape key or activating the close button.",
|
||||
", opens captions settings dialog": ", opens captions settings dialog",
|
||||
", opens subtitles settings dialog": ", opens subtitles settings dialog",
|
||||
", opens descriptions settings dialog": ", opens descriptions settings dialog",
|
||||
", selected": ", selected"
|
||||
}
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Pantalla completa",
|
||||
"Non-Fullscreen": "Pantalla no completa",
|
||||
"Mute": "Silenciar",
|
||||
"Unmuted": "No silenciado",
|
||||
"Unmute": "No silenciado",
|
||||
"Playback Rate": "Velocidad de reproducción",
|
||||
"Subtitles": "Subtítulos",
|
||||
"subtitles off": "Subtítulos desactivados",
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"Play": "پخش",
|
||||
"Pause": "وقفه",
|
||||
"Current Time": "زمان کنونی",
|
||||
"Duration Time": "مدت زمان",
|
||||
"Remaining Time": "زمان باقیمانده",
|
||||
"Stream Type": "نوع استریم",
|
||||
"LIVE": "زنده",
|
||||
"Loaded": "فراخوانی شده",
|
||||
"Progress": "پیشرفت",
|
||||
"Fullscreen": "تمام صفحه",
|
||||
"Non-Fullscreen": "نمایش عادی",
|
||||
"Mute": "بی صدا",
|
||||
"Unmute": "بهمراه صدا",
|
||||
"Playback Rate": "سرعت پخش",
|
||||
"Subtitles": "زیرنویس",
|
||||
"subtitles off": "بدون زیرنویس",
|
||||
"Captions": "عنوان",
|
||||
"captions off": "بدون عنوان",
|
||||
"Chapters": "فصل",
|
||||
"You aborted the media playback": "شما پخش را متوقف کردید.",
|
||||
"A network error caused the media download to fail part-way.": "مشکل در دریافت ویدئو ...",
|
||||
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "فرمت پشتیبانی نمیشود یا خطایی روی داده است.",
|
||||
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "مشکل در دریافت ویدئو ...",
|
||||
"No compatible source was found for this media.": "هیچ ورودی ای برای این رسانه شناسایی نشد."
|
||||
}
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Koko näyttö",
|
||||
"Non-Fullscreen": "Koko näyttö pois",
|
||||
"Mute": "Ääni pois",
|
||||
"Unmuted": "Ääni päällä",
|
||||
"Unmute": "Ääni päällä",
|
||||
"Playback Rate": "Toistonopeus",
|
||||
"Subtitles": "Tekstitys",
|
||||
"subtitles off": "Tekstitys pois",
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Plein écran",
|
||||
"Non-Fullscreen": "Fenêtré",
|
||||
"Mute": "Sourdine",
|
||||
"Unmuted": "Son activé",
|
||||
"Unmute": "Son activé",
|
||||
"Playback Rate": "Vitesse de lecture",
|
||||
"Subtitles": "Sous-titres",
|
||||
"subtitles off": "Sous-titres désactivés",
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
"Fullscreen": "Puni ekran",
|
||||
"Non-Fullscreen": "Mali ekran",
|
||||
"Mute": "Prigušen",
|
||||
"Unmuted": "Ne-prigušen",
|
||||
"Unmute": "Ne-prigušen",
|
||||
"Playback Rate": "Stopa reprodukcije",
|
||||
"Subtitles": "Podnaslov",
|
||||
"subtitles off": "Podnaslov deaktiviran",
|
||||
|
||||
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