Comparar commits
1160 Commits
| Autor | SHA1 | Data | |
|---|---|---|---|
| 7aefee5d7d | |||
| c1e623bed7 | |||
| 333db84510 | |||
| 9c282811e1 | |||
| d68f5a93a5 | |||
| 1dd8a15655 | |||
| 4fe74d52a9 | |||
| f135b97ce0 | |||
| 7be94c3882 | |||
| 4f66e09595 | |||
| 1bb2c7ed57 | |||
| 1e781d14df | |||
| ee9a18d5ac | |||
| ce0c4b12d2 | |||
| 9e5dce5c14 | |||
| 88dca0a2e2 | |||
| 8aa2eb4719 | |||
| ecaf748e4f | |||
| c9cad9ca1e | |||
| 956aaa0425 | |||
| e062dec423 | |||
| 8b720ce45a | |||
| 5ab2504e90 | |||
| 310a0630c9 | |||
| 468b07c651 | |||
| 12c830049e | |||
| fe4c477da6 | |||
| 24125bbb63 | |||
| e73bb869ce | |||
| 5c907e1ce2 | |||
| 8c59405d86 | |||
| 7ade43d91d | |||
| 49656ab013 | |||
| 6f83d0b00e | |||
| 71ba5bb062 | |||
| 11e7028c25 | |||
| 7926c2d9a6 | |||
| 2b1291816f | |||
| 4d9d06e1c9 | |||
| 0fc76451f9 | |||
| 3cb41c7786 | |||
| 2d5ca1ebc2 | |||
| 1b45195f9d | |||
| 04c893208e | |||
| 453402a912 | |||
| 849521ee66 | |||
| ef1b239b2a | |||
| 4521c70173 | |||
| 28a4d29934 | |||
| 9975ed407a | |||
| 75a23135e6 | |||
| 4d2267c1bc | |||
| 44d6cac1b7 | |||
| e5294848f9 | |||
| 26c8d3f92c | |||
| a7d624affe | |||
| 4b254a07df | |||
| 07cd9800e8 | |||
| b23eba7c8c | |||
| 70ed4fcbb2 | |||
| d0f8b3e87e | |||
| c597605afd | |||
| d73bfb80b7 | |||
| 0dd210dcf3 | |||
| e25a9f3207 | |||
| e4b4906198 | |||
| 4dd776c334 | |||
| a8afe9c673 | |||
| 6a1c0bdd0c | |||
| 65767f77f8 | |||
| f5acb89d70 | |||
| f152c6a4be | |||
| cb78815e80 | |||
| ff1c9c5cf0 | |||
| dd8c25e8d5 | |||
| 1cd81ad258 | |||
| bf7dd32ff6 | |||
| 9088dfffc9 | |||
| a54d9cdae6 | |||
| 51b836d6be | |||
| 0a2167468c | |||
| 02eb2d3ee3 | |||
| 2825f74ba8 | |||
| 59a733f14e | |||
| 0dae44988e | |||
| dfe4543a0d | |||
| 0f38d27dcc | |||
| 024b031646 | |||
| ec1bea41a5 | |||
| b1f9450bb3 | |||
| 950072ad97 | |||
| 491b9b232b | |||
| a106924e6d | |||
| 6b73df950e | |||
| 7b23576afc | |||
| 166cc9c1ef | |||
| 81e49d4361 | |||
| 090bc0d12a | |||
| beb329ad71 | |||
| 2066474096 | |||
| 432b60f22c | |||
| 15a0d7dbb6 | |||
| c23ca5200c | |||
| 522f45f458 | |||
| df57b302da | |||
| 2aa09fd15a | |||
| 09f81c0c6c | |||
| 75b2171051 | |||
| 3248bc1258 | |||
| 1cab78347d | |||
| 0cbe95d615 | |||
| dcc19dcf04 | |||
| f3fcf9b5b8 | |||
| ef0d63b5ba | |||
| 7efcbd5e19 | |||
| c69290c39f | |||
| cb9447b2c3 | |||
| 875fc2ff32 | |||
| 1f06a0c6b3 | |||
| 2f716cddf4 | |||
| d653c25025 | |||
| c2abbb7568 | |||
| 9662736766 | |||
| b6c902a7b3 | |||
| 5308dd41d2 | |||
| 4e216cdddb | |||
| 847472f286 | |||
| df7c91ad92 | |||
| 10c3e46e95 | |||
| 48f6332f78 | |||
| d9bb81018b | |||
| 4e0128bb3d | |||
| 6c1adb79d2 | |||
| 7ee2f864b3 | |||
| c85d94a2ce | |||
| 4c6a12898b | |||
| 6e3eb5075e | |||
| f318eb9f1f | |||
| 9bfbceb047 | |||
| c56e6ed37c | |||
| 7a8d808b0e | |||
| 124c62fe24 | |||
| ba20239147 | |||
| 0c4ab0b449 | |||
| e0794cf4b4 | |||
| 3203c2c5ed | |||
| 9ec2556a7c | |||
| d3efe4b04c | |||
| f35ae5c44f | |||
| 14193c4308 | |||
| 1bef68a60b | |||
| e37e870d42 | |||
| c5a8cff129 | |||
| 61bc016637 | |||
| acf41c4882 | |||
| da3550a6d8 | |||
| 3640623147 | |||
| a6198efaca | |||
| f07caa2b97 | |||
| 2662ad9c96 | |||
| 13dbf23c3c | |||
| b2098e0efe | |||
| faea65a44e | |||
| 50adf355af | |||
| 1d05177627 | |||
| a94259cc73 | |||
| a49213e20c | |||
| 7b73c2725e | |||
| 8f53e514de | |||
| c39dd5567e | |||
| 8e9db2d662 | |||
| 52c577995c | |||
| efe7a12ccb | |||
| f146ebb179 | |||
| 72bf48cf36 | |||
| e6ecbfe824 | |||
| 0ccb6dd156 | |||
| 62b4f799b9 | |||
| bd789b8613 | |||
| 4772e4680b | |||
| 26cc24c59d | |||
| 4bc269992e | |||
| 07351ada80 | |||
| acb4a43d8a | |||
| 75dd7c5a3c | |||
| f515ac0236 | |||
| 6418531d0c | |||
| a04932eaf9 | |||
| 96f6c2388a | |||
| 8721202ec1 | |||
| 92d16d6409 | |||
| 7c2ae3f68c | |||
| 7ab3d190f2 | |||
| 29668ec45b | |||
| bd18f5b25f | |||
| 5a6fa37623 | |||
| e520e1eba4 | |||
| 2f68bfc7c1 | |||
| 57c576f96c | |||
| acf6d67e0d | |||
| d47f78f5d1 | |||
| 02de927043 | |||
| 20e2d4e984 | |||
| ff9165b7da | |||
| f7a72b1f20 | |||
| 9030a5655e | |||
| 699c476575 | |||
| b5b0f42888 | |||
| 15544c3d05 | |||
| 8010b77eb3 | |||
| 15fab6df81 | |||
| 89fb86bff7 | |||
| 75ff27307d | |||
| 1d972a0686 | |||
| 334ff59ff0 | |||
| a809954495 | |||
| 7936d7967d | |||
| aa64669ca3 | |||
| a726b07538 | |||
| ca96297ef9 | |||
| a38ce63474 | |||
| c8ee76b80e | |||
| 1eca8add85 | |||
| 2b1bb60f7e | |||
| 5aa1ff59b3 | |||
| 59af460ad4 | |||
| a449cb043a | |||
| 9d424c61f4 | |||
| 91da153c02 | |||
| 150facab44 | |||
| 3716f3b1f0 | |||
| 918ee040e1 | |||
| 1c606779c3 | |||
| fdf7f4f228 | |||
| c82611d506 | |||
| ed8ed4dd94 | |||
| 9f647ef081 | |||
| c616695e4d | |||
| 52751a0d67 | |||
| ffd308e305 | |||
| b4a07a3d9d | |||
| db97df69dc | |||
| 8f45f93c84 | |||
| b6667dfaf6 | |||
| 23fc4cca35 | |||
| 00a043f1e1 | |||
| 9abe53a32e | |||
| 8e5cf7a69d | |||
| fd39878f8b | |||
| 1ddef27903 | |||
| 19a33cc7c7 | |||
| 02a1057ff4 | |||
| a040ce61ad | |||
| 042076043b | |||
| 38d119e75d | |||
| 93c6645744 | |||
| 85c6b46ec8 | |||
| 1e199da117 | |||
| 3a40dcd883 | |||
| afc39f711f | |||
| 8a728a80ac | |||
| d932cffd50 | |||
| 6fe5513f30 | |||
| 138b1381c2 | |||
| 60d389e1f8 | |||
| 93e3b38132 | |||
| b02f879bf3 | |||
| 9997d0a7ef | |||
| 3dd0b1d234 | |||
| d27c3102e9 | |||
| d5d97bd64f | |||
| 0ddf8af452 | |||
| f6bd819c5c | |||
| 21cd77358a | |||
| 847e392e0c | |||
| 8799984a8c | |||
| 0c4c30a3bd | |||
| 4db3dba068 | |||
| 46731c40c3 | |||
| 5bc5c40f8a | |||
| d5fe1c40d8 | |||
| 6251acdf56 | |||
| 0f21f86521 | |||
| ed5ac285c3 | |||
| 880be64f48 | |||
| 753ce48e21 | |||
| 6b4d811b2f | |||
| baac2af4ab | |||
| 731ec4fa0b | |||
| 8dd88d1626 | |||
| 0fe7348456 | |||
| a7dd81f82f | |||
| d4168cd2b6 | |||
| 36c92404c3 | |||
| 1f23529cf0 | |||
| 68d5cb996a | |||
| fe36ae172d | |||
| a6a443bac3 | |||
| b3d4ed6459 | |||
| f4ac570297 | |||
| 8c31278c2f | |||
| 623ea7bb0f | |||
| 9e65eb3618 | |||
| 0e4f3cfa08 | |||
| c6c8cd1bd2 | |||
| 07000db77d | |||
| 94c07756dc | |||
| 18c3853039 | |||
| c59275583c | |||
| 65f4f1da96 | |||
| 3acdb497d1 | |||
| 6c75c5ea34 | |||
| d40bcc617d | |||
| 32519181c8 | |||
| 6eac0a44c4 | |||
| 55e2c99899 | |||
| 199b8f29da | |||
| c02e1a4a99 | |||
| d1def0bcca | |||
| 90ac799d57 | |||
| 7cc733a8df | |||
| a799a506f4 | |||
| d395f6e684 | |||
| 886d555a47 | |||
| 05ab972a1a | |||
| 997b327fcd | |||
| 64f7729b72 | |||
| d54f473670 | |||
| 4f319a2174 | |||
| 0f115df0b6 | |||
| 6d1afd059f | |||
| 78ec7f0f16 | |||
| 5dc9c0f2ae | |||
| 89b6f42e99 | |||
| b2539cb1ea | |||
| beb3a94135 | |||
| f42c96e012 | |||
| 9c6dbea344 | |||
| fa79564802 | |||
| e21dd3649c | |||
| c2f8930e99 | |||
| fb603745dc | |||
| 4faa411ece | |||
| 7ea76951c6 | |||
| 5172875afb | |||
| 0633a93837 | |||
| c548229e73 | |||
| e47850a152 | |||
| ae49f1efc8 | |||
| fc96ef68ac | |||
| b36665ebcd | |||
| 9acacaac37 | |||
| c92991e2fc | |||
| 99373ce4b6 | |||
| 9c6c384704 | |||
| e7fa682976 | |||
| d270a16b32 | |||
| f0d3680fe4 | |||
| ff56061853 | |||
| 0154d04535 | |||
| 22bbd00ac9 | |||
| 04feef9303 | |||
| c7823ceb68 | |||
| 85cf34017a | |||
| a681d172f2 | |||
| 8c52d02c21 | |||
| 7fab906843 | |||
| 90f975c20e | |||
| 247a725cad | |||
| 016e94f889 | |||
| 8524ad9817 | |||
| 01104ef2a4 | |||
| 7199b91f4d | |||
| 623bb75267 | |||
| 83b007504f | |||
| 9576710b2f | |||
| 07d90fb6e0 | |||
| 7d67abdae8 | |||
| c4d07c402d | |||
| c0726d20f0 | |||
| f81b369955 | |||
| 229f5028e1 | |||
| 8494080c90 | |||
| ea792587d5 | |||
| a8e87f80ed | |||
| b1b0ac0377 | |||
| 953ae8abec | |||
| 23c647eecb | |||
| 99c982c103 | |||
| 5ff2b1d061 | |||
| c172ed715b | |||
| fd798f3dac | |||
| 7a0155aa03 | |||
| a73f0ab6f0 | |||
| bdb4456c62 | |||
| 83553b6540 | |||
| 3b48be921e | |||
| 2138d4f2a0 | |||
| 3a32f44f23 | |||
| c74f39318f | |||
| 0aa814fae7 | |||
| 896d0333c7 | |||
| dbd02fb05a | |||
| bafaf49e7e | |||
| 78a74536e5 | |||
| a59822065d | |||
| 6e5407596e | |||
| 2ff8a2bba2 | |||
| 496fa982e0 | |||
| 6f5e49fc16 | |||
| a9352922d9 | |||
| 1faa39db5b | |||
| 143e53febc | |||
| 99a973e529 | |||
| 6bd4651767 | |||
| ece4f7e5e9 | |||
| baeff8030d | |||
| 65687aa3d0 | |||
| f1d957929c | |||
| be63a06f54 | |||
| 7b7452ff9f | |||
| 1e640b9790 | |||
| 22c3f47546 | |||
| e08851a2cc | |||
| e41472f0e5 | |||
| a703294275 | |||
| e0b2e470f4 | |||
| cf52750a57 | |||
| e55e5a7313 | |||
| 9b25484a92 | |||
| c9bba46846 | |||
| d40c33cf65 | |||
| 30949a3c83 | |||
| 5dbb9aabc7 | |||
| 1bf4502766 | |||
| 7c8af82c07 | |||
| a6578d5a5d | |||
| 37c463d37a | |||
| bae6fa1ab4 | |||
| c71203bd56 | |||
| dc9934b765 | |||
| bf804d5571 | |||
| c17d5890d0 | |||
| 5b324c05e1 | |||
| 452f9b3971 | |||
| da4400f437 | |||
| 9555b80cc0 | |||
| f8706bbffe | |||
| 85df20d736 | |||
| cbcff6a168 | |||
| c94ceca337 | |||
| 57c5cefe0f | |||
| 95e87be2d2 | |||
| 4d74fb3b7c | |||
| 80802e68d8 | |||
| ff957fa9f5 | |||
| 610974854c | |||
| 59cdd4edcd | |||
| 32755ca855 | |||
| f3af77e985 | |||
| 8c6138797a | |||
| 8bc5fb055e | |||
| d147b1ae2f | |||
| a3b9b50e8b | |||
| de5acf4fe7 | |||
| 7e0ee0c799 | |||
| 0ba7166636 | |||
| bc723acb06 | |||
| dcc66cb14c | |||
| e1409f8972 | |||
| 264e3aeb38 | |||
| 696097ca38 | |||
| cf2fd9cbe8 | |||
| 93f8737fc7 | |||
| f11c5d3ca9 | |||
| eb3f1aca8a | |||
| 253c510da0 | |||
| 888f04484a | |||
| f1e90d65f2 | |||
| 1bceadf094 | |||
| 2de8ad6f63 | |||
| ad98bebf55 | |||
| e4c9588048 | |||
| 9b52edea07 | |||
| 29297bd37b | |||
| 754f590778 | |||
| b662139708 | |||
| f72a90f4a8 | |||
| ab25a823b7 | |||
| f8385f06d0 | |||
| 6a6b46cbcf | |||
| 3d617476a5 | |||
| 50e7fac830 | |||
| e005f1a505 | |||
| b681af9cf8 | |||
| 34dfaec5ca | |||
| 496c699298 | |||
| c647b436aa | |||
| fa29d9ac86 | |||
| 60f9b505f1 | |||
| 191a9d671d | |||
| 4f18a6bd97 | |||
| 6fffd7e77b | |||
| eda21b7b22 | |||
| dd9f1603a4 | |||
| f5b4980718 | |||
| 4e5a85a24a | |||
| 0373d15c2f | |||
| aa0ea90ee2 | |||
| 7adede7b68 | |||
| 1905e59bdb | |||
| 2f3ef4099e | |||
| 1da6396102 | |||
| 6c9e17dce2 | |||
| 07cda9583f | |||
| c6338728d8 | |||
| f0f7c8917b | |||
| deb28e63d9 | |||
| 2539f81bda | |||
| 13327ce875 | |||
| 0771e86338 | |||
| 9fed9241d0 | |||
| d21df1bc12 | |||
| 6df5d30dff | |||
| 41d4641cea | |||
| b3f6aa0078 | |||
| 964e50a9ee | |||
| a2d4262c56 | |||
| d096a7d33e | |||
| 1636677995 | |||
| 24ff4b1321 | |||
| eadaa2f800 | |||
| f4cba1649d | |||
| c6d3481470 | |||
| 1579e623b0 | |||
| e23cf4a1c0 | |||
| 103adfc1a5 | |||
| b52cf5889e | |||
| 31f76092f8 | |||
| c13b96acbb | |||
| e6478e96de | |||
| 8f6d408802 | |||
| e1d4b2c827 | |||
| 5f2b8fb831 | |||
| 51a22adc6a | |||
| 4cefbf6bac | |||
| b8b23d00de | |||
| c6a855cf74 | |||
| 730b4723b0 | |||
| 701c1d210c | |||
| 3353b75327 | |||
| bce339c405 | |||
| 3865d44b0e | |||
| ba110169f5 | |||
| 0206ba9469 | |||
| 4b960849c7 | |||
| 3e555d77ea | |||
| 9f2b869135 | |||
| 7954af0ba3 | |||
| 042b81e566 | |||
| ecb7fb6b3e | |||
| a84d1f85b8 | |||
| 4c2b129947 | |||
| d38620bc7e | |||
| 6d90be9967 | |||
| 1d79a1fa26 | |||
| 1f3a9f117d | |||
| cb77fb337f | |||
| 6f2597cc8d | |||
| 120790a34a | |||
| ab5f977d62 | |||
| 8671f1ff91 | |||
| 2aaff4bf88 | |||
| dc18f475f8 | |||
| c7d3b9ebf9 | |||
| e284c88afa | |||
| 20e9a9feb5 | |||
| b0f1a8404c | |||
| c74c4e2c3a | |||
| 00a508508e | |||
| 1d6e93d990 | |||
| 56ebe98386 | |||
| 4fe808dcbc | |||
| ef260fca72 | |||
| 803e2da691 | |||
| 1c6bcb0a5e | |||
| b6ea80b67e | |||
| 0364e281d1 | |||
| 9f566c0742 | |||
| 273ec899a5 | |||
| fc97d6ece4 | |||
| 07d03e1a27 | |||
| 2c28d44f92 | |||
| ddb016e5b0 | |||
| f82296b4c1 | |||
| 2effe5a8cc | |||
| e840a27409 | |||
| 67c96304f2 | |||
| aece38716d | |||
| c6e23d772a | |||
| df2fc221e3 | |||
| 54737a8af2 | |||
| 487fdc8511 | |||
| 70fbf7fc8a | |||
| b208d63367 | |||
| 38e19282fd | |||
| 1189bbaa95 | |||
| 0b3e240999 | |||
| e17d1a2d85 | |||
| fd7d53cb5a | |||
| e4eb0d5ffe | |||
| a6f2161ca8 | |||
| 7f8acd2850 | |||
| 6623919429 | |||
| 6ad5e0dada | |||
| 3e7289f244 | |||
| 921b783e40 | |||
| 4c0d74b6c2 | |||
| 0f0fccc312 | |||
| e7c146bc1f | |||
| 675147645c | |||
| 06e3ec9dce | |||
| 77d9d34f91 | |||
| 92855aaf8f | |||
| 68441c7141 | |||
| f267e27e36 | |||
| 428203c466 | |||
| e125ee878e | |||
| 688b5053ee | |||
| 90febd2bcf | |||
| 74f055d125 | |||
| a34259860f | |||
| 21d2b2086f | |||
| d5e52b554c | |||
| f7f7cb475e | |||
| 55d02cf6d8 | |||
| e77dd302e5 | |||
| 53774c2f74 | |||
| b18bc876b0 | |||
| 6bb2a8cdda | |||
| 60a70f94b2 | |||
| 4d7da6cb8a | |||
| be0febaad9 | |||
| 0a8d967a3e | |||
| d8ec3cbc87 | |||
| 9293076b75 | |||
| e07f9172fa | |||
| 76740d93f1 | |||
| ef65237774 | |||
| 409b1936c9 | |||
| b4b4d55767 | |||
| a177931d71 | |||
| 2a8a4342e0 | |||
| 72b9203c8c | |||
| 0fe46d6c89 | |||
| b2ad563545 | |||
| d91afcf987 | |||
| 34b104cfd2 | |||
| 50d1bcb4ce | |||
| 5a697478f9 | |||
| c01676d2bb | |||
| c9d91f1d61 | |||
| caa4740b69 | |||
| 31033659bc | |||
| 2c3f7f7177 | |||
| dfbd21f111 | |||
| fc6d1b1229 | |||
| 54ef0a7758 | |||
| efb357f841 | |||
| a3038226f1 | |||
| a722498191 | |||
| 180c75b3a2 | |||
| 609ecf1f10 | |||
| 8eba022c0c | |||
| fffa9ddcab | |||
| 0edfae58eb | |||
| d71b0858d4 | |||
| 9343610596 | |||
| 5e8b6c8455 | |||
| f18cbffaa5 | |||
| 9d49f1487d | |||
| 8827b4c9cb | |||
| 51181f6a5d | |||
| 5758472d2f | |||
| c9fa0be0e0 | |||
| 94044afe74 | |||
| 448a70d2cc | |||
| 7502785062 | |||
| b98ecb7fbc | |||
| c189332ca3 | |||
| 11a9e88d42 | |||
| 3540fcfee8 | |||
| f82312e5fb | |||
| aa7d5a2839 | |||
| a787b5ca3a | |||
| 290d1c1ba4 | |||
| 048b808153 | |||
| 8bd70b6060 | |||
| 8c73d8f62c | |||
| b0061f0e30 | |||
| 2ee7ae0448 | |||
| 610ad964d0 | |||
| 452669e80a | |||
| cfd6b4d670 | |||
| dd8c2a2140 | |||
| 7d9b0e2629 | |||
| 6658c51474 | |||
| 7839f2e427 | |||
| 4fb7af6b53 | |||
| 937b52d9bf | |||
| b3d16d1437 | |||
| ec07398114 | |||
| 1a6c5ffcb9 | |||
| 980b4738f4 | |||
| 9321a54cee | |||
| 2d2e7117b3 | |||
| 5fc725c088 | |||
| 2ef7617c66 | |||
| c222eb1381 | |||
| dca5644878 | |||
| 1d680a9135 | |||
| a671e6b9d8 | |||
| b52b9a1faf | |||
| 82e2322493 | |||
| eff300cebb | |||
| 9cad8bff38 | |||
| d907f4aac2 | |||
| f8b43676ba | |||
| 7bf9b5936f | |||
| e1995350fe | |||
| 15c360cd26 | |||
| b1da28fe18 | |||
| 00567cff6c | |||
| 79cec32401 | |||
| f96f63acca | |||
| be48f1dd2e | |||
| 3875321d9e | |||
| b01ca8e805 | |||
| 43fc61f74d | |||
| 09ed8b3b6a | |||
| a9567e2574 | |||
| c17df5ab61 | |||
| 352bd386c3 | |||
| 8e50338da3 | |||
| 150a1796b6 | |||
| 4518fb0cef | |||
| 1ed4c36412 | |||
| 0ad74d53f6 | |||
| 1fe7855ec7 | |||
| 83dbc92a59 | |||
| df72cc6eb1 | |||
| 0657d3d118 | |||
| bf16a832ef | |||
| 83ed670dc3 | |||
| 10ec069e71 | |||
| d06badf061 | |||
| 393973775c | |||
| 4df3d84358 | |||
| 5c2a3cbbf8 | |||
| 10c4ef87a3 | |||
| d0b9903395 | |||
| 71a7e5f68a | |||
| 2fe90f9c5c | |||
| 8d09420b6a | |||
| 9943405289 | |||
| 6c44a19fba | |||
| fd1e8e9edf | |||
| cae79a9fe0 | |||
| 7aa70fe7be | |||
| 2aa5a2ee09 | |||
| 72a423237c | |||
| aeecc92194 | |||
| 12816b8409 | |||
| 96a3b03fd7 | |||
| 043203781e | |||
| 5702380c16 | |||
| 4d8316676f | |||
| 4da9ae8d07 | |||
| b0ac995f26 | |||
| 765ef8e93e | |||
| 168ae2cbe8 | |||
| 6932c64a18 | |||
| e4723240b6 | |||
| c714781aef | |||
| 6afb6d8e75 | |||
| ca6a04acfe | |||
| 842d761a37 | |||
| df6d6647f7 | |||
| 20ec85189c | |||
| cc2d1e136c | |||
| c762accb39 | |||
| 2751be7e0f | |||
| 0f45812b71 | |||
| 4fdbf91222 | |||
| 45f519820a | |||
| 5c4c2d30f2 | |||
| a839c89f0b | |||
| 4bc04c2e45 | |||
| 56355e572a | |||
| 32c9ecf242 | |||
| 35eb539d00 | |||
| 62feb5ad5f | |||
| c4fbc914cb | |||
| 1eda892c86 | |||
| 3fb6a14bbd | |||
| 5337efb0e7 | |||
| 05338dc704 | |||
| c3da40b3d8 | |||
| c84f0386bb | |||
| e9e1eeae63 | |||
| 2ecee69838 | |||
| 69088f3c20 | |||
| 4e6c5bc539 | |||
| 43f10ab655 | |||
| 234f7acf84 | |||
| c40cd9b03c | |||
| f5681765fd | |||
| a0f06a5908 | |||
| f67c5d951c | |||
| f5ab5d5c43 | |||
| 8719371e21 | |||
| 372ec827a3 | |||
| b994a177f9 | |||
| 9bea1b768f | |||
| 52975871e1 | |||
| ca9d044ae9 | |||
| 84e1f508e7 | |||
| 79d5694c99 | |||
| fbadb72eb1 | |||
| a4213763be | |||
| cd4f7e1945 | |||
| 58aaa100aa | |||
| 8437f704c7 | |||
| 375a201303 | |||
| ecd8fcc46e | |||
| 304921128c | |||
| 20d5342da2 | |||
| 14e250cdf4 | |||
| 66068858d7 | |||
| 17cec68bbb | |||
| 740fca702c | |||
| c4fb8b6fb4 | |||
| e967754c27 | |||
| 2b59be792d | |||
| c0c6db7071 | |||
| e14909468a | |||
| 865f914dad | |||
| 7631edae24 | |||
| 24bda85d73 | |||
| 528fa52b29 | |||
| c6c63df7fd | |||
| fa9e97bb56 | |||
| 0c2e3f5f5a | |||
| 7106c005ed | |||
| fb446cd059 | |||
| b9af34b33d | |||
| baab54c560 | |||
| 244159d9e9 | |||
| 61aad619a8 | |||
| a2249ddf3e | |||
| 23c219d0ce | |||
| a6b549813e | |||
| 4f34034c51 | |||
| 9b881cdf13 | |||
| 219f83e1f2 | |||
| e6967528cc | |||
| 3c21510d72 | |||
| 24e6e72dc4 | |||
| 34896d1f2c | |||
| 18ef75afbb | |||
| 16d9525fa8 | |||
| 0deba6e673 | |||
| 3708b1b6a5 | |||
| 386161c5b9 | |||
| aa72d9b050 | |||
| c345889535 | |||
| b7e7da427f | |||
| c6153f7556 | |||
| 11a75fe74f | |||
| 8a5f667159 | |||
| a2651b9ab5 | |||
| 1fedf3c1b9 | |||
| 2dc3de9de1 | |||
| d1824d7c28 | |||
| a9c9722647 | |||
| 534fb39e89 | |||
| 35dfa99e59 | |||
| ff2d59fcf8 | |||
| 855f513d5f | |||
| 62bb873ddd | |||
| 55ac829fb1 | |||
| a4986cd5f9 | |||
| 2d8f283680 | |||
| f9c1905840 | |||
| 6def502496 | |||
| dff355dda9 | |||
| 1d65860227 | |||
| ee740c619f | |||
| a1a0e351c1 | |||
| aca861a190 | |||
| 44b02529ba | |||
| a83433f655 | |||
| d80e3e328a | |||
| 166bd0b44f | |||
| 7b7c8a497f | |||
| 42c9e43736 | |||
| 90956059f6 | |||
| ab07612c05 | |||
| 7ef5b15ae2 | |||
| 9678c7717f | |||
| 8dd38fc747 | |||
| 242ff4c68b | |||
| 38cc63c530 | |||
| 41b93513a2 | |||
| 359cde31c2 | |||
| 1fba4f4b88 | |||
| 16f6c229f3 | |||
| accdfcb02c | |||
| ee1a7dae99 | |||
| b31eba988b | |||
| 20b36faf11 | |||
| 82142e2f54 | |||
| 1c18578466 | |||
| 0e81c6b059 | |||
| 99fa329bc5 | |||
| f13a2bf733 | |||
| 6945be3d6e | |||
| d1fb95ecbf | |||
| 176eb1f559 | |||
| 8babbb412c | |||
| f4e68d1a47 | |||
| e0516a4c83 | |||
| 1972528df7 | |||
| 39f7bead50 | |||
| e4f6bbb0b2 | |||
| afc9369849 | |||
| 325084c6a1 | |||
| 2f99215f8d | |||
| d90cee588a | |||
| 00a38f76a7 | |||
| b329dfd107 | |||
| 11286190fa | |||
| 05d7a81885 | |||
| 1dd70d1c77 | |||
| 437566740f | |||
| 7e747e95ab | |||
| de6230644e | |||
| 08aa73ccf6 | |||
| 2607e82aaf | |||
| ec145f6d4d | |||
| 78a3b16e9c | |||
| 58cf933091 | |||
| f8fc9a8d7b | |||
| 5f4369e188 | |||
| 4593421adb | |||
| f0154eeab7 | |||
| 1e284827d7 | |||
| 3e99e630ea | |||
| 0c7334c861 | |||
| 82d55c45e7 | |||
| 7538241008 | |||
| 6193e01004 | |||
| ef321a8072 | |||
| e5a44eef58 | |||
| 5488570745 | |||
| a314c0a242 | |||
| 53e1d0eb65 | |||
| 193172498c | |||
| 7da9bdd073 | |||
| df3718cd55 | |||
| c5a22081b4 | |||
| 3fc71d098d | |||
| 34c187cd9a | |||
| 3243b01e6c | |||
| cc27d630c6 | |||
| db0033ebe5 | |||
| c2b43903ab | |||
| 2ea9c99f34 | |||
| 449c7014fb | |||
| 6d59836b76 | |||
| e703e1591e | |||
| c4f87649e4 | |||
| 6cccf594ad | |||
| df41661f47 | |||
| 3daa81f87e | |||
| 4f60eb896c | |||
| ee7318f6ae | |||
| d7aa9f9558 | |||
| 442696cfc2 | |||
| cab6d3ff48 | |||
| cb4fb10aa9 | |||
| 992f2ec23c | |||
| 6824c1f1d8 | |||
| 9165097ea1 | |||
| bdb9b7a010 | |||
| 28c66dcf72 | |||
| c8e181be27 | |||
| dacae5717a | |||
| 7ffd071823 | |||
| 59fe0f109b | |||
| c6aa3f6421 | |||
| 88ce51a175 | |||
| f31aec1717 | |||
| d325f6aa56 | |||
| 069535932c | |||
| 98a3d991a0 | |||
| 54308bb616 | |||
| 81aef822db | |||
| b97718d177 | |||
| 6e05cb7082 | |||
| a67cc39c24 | |||
| e6b34c516c | |||
| 4847cd703e | |||
| 451eb22ad6 | |||
| d18c9082bc | |||
| 9fb3f8923e | |||
| 21a14a7871 | |||
| 240030fe4d | |||
| bc5c1af20a | |||
| 30aa3dfa94 | |||
| e9f23dfe1c | |||
| c9f32ba437 | |||
| dd4f79abfd | |||
| 74f5e85eb4 | |||
| 945f370c2b | |||
| 75742b7d69 | |||
| cf40d531ee | |||
| 3531ab87de | |||
| 45fa3dc45a | |||
| 0274280d66 | |||
| 604b802df8 | |||
| ef08a3f71b | |||
| c211869e6a | |||
| 004fb9ee13 | |||
| afd350050f | |||
| 9fe4307dd3 | |||
| 31f6fcdbd6 | |||
| 6a682af82c | |||
| f59237e0e8 | |||
| 7e16988650 | |||
| 13455983a8 | |||
| a7300d5387 | |||
| d04d330237 | |||
| 9fcae08b70 | |||
| ff8d052cc3 | |||
| 152c42753c | |||
| bfad8f161e | |||
| 6d20179ad2 | |||
| 77a48d9324 | |||
| bea0021b5f | |||
| 88cab0ba24 | |||
| 0abf2e6364 | |||
| d15ecf96ff | |||
| b907b8d1f7 | |||
| 3b9141a1ae | |||
| 1520a55054 | |||
| 5da3957cca | |||
| 6303b02119 | |||
| 0ebfa5e068 | |||
| ea57810e4e | |||
| 864e5bca0c | |||
| 709e4193b3 | |||
| e8e0306415 | |||
| 1138ffae7d | |||
| c8533e4368 | |||
| e9ba8f3792 | |||
| 8eedbe6a38 | |||
| c2c945afe5 | |||
| c54ad0583b | |||
| 761f740c6b | |||
| f559e36d11 | |||
| 32193e1e86 | |||
| 64e6573945 | |||
| 49ffeedd1e | |||
| 79ef734914 | |||
| 632f929731 | |||
| d1754b5a29 | |||
| 07545a27ab | |||
| 9cd6ef36fd | |||
| 54bef3e0d7 | |||
| 848805c94c | |||
| 0451dd394a | |||
| 7a4df2780c | |||
| cf20ff7217 | |||
| 7d7d78bfe4 | |||
| bc1240f8d7 | |||
| c72d1ff607 | |||
| 644ffb8901 | |||
| aeb1744fbf | |||
| 843c0a8eb1 | |||
| 85e653cebc | |||
| 6b1e929ffd | |||
| 7e5bd00582 | |||
| e27c02e32f | |||
| 62801081d4 | |||
| 886f193f1e | |||
| 20b33afa10 | |||
| 07019598f1 | |||
| 833c072ea8 | |||
| 795f2f8a1d | |||
| 3e8f2db575 | |||
| c5c645ef6f | |||
| c745b34d4d | |||
| 31231d0680 | |||
| 964163aedc | |||
| 6bd7473f13 | |||
| 86e926f94a | |||
| 5efe2b8fa1 | |||
| 51a10a8e17 | |||
| 63459dfac9 | |||
| 01ded669a1 | |||
| 0866dbf3fa | |||
| 96c3a29079 | |||
| 4df3b7a000 | |||
| c0a0c97e0b | |||
| 109d473b35 | |||
| 75eb6a7ceb | |||
| 3d6d2154f8 | |||
| 27460d4e46 | |||
| d68a142abb | |||
| 159a509962 | |||
| 3bc2f0ac99 | |||
| fc723527ea | |||
| d76fa8abfe | |||
| 097cdaa14c | |||
| 12c3f34723 | |||
| 5a35b4627d | |||
| e00aa52d20 | |||
| 39ab12df70 | |||
| 0aa77ed019 | |||
| 7cf324dea1 | |||
| f4d5348447 | |||
| 65c4ff6f43 | |||
| 72a9aadfbd | |||
| 6571f38204 | |||
| 47c7d46d99 | |||
| 1ff9abfc10 | |||
| 4ee7ccfde4 | |||
| 95845a7646 | |||
| 877b9d5c8f | |||
| a621aec774 | |||
| d548450e4e | |||
| b6353669d4 | |||
| cd7b1a1493 | |||
| 0545583730 | |||
| 46a2340aab | |||
| 8d662f01d8 | |||
| 026f186760 | |||
| 1d96036ab2 | |||
| c0decf93ec | |||
| 4031b8bb57 | |||
| 78993f2005 | |||
| 4695c04a4d | |||
| ffbd81070f | |||
| a843541f6c | |||
| 8dd017d892 | |||
| 79a74350a5 | |||
| 5a9b009eb1 | |||
| abe9252bbb | |||
| f33b3e519b |
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
Bunyip is a tool for multi-browser/device testing
|
||||
https://github.com/ryanseddon/bunyip
|
||||
It uses a few service under the hood including:
|
||||
Browsertack - http://browserstack.com
|
||||
Pagekite https://pagekite.net
|
||||
You'll need accounts at both to use bunyip
|
||||
You'll also need to download and install pagekite.py
|
||||
*/
|
||||
var config = {
|
||||
"browserstack": {
|
||||
"username": "your-browserstack-email@example.com",
|
||||
"password": "your browserstack password",
|
||||
"timeout": 300
|
||||
},
|
||||
"port": 9000,
|
||||
"tunnellink": "your-subdomain.pagekite.me",
|
||||
"tunnel": "pagekite.py <port> your-subdomain.pagekite.me"
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@@ -0,0 +1,11 @@
|
||||
# editorconfig.org - unify code style
|
||||
# plugins for text editors: editorconfig.org/#download
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
@@ -0,0 +1,27 @@
|
||||
.DS_Store
|
||||
dist/*
|
||||
build/files/*
|
||||
docs/api/*
|
||||
dev.html
|
||||
projects
|
||||
.zenflow-log
|
||||
test/*.map
|
||||
.bunyipconfig.js
|
||||
.s3config.json
|
||||
|
||||
node_modules
|
||||
npm-debug.log
|
||||
|
||||
sandbox/*
|
||||
!sandbox/*.example
|
||||
|
||||
# ignore any Karma conf.js files in the test/ directory
|
||||
test/*.conf.js
|
||||
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
*.orig
|
||||
|
||||
*results.xml
|
||||
*.log
|
||||
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"evil" : true,
|
||||
"validthis": true,
|
||||
"browser" : true,
|
||||
"debug" : true,
|
||||
"boss" : true,
|
||||
"expr" : true,
|
||||
"eqnull" : true,
|
||||
"quotmark" : "single",
|
||||
"sub" : true,
|
||||
"trailing" : true,
|
||||
"undef" : true,
|
||||
"laxbreak" : true,
|
||||
"predef" : [
|
||||
"_V_",
|
||||
"videojs",
|
||||
"vjs",
|
||||
"goog",
|
||||
"console",
|
||||
|
||||
"require",
|
||||
"define",
|
||||
"module",
|
||||
"exports",
|
||||
|
||||
"PlayerTest",
|
||||
"asyncTest",
|
||||
"deepEqual",
|
||||
"equal",
|
||||
"expect",
|
||||
"module",
|
||||
"notDeepEqual",
|
||||
"notEqual",
|
||||
"notStrictEqual",
|
||||
"ok",
|
||||
"QUnit",
|
||||
"raises",
|
||||
"start",
|
||||
"stop",
|
||||
"strictEqual",
|
||||
"test"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
# .npmignore needed so dist dir won't be ignored
|
||||
# https://npmjs.org/doc/developers.html#Keeping-files-out-of-your-package
|
||||
@@ -0,0 +1,3 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 0.8
|
||||
@@ -0,0 +1,159 @@
|
||||
CHANGELOG
|
||||
=========
|
||||
|
||||
## HEAD (Unreleased)
|
||||
_(none)_
|
||||
|
||||
--------------------
|
||||
|
||||
## 4.4.2 (2014-02-24)
|
||||
* Fixed module.exports in minified version ([view](https://github.com/videojs/video.js/pull/1038))
|
||||
|
||||
## 4.4.1 (2014-02-18)
|
||||
* Added .npmignore so dist files wouldn't be ignored in packages
|
||||
|
||||
## 4.4.0 (2014-02-18)
|
||||
* Made the poster updateable after initialization ([view](https://github.com/videojs/video.js/pull/838))
|
||||
* Exported more textTrack functions ([view](https://github.com/videojs/video.js/pull/815))
|
||||
* Moved player ID generation to support video tags with no IDs ([view](https://github.com/videojs/video.js/pull/845))
|
||||
* Moved to using QUnit as a dependency ([view](https://github.com/videojs/video.js/pull/850))
|
||||
* Added the util namespace for public utility functions ([view](https://github.com/videojs/video.js/pull/862))
|
||||
* Fixed an issue with calling duration before Flash is loaded ([view](https://github.com/videojs/video.js/pull/861))
|
||||
* Added player methods to externs so they can be overridden ([view](https://github.com/videojs/video.js/pull/878))
|
||||
* Fixed html5 playback when switching between media techs ([view](https://github.com/videojs/video.js/pull/887))
|
||||
* Fixed Firefox+Flash mousemove events so controls don't hide permanently ([view](https://github.com/videojs/video.js/pull/899))
|
||||
* Fixed a test for touch detection ([view](https://github.com/videojs/video.js/pull/962))
|
||||
* Updated the src file list for karma tests ([view](https://github.com/videojs/video.js/pull/948))
|
||||
* Added more tests for API properties after minification ([view](https://github.com/videojs/video.js/pull/906))
|
||||
* Updated projet to use npm version of videojs-swf ([view](https://github.com/videojs/video.js/pull/930))
|
||||
* Added support for dist zipping on windows ([view](https://github.com/videojs/video.js/pull/944))
|
||||
* Fixed iOS fullscreen issue ([view](https://github.com/videojs/video.js/pull/977))
|
||||
* Fixed touch event bubbling ([view](https://github.com/videojs/video.js/pull/992))
|
||||
* Fixed ARIA role attribute for button and slider ([view](https://github.com/videojs/video.js/pull/988))
|
||||
* Fixed an issue where a component's dispose event would bubble up ([view](https://github.com/videojs/video.js/pull/981))
|
||||
* Quieted down deprecation warnings ([view](https://github.com/videojs/video.js/pull/971))
|
||||
* Updated the seek handle to contain the current time ([view](https://github.com/videojs/video.js/pull/902))
|
||||
* Added requirejs and browserify support (UMD) ([view](https://github.com/videojs/video.js/pull/998))
|
||||
|
||||
## 4.3.0 (2013-11-04)
|
||||
* Added Karma for cross-browser unit testing ([view](https://github.com/videojs/video.js/pull/714))
|
||||
* Unmuting when the volume is changed ([view](https://github.com/videojs/video.js/pull/720))
|
||||
* Fixed an accessibility issue with the big play button ([view](https://github.com/videojs/video.js/pull/777))
|
||||
* Exported user activity methods ([view](https://github.com/videojs/video.js/pull/783))
|
||||
* Added a classname to center the play button and new spinner options ([view](https://github.com/videojs/video.js/pull/784))
|
||||
* Added API doc generation ([view](https://github.com/videojs/video.js/pull/801))
|
||||
* Added support for codecs in Flash mime types ([view](https://github.com/videojs/video.js/pull/805))
|
||||
|
||||
## 4.2.2 (2013-10-15)
|
||||
* Fixed a race condition that would cause videos to fail in Firefox ([view](https://github.com/videojs/video.js/pull/776))
|
||||
|
||||
## 4.2.1 (2013-09-09)
|
||||
* Fixed an infinite loop caused by loading the library asynchronously ([view](https://github.com/videojs/video.js/pull/727))
|
||||
|
||||
## 4.2.0 (2013-09-04)
|
||||
* Added LESS as a CSS preprocessor for the default skin ([view](https://github.com/videojs/video.js/pull/644))
|
||||
* Exported MenuButtons for use in the API ([view](https://github.com/videojs/video.js/pull/648))
|
||||
* Fixed ability to remove listeners added with one() ([view](https://github.com/videojs/video.js/pull/659))
|
||||
* Updated buffered() to account for multiple loaded ranges ([view](https://github.com/videojs/video.js/pull/643))
|
||||
* Exported createItems() for custom menus ([view](https://github.com/videojs/video.js/pull/654))
|
||||
* Preventing media events from bubbling up the DOM ([view](https://github.com/videojs/video.js/pull/630))
|
||||
* Major reworking of the control bar and many issues fixed ([view](https://github.com/videojs/video.js/pull/672))
|
||||
* Fixed an issue with minifiying the code on Windows systems ([view](https://github.com/videojs/video.js/pull/683))
|
||||
* Added support for RTMP streaming through Flash ([view](https://github.com/videojs/video.js/pull/605))
|
||||
* Made tech.features available to external techs ([view](https://github.com/videojs/video.js/pull/705))
|
||||
* Minor code improvements ([view](https://github.com/videojs/video.js/pull/706))
|
||||
* Updated time formatting to support NaN and Infinity ([view](https://github.com/videojs/video.js/pull/627))
|
||||
* Fixed an `undefined` error in cases where no tech is loaded ([view](https://github.com/videojs/video.js/pull/632))
|
||||
* Exported addClass and removeClass for player components ([view](https://github.com/videojs/video.js/pull/661))
|
||||
* Made the fallback message customizable ([view](https://github.com/videojs/video.js/pull/638))
|
||||
* Fixed an issue with the loading spinner placement and rotation ([view](https://github.com/videojs/video.js/pull/694))
|
||||
* Fixed an issue with fonts being flaky in IE8
|
||||
|
||||
## 4.1.0 (2013-06-28)
|
||||
* Turned on method queuing for unready playback technologies (flash) [view](https://github.com/videojs/video.js/pull/553)
|
||||
* Blocking user text selection on player components [view](https://github.com/videojs/video.js/pull/524)
|
||||
* Exported requestFullScreen() and cancelFullScreen() in the minified version [view](https://github.com/videojs/video.js/pull/555)
|
||||
* Exported the global players reference, videojs.players [view](https://github.com/videojs/video.js/pull/560)
|
||||
* Added google analytics to the CDN version ([view](https://github.com/videojs/video.js/pull/568))
|
||||
* Exported fadeIn/fadeOut for the Component API ([view](https://github.com/videojs/video.js/pull/581))
|
||||
* Fixed an IE poster error when autoplaying ([view](https://github.com/videojs/video.js/pull/593))
|
||||
* Exported bufferedPercent for the API ([view](https://github.com/videojs/video.js/pull/588))
|
||||
* Augmented user agent detection, specifically for Android versions ([view](https://github.com/videojs/video.js/pull/470))
|
||||
* Fixed IE9 canPlayType error ([view](https://github.com/videojs/video.js/pull/606))
|
||||
* Fixed various issues with captions ([view](https://github.com/videojs/video.js/pull/609))
|
||||
|
||||
## 4.0.4 (2013-06-11)
|
||||
* Added google analytics to current CDN version. ([view](https://github.com/videojs/video.js/pull/571))
|
||||
|
||||
## 4.0.3 (2013-05-28)
|
||||
* Fixed an bug with exiting fullscreen. [view](https://github.com/videojs/video.js/pull/546)
|
||||
|
||||
## 4.0.2 (2013-05-23)
|
||||
* Correct version number for CDN swf url. Minify CSS. [view](https://github.com/videojs/video.js/pull/535)
|
||||
|
||||
## 4.0.1 (2013-05-22)
|
||||
* Fixed old IE font loading [view](https://github.com/videojs/video.js/pull/532)
|
||||
|
||||
## 4.0.0 (2013-05-09)
|
||||
* Improved performance through an 18% size reduction using Google Closure Compiler in advanced mode
|
||||
* Greater stability through an automated cross-browser/device test suite using TravisCI, Bunyip, and Browserstack.
|
||||
* New plugin interface and plugin listing for extending Video.js
|
||||
* New default skin design that uses font icons for greater customization
|
||||
* Responsive design and retina display support
|
||||
* Improved accessibility through better ARIA support
|
||||
* Moved to Apache 2.0 license
|
||||
* 100% JavaScript development tool set including Grunt
|
||||
* Updated docs to use Github markdown
|
||||
* Allow disabling of default components
|
||||
* Duration is now setable (need ed for HLS m3u8 files)
|
||||
* Event binders (on/off/one) now return the player instance
|
||||
* Stopped player from going back to beginning on ended event
|
||||
* Added support for percent width/height and fluid layouts
|
||||
* Improved load order of elements to reduce reflow
|
||||
* Changed addEvent function name to 'on'
|
||||
* Removed conflicting array.indexOf function
|
||||
* Added exitFullScreen to support BlackBerry devices (pull/143)
|
||||
|
||||
## 3.2.0 (2012-03-20)
|
||||
* Updated docs with more options.
|
||||
* Overhauled HTML5 Track support.
|
||||
* Fixed Flash always autoplaying when setting source.
|
||||
* Fixed localStorage context
|
||||
* Updated 'fullscreenchange' event to be called even if the user presses escape to exit fullscreen.
|
||||
* Automatically converting URsource URL to absolute for Flash fallback.
|
||||
* Created new 'loadedalldata' event for when the source is completely downloaded
|
||||
* Improved player.destroy(). Now removes elements and references.
|
||||
* Refactored API to be more immediately available.
|
||||
|
||||
### Patches
|
||||
* 3.2.1 (2012-04-06) Fixed setting width/height with javascript options
|
||||
* 3.2.2 (2012-05-02) Fixed error with multiple controls fading listeners
|
||||
* 3.2.3 (2012-11-12) Fixed chrome spinner continuing on seek
|
||||
|
||||
## 3.1.0 (2012-01-30)
|
||||
* Added CSS fix for Firefox 9 fullscreen (in the rare case that it's enabled)
|
||||
* Replaced swfobject with custom embed to save file size.
|
||||
* Added flash iframe-mode, an experimental method for getting around flash reloading issues.
|
||||
* Fixed issue with volume knob position. Improved controls fading.
|
||||
* Fixed ian issue with triggering fullscreen a second time.
|
||||
* Fixed issue with getting attributes in Firefox 3.0
|
||||
* Escaping special characters in source URL for Flash
|
||||
* Added a check for if Firefox is enabled which fixes a Firefox 9 issue
|
||||
* Stopped spinner from showing on 'stalled' events since browsers sometimes don't show that they've recovered.
|
||||
* Fixed CDN Version which was breaking dev.html
|
||||
* Made full-window mode more independent
|
||||
* Added rakefile for release generation
|
||||
|
||||
## 3.0.0 (2012-01-10)
|
||||
* Same HTML/CSS Skin for both HTML5 and Flash video
|
||||
* Super lightweight Flash fallback player for browsers that don’t support HTML5 video
|
||||
* Free CDN hosting
|
||||
|
||||
### Patches
|
||||
* 3.0.2 (2012-01-12) Started tracking changes with zenflow
|
||||
* 3.0.3 (2012-01-12) Added line to docs to test zenflow
|
||||
* 3.0.4 (2012-01-12) Fixing an undefined source when no sources exist on load
|
||||
* 3.0.5 (2012-01-12) Removed deprecated event.layerX and layerY
|
||||
* 3.0.6 (2012-01-12) Fixed wrong URL for CDN in docs
|
||||
* 3.0.7 (2012-01-12) Fixed an ie8 breaking bug with the poster
|
||||
* 3.0.8 (2012-01-23) Fixed issue with controls not hiding in IE due to no opacity support
|
||||
@@ -0,0 +1,270 @@
|
||||
CONTRIBUTING
|
||||
============
|
||||
So you want to help out? Great! There's a number of ways you can get involved.
|
||||
|
||||
* [File and discuss issues](#filing-issues)
|
||||
* [Contribute code](#contributing-code)
|
||||
* [Build and share plugins](docs/plugins.md)
|
||||
* [Answer questions on Stack Overflow](http://stackoverflow.com/questions/tagged/video.js)
|
||||
|
||||
There's also other Video.js projects where you can help. (check the [video.js org](https://github.com/videojs) for an up-to-date list of projects)
|
||||
|
||||
* [Videojs.com](https://github.com/videojs/videojs.com)
|
||||
* [Video.js flash player](https://github.com/videojs/video-js-swf)
|
||||
* [Player skin designer](https://github.com/videojs/designer)
|
||||
* [Contribflow](https://github.com/zencoder/contribflow)
|
||||
|
||||
Filing issues
|
||||
-------------
|
||||
[GitHub Issues](https://github.com/videojs/video.js/issues) are used for all discussions around the codebase, including **bugs**, **features**, and other **enhancements**.
|
||||
|
||||
### Reporting a Bug
|
||||
|
||||
**A bug is a demonstrable problem** that is caused by the code in the repository. Good bug reports are extremely helpful. Thank You!
|
||||
|
||||
Guidelines for bug reports:
|
||||
|
||||
1. Use the [GitHub issue search](https://github.com/videojs/video.js/issues) — check if the issue has already been reported.
|
||||
|
||||
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.
|
||||
|
||||
A good bug report should be as detailed as possible, so that others won't have to follow up for the essential details.
|
||||
|
||||
Here's an example:
|
||||
|
||||
> Short yet concise Bug Summary
|
||||
>
|
||||
> Description:
|
||||
> Happens on Windows 7 and OSX. Seen with IE9, Firefox 19 OSX, Chrome 21, Flash 11.6 and 11.2
|
||||
>
|
||||
> 1. This is the first step
|
||||
> 2. This is the second step
|
||||
> 3. Further steps, etc.
|
||||
>
|
||||
> Expected:
|
||||
> (describe the expected outcome of the steps above)
|
||||
>
|
||||
> Actual:
|
||||
> (describe what actually happens)
|
||||
>
|
||||
> `<url>` (a link to the reduced test case, if it exists)
|
||||
>
|
||||
> Any other information you want to share that is relevant to the issue being
|
||||
> reported. This might include the lines of code that you have identified as
|
||||
> causing the bug, and potential solutions (and your opinions on their
|
||||
> merits).
|
||||
|
||||
**[File a bug report](https://github.com/videojs/video.js/issues/new)**
|
||||
|
||||
### Requesting a Feature
|
||||
|
||||
1. [Check the plugin list](https://github.com/videojs/video.js/wiki/Plugins) for any plugins that may already support the feature.
|
||||
|
||||
2. [Search the issues](https://github.com/videojs/video.js/issues) for any previous requests for the same feature, and give a thumbs up or +1 on existing requests.
|
||||
|
||||
2. If no previous requests exist, create a new issue. Please be as clear as possible about why the feautre is needed and the intended use case.
|
||||
|
||||
**[Request a feature](https://github.com/videojs/video.js/issues/new)**
|
||||
|
||||
Contributing code
|
||||
-----------------
|
||||
|
||||
To contibute code you'll need to be able to build a copy of Video.js and run tests locally. There are a few requirements before getting started.
|
||||
|
||||
- Node.js -- Video.js uses Node for build and test automation. Node is available for Windows, Mac OS X, Linux, and SunOS, as well as source code if that doesn't scare you. [Download and install Node.js](http://nodejs.org/download/)
|
||||
|
||||
- grunt-cli -- Install grunt-cli globally so that you will have the correct version of grunt available for any project that needs it.
|
||||
|
||||
On Unix-based systems, you'll have to do this as a superuser:
|
||||
|
||||
```bash
|
||||
sudo npm install -g grunt-cli
|
||||
```
|
||||
On Windows, you can just run:
|
||||
|
||||
```bash
|
||||
npm install -g grunt-cli
|
||||
```
|
||||
|
||||
- Contribflow -- A homegrown git workflow tool for managing feature/hotfix branches and submitting pull requests. If you have your own preferred git workflow, contribflow isn't required, but the following instructions will assume you're using it.
|
||||
|
||||
On Unix-based systems, you'll have to do this as a superuser:
|
||||
|
||||
```bash
|
||||
sudo npm install -g contribflow
|
||||
```
|
||||
|
||||
On Windows, you can just run:
|
||||
|
||||
```bash
|
||||
npm install -g contribflow
|
||||
```
|
||||
|
||||
### Building your own copy of Video.js
|
||||
|
||||
First, [fork](http://help.github.com/fork-a-repo/) the video.js git repository. At the top of every github page, there is a Fork button. Click it, and the forking process will copy Video.js into your own GitHub account.
|
||||
|
||||
Clone your fork of the repo into your code directory
|
||||
|
||||
```bash
|
||||
git clone https://github.com/<your-username>/video.js.git
|
||||
```
|
||||
|
||||
Navigate to the newly cloned directory
|
||||
|
||||
```bash
|
||||
cd video.js
|
||||
```
|
||||
|
||||
Assign the original repo to a remote called "upstream"
|
||||
|
||||
```
|
||||
git remote add upstream https://github.com/videojs/video.js.git
|
||||
```
|
||||
|
||||
>In the future, if you want to pull in updates to video.js that happened after you cloned the main repo, you can run:
|
||||
>
|
||||
> ```bash
|
||||
> git checkout master
|
||||
> git pull upstream master
|
||||
> ```
|
||||
|
||||
Install the required node.js modules using node package manager
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
> A note to Windows developers: If you run npm commands, and you find that your command prompt colors have suddenly reversed, you can configure npm to set color to false to prevent this from happening.
|
||||
> `npm config set color false`
|
||||
> Note that this change takes effect when a new command prompt window is opened; the current window will not be affected.
|
||||
|
||||
Build a local copy of video.js and run tests
|
||||
|
||||
```bash
|
||||
grunt
|
||||
grunt test
|
||||
```
|
||||
|
||||
Video.js is also configured to run tests with Karma. Karma is installed as a grunt plugin to run QUnit tests in real browsers, as opposed to simply running the tests in phantomjs, a headless browser.
|
||||
|
||||
To run the QUnit test suite in Karma, do the following:
|
||||
1. Copy test/karma.conf.js.example and rename the copy test/karma.conf.js. Please note that if you decide to name the file something other than karma.conf.js, or if you decide to change the location of your conf.js file from the test/ folder, you will need to change references to karma.conf.js in Gruntfile and .gitignore to your new file name and location, so that you don't inadvertently add your conf.js file to any of your video.js pull requests.
|
||||
2. Open test/karma.conf.js in an editor, and configure the properties in it as desired. At a minimum, you'll want to add the browsers that you want to run your tests in. The karma.conf.js.example file has detailed information on usage in the file itself.
|
||||
After you've configured the desired properties in your karma.conf.js, run:
|
||||
```bash
|
||||
grunt karma:dev
|
||||
```
|
||||
|
||||
At this point you should have a built copy of video.js in a directory named `dist`, and all tests should be passing.
|
||||
|
||||
### Making Changes
|
||||
|
||||
Whether you're adding something new, making something better, or fixing a bug, you'll first want to search the [GitHub issues](https://github.com/videojs/video.js/issues) and [plugins list](https://github.com/videojs/video.js/wiki/Plugins) to make sure you're aware of any previous discussion or work. If an unclaimed issue exists, claim it via a comment. If no issue exists for your change, submit one, follwing the [issue filing guidelines](#filing-issues).
|
||||
|
||||
There are two categories of changes in video.js land, features and hotfixes (Video.js follows a branching model similar to [gitflow](http://nvie.com/posts/a-successful-git-branching-model/)). Hotfixes are for urgent fixes that need to be released immediately as a patch. Features are for everything else (including non-urgent fixes). If you think you have a hotfix scenario, verify that (via comment) before starting the work. We'll focus on features here, but you can swap `hotfix` for `feature` in any command.
|
||||
|
||||
Start a new development branch
|
||||
|
||||
```bash
|
||||
contrib feature start
|
||||
```
|
||||
|
||||
You'll be prompted to name the branch. After that, contrib will create the branch locally, and use git to push it up to your origin, and track it. You're now ready to start building your feature or fixing that bug! Be sure to read the [Code Style Guide](#code-style-guide).
|
||||
|
||||
While you're developing, you can ensure your changes are working by writing tests (in the `test` directory) and running `grunt test`.
|
||||
|
||||
There's also a sandbox directory where you can add any file and it won't get tracked as a change. To start you can copy the example index file and see a working version of a player (using the local source code) by loading it in a browser.
|
||||
|
||||
```bash
|
||||
cp sandbox/index.html.example sandbox/index.html
|
||||
open sandbox/index.html
|
||||
```
|
||||
|
||||
> #### NOTE: Testing Flash Locally in Chrome
|
||||
> Chrome 21+ (as of 2013/01/01) doens't run Flash files that are local and loaded into a locally accessed page (file:///).
|
||||
> To get around this you can do either of the following:
|
||||
>
|
||||
> 1. Do your development and testing using a local HTTP server.
|
||||
>
|
||||
> 2. [Disable the version of Flash included with Chrome](http://helpx.adobe.com/flash-player/kb/flash-player-google-chrome.html#How_can_I_run_debugger_or_alternate_versions_of_Flash_Player_in_Google_Chrome) and enable a system-wide version of Flash instead.
|
||||
|
||||
|
||||
Commit and push changes as you go (using git directly). Write thorough descriptions of your changes in your commit messages.
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -av
|
||||
git push
|
||||
```
|
||||
|
||||
> GitHub allows you to close an issue through your commit message using the [fixes](https://github.com/blog/831-issues-2-0-the-next-generation) keyword.
|
||||
>
|
||||
> ```bash
|
||||
> My commit message. fixes #123
|
||||
> Testing: (briefly describe any testing here, for example, 'unit tests and cross-browser manual tests around playback and network interruption')
|
||||
> ```
|
||||
|
||||
### Submitting your changes
|
||||
|
||||
First, thoroughly test your feature or fix, including writing tests to make sure your change doesn't get regressed in a future update. If you're fixing a bug, we recommend in addition to testing the fix itself, to do some testing around the areas that your fix has touched. For example, a brief smoketest of the player never hurts.
|
||||
|
||||
Make sure your changes are pushed to origin
|
||||
|
||||
```bash
|
||||
git push
|
||||
```
|
||||
|
||||
Use contrib to submit a a pull request (make sure you're in your feature branch)
|
||||
|
||||
```bash
|
||||
contrib feature submit
|
||||
```
|
||||
|
||||
You'll be prompted for title and description for the Pull Request. After that, contrib will use Git to submit your pull request to video.js.
|
||||
|
||||
You're Done! (except for cleanup.) To clean up your feature or hotfix branch:
|
||||
|
||||
First, checkout your feature or issue branch:
|
||||
|
||||
```bash
|
||||
git checkout (branchname)
|
||||
```
|
||||
|
||||
Run this command to clean up your feature:
|
||||
|
||||
```bash
|
||||
contrib feature delete
|
||||
```
|
||||
|
||||
Run this command to clean up your bug fix:
|
||||
|
||||
```bash
|
||||
contrib hotfix delete
|
||||
```
|
||||
> PLEASE NOTE: THIS WILL DELETE YOUR LOCAL AND REMOTE COPIES OF THE FEATURE.
|
||||
> This is meant to clean up your local and remote branches, so make sure any changes you don't want to lose have been pulled into the parent project or another branch first.
|
||||
|
||||
Code Style Guide
|
||||
----------------
|
||||
Please follow [Google's JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) to the letter. If your editor supports [.editorconfig](http://editorconfig.org/#download) it will make it easier to manage differences from your own coding style.
|
||||
|
||||
### Style examples include:
|
||||
* Two space indents.
|
||||
* Delimit strings with single-quotes `'`, not double-quotes `"`.
|
||||
* No trailing whitespace, except in markdown files where a linebreak must be forced.
|
||||
* No more than [one assignment](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) per `var` statement.
|
||||
* Prefer `if` and `else` to ["clever"](http://programmers.stackexchange.com/a/25281) uses of `? :` conditional or `||`, `&&` logical operators.
|
||||
* **When in doubt, follow the conventions you see used in the source already.**
|
||||
|
||||
If you happen to find something in the codebase that does not follow the style guide, that's a good opportunity to make your first contribution!
|
||||
|
||||
---
|
||||
### Doc Credit
|
||||
This doc was inspired by some great contribution guide examples including [contribute.md template](https://github.com/contribute-md/contribute-md-template),
|
||||
[grunt](https://github.com/gruntjs/grunt/wiki/Contributing),
|
||||
[html5 boilerplate](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md),
|
||||
[jquery](https://github.com/jquery/jquery/blob/master/CONTRIBUTING.md),
|
||||
and [node.js](https://github.com/joyent/node/wiki/Contributing).
|
||||
@@ -0,0 +1,365 @@
|
||||
module.exports = function(grunt) {
|
||||
var pkg, s3, semver, version, verParts, uglify;
|
||||
|
||||
semver = require('semver');
|
||||
pkg = grunt.file.readJSON('package.json');
|
||||
uglify = require('uglify-js');
|
||||
|
||||
try {
|
||||
s3 = grunt.file.readJSON('.s3config.json');
|
||||
} catch(e) {
|
||||
s3 = {};
|
||||
}
|
||||
|
||||
verParts = pkg.version.split('.');
|
||||
version = {
|
||||
full: pkg.version,
|
||||
major: verParts[0],
|
||||
minor: verParts[1],
|
||||
patch: verParts[2]
|
||||
};
|
||||
version.majorMinor = version.major + '.' + version.minor;
|
||||
|
||||
// loading predefined source order from source-loader.js
|
||||
// trust me, this is the easist way to do it so far
|
||||
/*jshint undef:false, evil:true */
|
||||
var blockSourceLoading = true;
|
||||
var sourceFiles; // Needed to satisfy jshint
|
||||
eval(grunt.file.read('./build/source-loader.js'));
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: pkg,
|
||||
|
||||
build: {
|
||||
src: 'src/js/dependencies.js',
|
||||
options: {
|
||||
baseDir: 'src/js/'
|
||||
}
|
||||
},
|
||||
clean: {
|
||||
build: ['build/files/*'],
|
||||
dist: ['dist/*']
|
||||
},
|
||||
jshint: {
|
||||
src: {
|
||||
src: ['src/js/*.js', 'Gruntfile.js', 'test/unit/*.js'],
|
||||
options: {
|
||||
jshintrc: '.jshintrc'
|
||||
}
|
||||
}
|
||||
},
|
||||
minify: {
|
||||
source:{
|
||||
src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js'],
|
||||
externs: ['src/js/player.externs.js', 'src/js/media/flash.externs.js'],
|
||||
dest: 'build/files/minified.video.js'
|
||||
},
|
||||
tests: {
|
||||
src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js', 'test/unit/*.js'],
|
||||
externs: ['src/js/player.externs.js', 'src/js/media/flash.externs.js', 'test/qunit-externs.js'],
|
||||
dest: 'build/files/test.minified.video.js'
|
||||
}
|
||||
},
|
||||
dist: {},
|
||||
qunit: {
|
||||
source: ['test/index.html'],
|
||||
minified: ['test/minified.html'],
|
||||
minified_api: ['test/minified-api.html']
|
||||
},
|
||||
watch: {
|
||||
files: [ 'src/**/*', 'test/unit/*.js', 'Gruntfile.js' ],
|
||||
tasks: 'dev'
|
||||
},
|
||||
copy: {
|
||||
minor: {
|
||||
files: [
|
||||
{expand: true, cwd: 'build/files/', src: ['*'], dest: 'dist/'+version.majorMinor+'/', filter: 'isFile'} // includes files in path
|
||||
]
|
||||
},
|
||||
patch: {
|
||||
files: [
|
||||
{expand: true, cwd: 'build/files/', src: ['*'], dest: 'dist/'+version.full+'/', filter: 'isFile'} // includes files in path
|
||||
]
|
||||
}
|
||||
},
|
||||
s3: {
|
||||
options: s3,
|
||||
minor: {
|
||||
upload: [
|
||||
{
|
||||
src: 'dist/cdn/*',
|
||||
dest: 'vjs/'+version.majorMinor+'/',
|
||||
rel: 'dist/cdn/',
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=2628000'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
patch: {
|
||||
upload: [
|
||||
{
|
||||
src: 'dist/cdn/*',
|
||||
dest: 'vjs/'+version.full+'/',
|
||||
rel: 'dist/cdn/',
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
cssmin: {
|
||||
minify: {
|
||||
expand: true,
|
||||
cwd: 'build/files/',
|
||||
src: ['video-js.css'],
|
||||
dest: 'build/files/',
|
||||
ext: '.min.css'
|
||||
}
|
||||
},
|
||||
less: {
|
||||
dev: {
|
||||
files: {
|
||||
'build/files/video-js.css': 'src/css/video-js.less'
|
||||
}
|
||||
}
|
||||
},
|
||||
karma: {
|
||||
options: {
|
||||
configFile: 'test/karma.conf.js'
|
||||
},
|
||||
dev: {
|
||||
configFile: 'test/karma.conf.js',
|
||||
autoWatch: true
|
||||
},
|
||||
ci: {
|
||||
configFile: 'test/karma.conf.js',
|
||||
autoWatch: false
|
||||
}
|
||||
},
|
||||
vjsdocs: {
|
||||
all: {
|
||||
src: sourceFiles,
|
||||
dest: 'docs/api',
|
||||
options: {
|
||||
baseURL: 'https://github.com/videojs/video.js/blob/master/'
|
||||
}
|
||||
}
|
||||
},
|
||||
zip: {
|
||||
dist: {
|
||||
router: function (filepath) {
|
||||
var path = require('path');
|
||||
return path.relative('dist', filepath);
|
||||
},
|
||||
compression: 'DEFLATE',
|
||||
src: ['dist/video-js/**/*'],
|
||||
dest: 'dist/video-js-' + version.full + '.zip'
|
||||
}
|
||||
},
|
||||
usebanner: {
|
||||
dist: {
|
||||
options: {
|
||||
position: 'top',
|
||||
banner: '/*! Video.js v' + version.full + ' <%= pkg.copyright %> */ ',
|
||||
linebreak: true
|
||||
},
|
||||
files: {
|
||||
src: [ 'build/files/minified.video.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
bump: {
|
||||
files: ['package.json'],
|
||||
updateConfigs: ['pkg']
|
||||
},
|
||||
tagrelease: {
|
||||
file: 'package.json',
|
||||
commit: true,
|
||||
message: 'Release %version%',
|
||||
prefix: 'v'
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
grunt.loadNpmTasks('grunt-contrib-less');
|
||||
grunt.loadNpmTasks('grunt-s3');
|
||||
grunt.loadNpmTasks('contribflow');
|
||||
grunt.loadNpmTasks('grunt-karma');
|
||||
grunt.loadNpmTasks('videojs-doc-generator');
|
||||
grunt.loadNpmTasks('grunt-zip');
|
||||
grunt.loadNpmTasks('grunt-banner');
|
||||
grunt.loadNpmTasks('grunt-bump');
|
||||
grunt.loadNpmTasks('grunt-tagrelease');
|
||||
grunt.loadNpmTasks('chg');
|
||||
|
||||
// grunt.loadTasks('./docs/tasks/');
|
||||
// grunt.loadTasks('../videojs-doc-generator/tasks/');
|
||||
|
||||
// Default task.
|
||||
grunt.registerTask('default', ['jshint', 'less', 'build', 'minify', 'usebanner', 'dist']);
|
||||
// Development watch task
|
||||
grunt.registerTask('dev', ['jshint', 'less', 'build', 'qunit:source']);
|
||||
grunt.registerTask('test', ['jshint', 'less', 'build', 'minify', 'usebanner', 'qunit']);
|
||||
|
||||
var fs = require('fs'),
|
||||
gzip = require('zlib').gzip;
|
||||
|
||||
grunt.registerMultiTask('build', 'Building Source', function(){
|
||||
// Fix windows file path delimiter issue
|
||||
var i = sourceFiles.length;
|
||||
while (i--) {
|
||||
sourceFiles[i] = sourceFiles[i].replace(/\\/g, '/');
|
||||
}
|
||||
|
||||
// Create a combined sources file. https://github.com/zencoder/video-js/issues/287
|
||||
var combined = '';
|
||||
sourceFiles.forEach(function(result){
|
||||
combined += grunt.file.read(result);
|
||||
});
|
||||
// Replace CDN version ref in js. Use major/minor version.
|
||||
combined = combined.replace(/GENERATED_CDN_VSN/g, version.majorMinor);
|
||||
grunt.file.write('build/files/combined.video.js', combined);
|
||||
|
||||
// Copy over other files
|
||||
// grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png');
|
||||
grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'build/files/video-js.swf');
|
||||
|
||||
// Inject version number into css file
|
||||
var css = grunt.file.read('build/files/video-js.css');
|
||||
css = css.replace(/GENERATED_AT_BUILD/g, version.full);
|
||||
grunt.file.write('build/files/video-js.css', css);
|
||||
|
||||
// Copy over font files
|
||||
grunt.file.recurse('src/css/font', function(absdir, rootdir, subdir, filename) {
|
||||
// Block .DS_Store files
|
||||
if ('filename'.substring(0,1) !== '.') {
|
||||
grunt.file.copy(absdir, 'build/files/font/' + filename);
|
||||
}
|
||||
});
|
||||
|
||||
// Minify CSS
|
||||
grunt.task.run(['cssmin']);
|
||||
});
|
||||
|
||||
grunt.registerMultiTask('minify', 'Minify JS files using Closure Compiler.', function() {
|
||||
var done = this.async();
|
||||
var exec = require('child_process').exec;
|
||||
|
||||
var externs = this.data.externs || [];
|
||||
var dest = this.data.dest;
|
||||
var filePatterns = [];
|
||||
|
||||
// Make sure deeper directories exist for compiler
|
||||
grunt.file.write(dest, '');
|
||||
|
||||
if (this.data.sourcelist) {
|
||||
filePatterns = filePatterns.concat(grunt.file.read(this.data.sourcelist).split(','));
|
||||
}
|
||||
if (this.data.src) {
|
||||
filePatterns = filePatterns.concat(this.data.src);
|
||||
}
|
||||
|
||||
// Build closure compiler shell command
|
||||
var command = 'java -jar build/compiler/compiler.jar'
|
||||
+ ' --compilation_level ADVANCED_OPTIMIZATIONS'
|
||||
// + ' --formatting=pretty_print'
|
||||
+ ' --js_output_file=' + dest
|
||||
+ ' --create_source_map ' + dest + '.map --source_map_format=V3'
|
||||
+ ' --jscomp_warning=checkTypes --warning_level=VERBOSE'
|
||||
+ ' --output_wrapper "(function() {%output%})();"';
|
||||
//@ sourceMappingURL=video.js.map
|
||||
|
||||
// Add each js file
|
||||
grunt.file.expand(filePatterns).forEach(function(file){
|
||||
command += ' --js='+file;
|
||||
});
|
||||
|
||||
// Add externs
|
||||
externs.forEach(function(extern){
|
||||
command += ' --externs='+extern;
|
||||
});
|
||||
|
||||
// Run command
|
||||
exec(command, { maxBuffer: 500*1024 }, function(err, stdout, stderr){
|
||||
|
||||
if (err) {
|
||||
grunt.warn(err);
|
||||
done(false);
|
||||
}
|
||||
|
||||
if (stdout) {
|
||||
grunt.log.writeln(stdout);
|
||||
}
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
grunt.registerTask('dist-copy', 'Assembling distribution', function(){
|
||||
var css, jsmin, jsdev, cdnjs;
|
||||
|
||||
// Manually copy each source file
|
||||
grunt.file.copy('build/files/minified.video.js', 'dist/video-js/video.js');
|
||||
grunt.file.copy('build/files/combined.video.js', 'dist/video-js/video.dev.js');
|
||||
grunt.file.copy('build/files/video-js.css', 'dist/video-js/video-js.css');
|
||||
grunt.file.copy('build/files/video-js.min.css', 'dist/video-js/video-js.min.css');
|
||||
grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'dist/video-js/video-js.swf');
|
||||
grunt.file.copy('build/demo-files/demo.html', 'dist/video-js/demo.html');
|
||||
grunt.file.copy('build/demo-files/demo.captions.vtt', 'dist/video-js/demo.captions.vtt');
|
||||
|
||||
// Copy over font files
|
||||
grunt.file.recurse('build/files/font', function(absdir, rootdir, subdir, filename) {
|
||||
// Block .DS_Store files
|
||||
if ('filename'.substring(0,1) !== '.') {
|
||||
grunt.file.copy(absdir, 'dist/video-js/font/' + filename);
|
||||
}
|
||||
});
|
||||
|
||||
// ds_store files sometime find their way in
|
||||
if (grunt.file.exists('dist/video-js/.DS_Store')) {
|
||||
grunt.file['delete']('dist/video-js/.DS_Store');
|
||||
}
|
||||
|
||||
// CDN version uses already hosted font files
|
||||
// Minified version only, doesn't need demo files
|
||||
grunt.file.copy('build/files/minified.video.js', 'dist/cdn/video.js');
|
||||
grunt.file.copy('build/files/video-js.min.css', 'dist/cdn/video-js.css');
|
||||
grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'dist/cdn/video-js.swf');
|
||||
grunt.file.copy('build/demo-files/demo.captions.vtt', 'dist/cdn/demo.captions.vtt');
|
||||
grunt.file.copy('build/demo-files/demo.html', 'dist/cdn/demo.html');
|
||||
|
||||
// Replace font urls with CDN versions
|
||||
css = grunt.file.read('dist/cdn/video-js.css');
|
||||
css = css.replace(/font\//g, '../f/2/');
|
||||
grunt.file.write('dist/cdn/video-js.css', css);
|
||||
|
||||
// Add CDN-specfic JS
|
||||
jsmin = grunt.file.read('dist/cdn/video.js');
|
||||
// GA Tracking Pixel (manually building the pixel URL)
|
||||
cdnjs = uglify.minify('src/js/cdn.js').code.replace('v0.0.0', 'v'+version.full);
|
||||
grunt.file.write('dist/cdn/video.js', jsmin + cdnjs);
|
||||
});
|
||||
|
||||
grunt.registerTask('cdn-links', 'Update the version of CDN links in docs', function(){
|
||||
var doc = grunt.file.read('docs/guides/setup.md');
|
||||
var version = pkg.version;
|
||||
|
||||
// remove the patch version to point to the latest patch
|
||||
version = version.replace(/(\d\.\d)\.\d/, '$1');
|
||||
|
||||
// update the version in http://vjs.zencdn.net/4.3/video.js
|
||||
doc = doc.replace(/(\/\/vjs\.zencdn\.net\/)\d\.\d(\.\d)?/g, '$1'+version);
|
||||
grunt.file.write('docs/guides/setup.md', doc);
|
||||
});
|
||||
|
||||
grunt.registerTask('dist', 'Creating distribution', ['dist-copy', 'zip:dist']);
|
||||
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
Copyright 2013 Brightcove, Inc.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
@@ -0,0 +1,18 @@
|
||||
|
||||
# [Video.js - HTML5 Video Player](http://videojs.com) [](https://travis-ci.org/zencoder/video-js)
|
||||
|
||||
> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins](https://github.com/videojs/video.js/wiki/Plugins)). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 50,000 websites.
|
||||
|
||||
Visit [videojs.com](http://videojs.com) for an overview, download options, and instructions on how to use the player on your site.
|
||||
|
||||
## 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).
|
||||
|
||||
## Building your own Video.js from source
|
||||
To build your own custom version read the section on [contributing code](CONTRIBUTING.md#contributing-code) and ["Building your own copy"](CONTRIBUTING.md#building-your-own-copy-of-videojs) in the contributing guide.
|
||||
|
||||
## License
|
||||
|
||||
Video.js is licensed under the Apache License, Version 2.0. [View the license file](LICENSE)
|
||||
|
||||
Copyright 2013 Brightcove, Inc.
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "video.js",
|
||||
"description": "An HTML5 and Flash video player with a common API and skin for both.",
|
||||
"version": "4.4.0",
|
||||
"main": [
|
||||
"dist/video-js/video.js",
|
||||
"dist/video-js/video-js.css"
|
||||
],
|
||||
"keywords": [
|
||||
"videojs",
|
||||
"html5",
|
||||
"flash",
|
||||
"video",
|
||||
"player"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
[
|
||||
{
|
||||
"os": "win",
|
||||
"browser": "chrome",
|
||||
"version": "27.0"
|
||||
},
|
||||
{
|
||||
"os": "win",
|
||||
"browser": "firefox",
|
||||
"version": "20.0"
|
||||
},
|
||||
{
|
||||
"os": "win",
|
||||
"browser": "ie",
|
||||
"version": "9.0"
|
||||
},
|
||||
{
|
||||
"os": "win",
|
||||
"browser": "ie",
|
||||
"version": "10.0"
|
||||
},
|
||||
{
|
||||
"os": "ios",
|
||||
"device": "iPhone 5",
|
||||
"version": "6.0"
|
||||
},
|
||||
{
|
||||
"os": "ios",
|
||||
"device": "iPad 3rd (6.0)",
|
||||
"version": "6.0"
|
||||
},
|
||||
{
|
||||
"os": "android",
|
||||
"device": "Samsung Galaxy Tab 2 10.1",
|
||||
"version": "4.0"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,202 @@
|
||||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
@@ -0,0 +1,292 @@
|
||||
/*
|
||||
* Copyright 2009 The Closure Compiler Authors.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
//
|
||||
// Contents
|
||||
//
|
||||
|
||||
The Closure Compiler performs checking, instrumentation, and
|
||||
optimizations on JavaScript code. The purpose of this README is to
|
||||
explain how to build and run the Closure Compiler.
|
||||
|
||||
The Closure Compiler requires Java 6 or higher.
|
||||
http://www.java.com/
|
||||
|
||||
|
||||
//
|
||||
// Building The Closure Compiler
|
||||
//
|
||||
|
||||
There are three ways to get a Closure Compiler executable.
|
||||
|
||||
1) Use one we built for you.
|
||||
|
||||
Pre-built Closure binaries can be found at
|
||||
http://code.google.com/p/closure-compiler/downloads/list
|
||||
|
||||
|
||||
2) Check out the source and build it with Apache Ant.
|
||||
|
||||
First, check out the full source tree of the Closure Compiler. There
|
||||
are instructions on how to do this at the project site.
|
||||
http://code.google.com/p/closure-compiler/source/checkout
|
||||
|
||||
Apache Ant is a cross-platform build tool.
|
||||
http://ant.apache.org/
|
||||
|
||||
At the root of the source tree, there is an Ant file named
|
||||
build.xml. To use it, navigate to the same directory and type the
|
||||
command
|
||||
|
||||
ant jar
|
||||
|
||||
This will produce a jar file called "build/compiler.jar".
|
||||
|
||||
|
||||
3) Check out the source and build it with Eclipse.
|
||||
|
||||
Eclipse is a cross-platform IDE.
|
||||
http://www.eclipse.org/
|
||||
|
||||
Under Eclipse's File menu, click "New > Project ..." and create a
|
||||
"Java Project." You will see an options screen. Give the project a
|
||||
name, select "Create project from existing source," and choose the
|
||||
root of the checked-out source tree as the existing directory. Verify
|
||||
that you are using JRE version 6 or higher.
|
||||
|
||||
Eclipse can use the build.xml file to discover rules. When you
|
||||
navigate to the build.xml file, you will see all the build rules in
|
||||
the "Outline" pane. Run the "jar" rule to build the compiler in
|
||||
build/compiler.jar.
|
||||
|
||||
|
||||
//
|
||||
// Running The Closure Compiler
|
||||
//
|
||||
|
||||
Once you have the jar binary, running the Closure Compiler is straightforward.
|
||||
|
||||
On the command line, type
|
||||
|
||||
java -jar compiler.jar
|
||||
|
||||
This starts the compiler in interactive mode. Type
|
||||
|
||||
var x = 17 + 25;
|
||||
|
||||
then hit "Enter", then hit "Ctrl-Z" (on Windows) or "Ctrl-D" (on Mac or Linux)
|
||||
and "Enter" again. The Compiler will respond:
|
||||
|
||||
var x=42;
|
||||
|
||||
The Closure Compiler has many options for reading input from a file,
|
||||
writing output to a file, checking your code, and running
|
||||
optimizations. To learn more, type
|
||||
|
||||
java -jar compiler.jar --help
|
||||
|
||||
You can read more detailed documentation about the many flags at
|
||||
http://code.google.com/closure/compiler/docs/gettingstarted_app.html
|
||||
|
||||
|
||||
//
|
||||
// Compiling Multiple Scripts
|
||||
//
|
||||
|
||||
If you have multiple scripts, you should compile them all together with
|
||||
one compile command.
|
||||
|
||||
java -jar compiler.jar --js=in1.js --js=in2.js ... --js_output_file=out.js
|
||||
|
||||
The Closure Compiler will concatenate the files in the order they're
|
||||
passed at the command line.
|
||||
|
||||
If you need to compile many, many scripts together, you may start to
|
||||
run into problems with managing dependencies between scripts. You
|
||||
should check out the Closure Library. It contains functions for
|
||||
enforcing dependencies between scripts, and a tool called calcdeps.py
|
||||
that knows how to give scripts to the Closure Compiler in the right
|
||||
order.
|
||||
|
||||
http://code.google.com/p/closure-library/
|
||||
|
||||
//
|
||||
// Licensing
|
||||
//
|
||||
|
||||
Unless otherwise stated, all source files are licensed under
|
||||
the Apache License, Version 2.0.
|
||||
|
||||
|
||||
-----
|
||||
Code under:
|
||||
src/com/google/javascript/rhino
|
||||
test/com/google/javascript/rhino
|
||||
|
||||
URL: http://www.mozilla.org/rhino
|
||||
Version: 1.5R3, with heavy modifications
|
||||
License: Netscape Public License and MPL / GPL dual license
|
||||
|
||||
Description: A partial copy of Mozilla Rhino. Mozilla Rhino is an
|
||||
implementation of JavaScript for the JVM. The JavaScript parser and
|
||||
the parse tree data structures were extracted and modified
|
||||
significantly for use by Google's JavaScript compiler.
|
||||
|
||||
Local Modifications: The packages have been renamespaced. All code not
|
||||
relevant to parsing has been removed. A JsDoc parser and static typing
|
||||
system have been added.
|
||||
|
||||
|
||||
-----
|
||||
Code in:
|
||||
lib/rhino
|
||||
|
||||
Rhino
|
||||
URL: http://www.mozilla.org/rhino
|
||||
Version: Trunk
|
||||
License: Netscape Public License and MPL / GPL dual license
|
||||
|
||||
Description: Mozilla Rhino is an implementation of JavaScript for the JVM.
|
||||
|
||||
Local Modifications: Minor changes to parsing JSDoc that usually get pushed
|
||||
up-stream to Rhino trunk.
|
||||
|
||||
|
||||
-----
|
||||
Code in:
|
||||
lib/args4j.jar
|
||||
|
||||
Args4j
|
||||
URL: https://args4j.dev.java.net/
|
||||
Version: 2.0.16
|
||||
License: MIT
|
||||
|
||||
Description:
|
||||
args4j is a small Java class library that makes it easy to parse command line
|
||||
options/arguments in your CUI application.
|
||||
|
||||
Local Modifications: None.
|
||||
|
||||
|
||||
-----
|
||||
Code in:
|
||||
lib/guava.jar
|
||||
|
||||
Guava Libraries
|
||||
URL: http://code.google.com/p/guava-libraries/
|
||||
Version: 13.0.1
|
||||
License: Apache License 2.0
|
||||
|
||||
Description: Google's core Java libraries.
|
||||
|
||||
Local Modifications: None.
|
||||
|
||||
|
||||
-----
|
||||
Code in:
|
||||
lib/jsr305.jar
|
||||
|
||||
Annotations for software defect detection
|
||||
URL: http://code.google.com/p/jsr-305/
|
||||
Version: svn revision 47
|
||||
License: BSD License
|
||||
|
||||
Description: Annotations for software defect detection.
|
||||
|
||||
Local Modifications: None.
|
||||
|
||||
|
||||
-----
|
||||
Code in:
|
||||
lib/jarjar.jar
|
||||
|
||||
Jar Jar Links
|
||||
URL: http://jarjar.googlecode.com/
|
||||
Version: 1.1
|
||||
License: Apache License 2.0
|
||||
|
||||
Description:
|
||||
A utility for repackaging Java libraries.
|
||||
|
||||
Local Modifications: None.
|
||||
|
||||
|
||||
----
|
||||
Code in:
|
||||
lib/junit.jar
|
||||
|
||||
JUnit
|
||||
URL: http://sourceforge.net/projects/junit/
|
||||
Version: 4.10
|
||||
License: Common Public License 1.0
|
||||
|
||||
Description: A framework for writing and running automated tests in Java.
|
||||
|
||||
Local Modifications: None.
|
||||
|
||||
|
||||
---
|
||||
Code in:
|
||||
lib/protobuf-java.jar
|
||||
|
||||
Protocol Buffers
|
||||
URL: http://code.google.com/p/protobuf/
|
||||
Version: 2.4.1
|
||||
License: New BSD License
|
||||
|
||||
Description: Supporting libraries for protocol buffers,
|
||||
an encoding of structured data.
|
||||
|
||||
Local Modifications: None
|
||||
|
||||
|
||||
---
|
||||
Code in:
|
||||
lib/ant.jar
|
||||
lib/ant-launcher.jar
|
||||
|
||||
URL: http://ant.apache.org/bindownload.cgi
|
||||
Version: 1.8.1
|
||||
License: Apache License 2.0
|
||||
Description:
|
||||
Ant is a Java based build tool. In theory it is kind of like "make"
|
||||
without make's wrinkles and with the full portability of pure java code.
|
||||
|
||||
Local Modifications: None
|
||||
|
||||
|
||||
---
|
||||
Code in:
|
||||
lib/json.jar
|
||||
URL: http://json.org/java/index.html
|
||||
Version: JSON version 20090211
|
||||
License: MIT license
|
||||
Description:
|
||||
JSON is a set of java files for use in transmitting data in JSON format.
|
||||
|
||||
Local Modifications: None
|
||||
|
||||
---
|
||||
Code in:
|
||||
tools/maven-ant-tasks-2.1.3.jar
|
||||
URL: http://maven.apache.org
|
||||
Version 2.1.3
|
||||
License: Apache License 2.0
|
||||
Description:
|
||||
Maven Ant tasks are used to manage dependencies and to install/deploy to
|
||||
maven repositories.
|
||||
|
||||
Local Modifications: None
|
||||
@@ -0,0 +1,41 @@
|
||||
WEBVTT
|
||||
|
||||
00:00.700 --> 00:04.110
|
||||
Captions describe all relevant audio for the hearing impaired.
|
||||
[ Heroic music playing for a seagull ]
|
||||
|
||||
00:04.500 --> 00:05.000
|
||||
[ Splash!!! ]
|
||||
|
||||
00:05.100 --> 00:06.000
|
||||
[ Sploosh!!! ]
|
||||
|
||||
00:08.000 --> 00:09.225
|
||||
[ Splash...splash...splash splash splash ]
|
||||
|
||||
00:10.525 --> 00:11.255
|
||||
[ Splash, Sploosh again ]
|
||||
|
||||
00:13.500 --> 00:14.984
|
||||
Dolphin: eeeEEEEEeeee!
|
||||
|
||||
00:14.984 --> 00:16.984
|
||||
Dolphin: Squawk! eeeEEE?
|
||||
|
||||
00:25.000 --> 00:28.284
|
||||
[ A whole ton of splashes ]
|
||||
|
||||
00:29.500 --> 00:31.000
|
||||
Mine. Mine. Mine.
|
||||
|
||||
00:34.300 --> 00:36.000
|
||||
Shark: Chomp
|
||||
|
||||
00:36.800 --> 00:37.900
|
||||
Shark: CHOMP!!!
|
||||
|
||||
00:37.861 --> 00:41.193
|
||||
EEEEEEOOOOOOOOOOWHALENOISE
|
||||
|
||||
00:42.593 --> 00:45.611
|
||||
[ BIG SPLASH ]
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Video.js | HTML5 Video Player</title>
|
||||
|
||||
<!-- Chang URLs to wherever Video.js files will be hosted -->
|
||||
<link href="video-js.css" rel="stylesheet" type="text/css">
|
||||
<!-- video.js must be in the <head> for older IEs to work. -->
|
||||
<script src="video.js"></script>
|
||||
|
||||
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = "video-js.swf";
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
data-setup="{}">
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
|
||||
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
</video>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
// This file is used to load the video.js source files into a page
|
||||
// in the correct order based on dependencies.
|
||||
// When you create a new source file you will need to add
|
||||
// it to the list below to use it in sandbox/index.html and
|
||||
// test/index.html
|
||||
|
||||
// You can use the projectRoot variable to adjust relative urls
|
||||
// that this script loads. By default it's "../", which is what /sandbox
|
||||
// and /test need. If you had sandbox/newDir/index.html, in index.html you
|
||||
// would set projectRoot = "../../"
|
||||
|
||||
// We could use somehting like requireJS to load files, and at one point
|
||||
// we used goog.require/provide to load dependencies, but that seems like
|
||||
// overkill with the small number of files we actually have.
|
||||
|
||||
// ADD NEW SOURCE FILES HERE
|
||||
var sourceFiles = [
|
||||
"src/js/core.js",
|
||||
"src/js/core-object.js",
|
||||
"src/js/events.js",
|
||||
"src/js/lib.js",
|
||||
"src/js/util.js",
|
||||
"src/js/component.js",
|
||||
"src/js/button.js",
|
||||
"src/js/slider.js",
|
||||
"src/js/menu.js",
|
||||
"src/js/player.js",
|
||||
"src/js/control-bar/control-bar.js",
|
||||
"src/js/control-bar/play-toggle.js",
|
||||
"src/js/control-bar/time-display.js",
|
||||
"src/js/control-bar/fullscreen-toggle.js",
|
||||
"src/js/control-bar/progress-control.js",
|
||||
"src/js/control-bar/volume-control.js",
|
||||
"src/js/control-bar/mute-toggle.js",
|
||||
"src/js/control-bar/volume-menu-button.js",
|
||||
"src/js/poster.js",
|
||||
"src/js/loading-spinner.js",
|
||||
"src/js/big-play-button.js",
|
||||
"src/js/media/media.js",
|
||||
"src/js/media/html5.js",
|
||||
"src/js/media/flash.js",
|
||||
"src/js/media/loader.js",
|
||||
"src/js/tracks.js",
|
||||
"src/js/json.js",
|
||||
"src/js/setup.js",
|
||||
"src/js/plugins.js"
|
||||
];
|
||||
|
||||
// Allow overriding the default project root
|
||||
var projectRoot = projectRoot || '../';
|
||||
|
||||
function loadScripts(scriptsArr){
|
||||
for (var i = 0; i < scriptsArr.length; i++) {
|
||||
// Using document.write because that's the easiest way to avoid triggering
|
||||
// asynchrnous script loading
|
||||
document.write( "<script src='" + projectRoot + scriptsArr[i] + "'><\/script>" );
|
||||
}
|
||||
}
|
||||
|
||||
// We use this file in the grunt build script to load the same source file list
|
||||
// and don't want to load the scripts there.
|
||||
if (typeof blockSourceLoading === 'undefined') {
|
||||
loadScripts(sourceFiles);
|
||||
|
||||
// Allow for making Flash first
|
||||
if (window.location.href.indexOf("?flash") !== -1) {
|
||||
// Using doc.write to load this script to, otherwise when it runs videojs
|
||||
// is undefined
|
||||
document.write('<script>videojs.options.techOrder = ["flash"];videojs.options.flash.swf = "../src/swf/video-js.swf";</script>')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Comments | HTML5 Video Player | Video JS</title>
|
||||
<meta name="google-site-verification" content="QHf9MEYVlEWoNHbzTeUkSQsbRT5Twzqu6N0nX1i3nes" />
|
||||
|
||||
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
|
||||
<!-- JQuery not required, but used for dom ready function -->
|
||||
<script src="javascripts/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
<link rel="stylesheet" href="stylesheets/base.css" type="text/css" media="all" charset="utf-8" />
|
||||
<link rel="stylesheet" href="video-js/video-js.css" type="text/css" media="all" charset="utf-8" />
|
||||
<link rel="stylesheet" href="stylesheets/site.css" type="text/css" media="all" charset="utf-8" />
|
||||
|
||||
<!--[if !IE 7]>
|
||||
<style type="text/css">
|
||||
#wrap {display:table;height:100%}
|
||||
</style>
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
// Using JQuery's DOM Ready function
|
||||
// You can also use window.onload, but it loads slower
|
||||
$(function(){
|
||||
VideoJS.setup();
|
||||
})
|
||||
|
||||
// If not using a JS library
|
||||
// window.onload = function(){
|
||||
// VideoJS.setup();
|
||||
// }
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="wrap">
|
||||
<div id="main">
|
||||
|
||||
<ul id="nav">
|
||||
<li><a href="skins.html">Skins</a></li>
|
||||
<li><a href="http://github.com/zencoder/video-js">Source</a></li>
|
||||
<li><a href="http://wiki.github.com/zencoder/video-js/browser-device-compatibility">Compatibility</a></li>
|
||||
<li><a href="http://github.com/zencoder/video-js/issues">Issue Tracker</a></li>
|
||||
<li><a href="http://wiki.github.com/zencoder/video-js/">Wiki</a></li>
|
||||
</ul>
|
||||
|
||||
<h1>Video JS</h1>
|
||||
<p class="tagline">Open Source HTML5 Video Player</p>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
|
||||
*/
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = 'http://videojs.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=videojs">comments powered by Disqus.</a></noscript>
|
||||
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
© <a href="http://videojs.com">The Video JS Project</a>. Sponsored by <a href="http://zencoder.com">Zencoder</a>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
(function() {
|
||||
var links = document.getElementsByTagName('a');
|
||||
var query = '?';
|
||||
for(var i = 0; i < links.length; i++) {
|
||||
if(links[i].href.indexOf('#disqus_thread') >= 0) {
|
||||
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
|
||||
}
|
||||
}
|
||||
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/videojs/get_num_replies.js' + query + '"></' + 'script>');
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-16505296-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,264 @@
|
||||
{
|
||||
"project": {
|
||||
"owner": "videojs",
|
||||
"name": "video.js",
|
||||
"urls": {
|
||||
"git": "https://github.com/videojs/video.js.git"
|
||||
},
|
||||
"requirements": [
|
||||
{
|
||||
"name": "git",
|
||||
"info": "http://git-scm.com",
|
||||
"test": "which git"
|
||||
},
|
||||
{
|
||||
"name": "node.js",
|
||||
"info": "http://nodejs.org",
|
||||
"test": "which node"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
"install": {
|
||||
"steps": [
|
||||
{
|
||||
"desc": "Get all git branches",
|
||||
"exec": "git fetch origin"
|
||||
},
|
||||
{
|
||||
"desc": "Create the stable branch for patches",
|
||||
"exec": "git checkout -b stable origin/stable"
|
||||
},
|
||||
{
|
||||
"desc": "Add the upstream project as a remote so new changes can be pulled",
|
||||
"exec": "git remote add upstream <%= project.urls.git %>"
|
||||
},
|
||||
{
|
||||
"desc": "Get all upstream branches and changes",
|
||||
"exec": "git fetch upstream"
|
||||
},
|
||||
{
|
||||
"contrib": "update"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
"update": {
|
||||
"steps": [
|
||||
{
|
||||
"desc": "Switch to the development branch",
|
||||
"exec": "git checkout master"
|
||||
},
|
||||
{
|
||||
"desc": "Get any changes to master in the main project",
|
||||
"exec": "git pull upstream master"
|
||||
},
|
||||
{
|
||||
"desc": "Switch to the release branch",
|
||||
"exec": "git checkout stable"
|
||||
},
|
||||
{
|
||||
"desc": "Get any changes to stable in the main project",
|
||||
"exec": "git pull upstream stable"
|
||||
},
|
||||
{
|
||||
"desc": "Install dependencies",
|
||||
"exec": "npm install"
|
||||
},
|
||||
{
|
||||
"desc": "Build the distribution",
|
||||
"exec": "grunt"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
"test": {
|
||||
"desc": "Run automated tests",
|
||||
"steps": ["grunt test"]
|
||||
},
|
||||
|
||||
"contributions": {
|
||||
|
||||
"patch": {
|
||||
"desc": "Urgent fixes for the latest stable version",
|
||||
"new": {
|
||||
"desc": "Start a new patch",
|
||||
"steps": [
|
||||
{
|
||||
"id": "name",
|
||||
"desc": "Name the patch branch",
|
||||
"prompt": {
|
||||
"type": "text",
|
||||
"message": "name"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Check out the release branch and get any updates",
|
||||
"exec": "git checkout stable && git pull upstream stable"
|
||||
},
|
||||
{
|
||||
"desc": "Create the patch branch",
|
||||
"exec": "git checkout -b patch/<%= name %>"
|
||||
},
|
||||
{
|
||||
"desc": "Push the branch to the origin repo",
|
||||
"exec": "git push -u origin patch/<%= name %>"
|
||||
}
|
||||
]
|
||||
},
|
||||
"submit": {
|
||||
"desc": "Submit a pull request for a patch when it's finished",
|
||||
"steps": [
|
||||
{
|
||||
"desc": "Run tests",
|
||||
"contrib": "test"
|
||||
},
|
||||
{
|
||||
"desc": "Check for any unadded changes",
|
||||
"exec": "git diff --exit-code",
|
||||
"fail": "Add and commit all changes before submitting a pull request"
|
||||
},
|
||||
{
|
||||
"desc": "Check for any uncomitted changes",
|
||||
"exec": "git diff --cached --exit-code",
|
||||
"fail": "Add and commit all changes before submitting a pull request"
|
||||
},
|
||||
{
|
||||
"id": "branch",
|
||||
"desc": "Which branch should be submitted? (e.g. 'patch/my-patch')",
|
||||
"prompt": {
|
||||
"type": "text",
|
||||
"message": "branch"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "user",
|
||||
"desc": "Which github user or org are you submitting from?",
|
||||
"prompt": {
|
||||
"type": "text",
|
||||
"message": "user"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Open the github pull request page",
|
||||
"open": "https://github.com/videojs/video.js/compare/videojs:stable...<%= user %>:<%= branch %>"
|
||||
}
|
||||
]
|
||||
},
|
||||
"delete": {
|
||||
"desc": "Delete the current patch branch",
|
||||
"steps": [
|
||||
{
|
||||
"id": "name",
|
||||
"guide": false,
|
||||
"desc": "Get the current branch name",
|
||||
"exec": "git rev-parse --abbrev-ref HEAD"
|
||||
},
|
||||
{
|
||||
"desc": "Confirm you are deleting the correct branch",
|
||||
"prompt": "Delete branch '<%= name %>'?"
|
||||
},
|
||||
{
|
||||
"desc": "Delete the local copy of the branch",
|
||||
"exec": "git branch -D <%= name %>"
|
||||
},
|
||||
{
|
||||
"desc": "Delete the remote copy of the branch",
|
||||
"exec": "git push origin :<%= name %>"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
"release": {
|
||||
"desc": "Create and publish a release",
|
||||
"steps": [
|
||||
{
|
||||
"desc": "Ensure there's no unadded changes",
|
||||
"exec": "git diff --exit-code"
|
||||
},
|
||||
{
|
||||
"desc": "Ensure there's no added changes",
|
||||
"exec": "git diff --cached --exit-code"
|
||||
},
|
||||
{
|
||||
"desc": "Have the changes been merged into the release branch (stable)?",
|
||||
"prompt": "confirm"
|
||||
},
|
||||
{
|
||||
"desc": "Provide the release type",
|
||||
"prompt": {
|
||||
"id": "type",
|
||||
"message": "release type",
|
||||
"default": "patch",
|
||||
"type": "text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Checkout and update the release branch",
|
||||
"exec": "git checkout stable & git pull"
|
||||
},
|
||||
{
|
||||
"desc": "Run tests",
|
||||
"exec": "grunt test"
|
||||
},
|
||||
{
|
||||
"desc": "Update the changelog with the new release",
|
||||
"exec": "grunt chg-release:<%= type %>"
|
||||
},
|
||||
{
|
||||
"desc": "Bump the package version",
|
||||
"exec": "grunt bump-only:<%= type %>"
|
||||
},
|
||||
{
|
||||
"desc": "Build the release",
|
||||
"exec": "grunt dist"
|
||||
},
|
||||
{
|
||||
"desc": "Add the (otherwise ignored) release files",
|
||||
"exec": "git add dist/video-js --force"
|
||||
},
|
||||
{
|
||||
"desc": "Rebuild the docs",
|
||||
"exec": "grunt vjsdocs"
|
||||
},
|
||||
{
|
||||
"desc": "Update the cdn urls in the docs",
|
||||
"exec": "grunt cdn-links"
|
||||
},
|
||||
{
|
||||
"desc": "Tag the release",
|
||||
"exec": "grunt tagrelease"
|
||||
},
|
||||
{
|
||||
"desc": "Push changes to the remote",
|
||||
"exec": "git push origin stable"
|
||||
},
|
||||
{
|
||||
"desc": "Push tags to the remote",
|
||||
"exec": "git push --tags"
|
||||
},
|
||||
{
|
||||
"desc": "Publish to npm",
|
||||
"exec": "npm publish"
|
||||
},
|
||||
{
|
||||
"desc": "Checkout the development branch (master) and merge changes",
|
||||
"exec": "git checkout master && git merge stable"
|
||||
},
|
||||
{
|
||||
"desc": "Remove built dist files to re-ignore them",
|
||||
"exec": "grunt clean:dist"
|
||||
},
|
||||
{
|
||||
"desc": "Commit the removed dist files",
|
||||
"exec": "git add -u && git commit -m 'Removed dist files'"
|
||||
},
|
||||
{
|
||||
"desc": "Push development branch changes",
|
||||
"exec": "git push origin master"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
WEBVTT
|
||||
|
||||
00:00.700 --> 00:04.110
|
||||
Captions describe all relevant audio for the hearing impaired.
|
||||
[ Heroic music playing for a seagull ]
|
||||
|
||||
00:04.500 --> 00:05.000
|
||||
[ Splash!!! ]
|
||||
|
||||
00:05.100 --> 00:06.000
|
||||
[ Sploosh!!! ]
|
||||
|
||||
00:08.000 --> 00:09.225
|
||||
[ Splash...splash...splash splash splash ]
|
||||
|
||||
00:10.525 --> 00:11.255
|
||||
[ Splash, Sploosh again ]
|
||||
|
||||
00:13.500 --> 00:14.984
|
||||
Dolphin: eeeEEEEEeeee!
|
||||
|
||||
00:14.984 --> 00:16.984
|
||||
Dolphin: Squawk! eeeEEE?
|
||||
|
||||
00:25.000 --> 00:28.284
|
||||
[ A whole ton of splashes ]
|
||||
|
||||
00:29.500 --> 00:31.000
|
||||
Mine. Mine. Mine.
|
||||
|
||||
00:34.300 --> 00:36.000
|
||||
Shark: Chomp
|
||||
|
||||
00:36.800 --> 00:37.900
|
||||
Shark: CHOMP!!!
|
||||
|
||||
00:37.861 --> 00:41.193
|
||||
EEEEEEOOOOOOOOOOWHALENOISE
|
||||
|
||||
00:42.593 --> 00:45.611
|
||||
[ BIG SPLASH ]
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Video.js | HTML5 Video Player</title>
|
||||
|
||||
<!-- Chang URLs to wherever Video.js files will be hosted -->
|
||||
<link href="video-js.css" rel="stylesheet" type="text/css">
|
||||
<!-- video.js must be in the <head> for older IEs to work. -->
|
||||
<script src="video.js"></script>
|
||||
|
||||
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
|
||||
<script>
|
||||
videojs.options.flash.swf = "video-js.swf";
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
data-setup="{}">
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
|
||||
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
|
||||
</video>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="16"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="VideoJS" horiz-adv-x="512" >
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph class="hidden" unicode="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
|
||||
<glyph unicode="" d="M 64,416L 224,416L 224,32L 64,32zM 288,416L 448,416L 448,32L 288,32z" />
|
||||
<glyph unicode="" d="M 200.666,440.666 C 213.5,453.5 224,449.15 224,431 L 224,17 C 224-1.15 213.5-5.499 200.666,7.335 L 80,128 L 0,128 L 0,320 L 80,320 L 200.666,440.666 Z" />
|
||||
<glyph unicode="" d="M 274.51,109.49c-6.143,0-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0,147.078c-9.373,9.373-9.373,24.569,0,33.941c 9.373,9.372, 24.568,9.372, 33.941,0
|
||||
c 59.265-59.265, 59.265-155.696,0-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.5,453.5 224,449.15 224,431 L 224,17 C 224-1.15 213.5-5.499 200.666,7.335 L 80,128 L 0,128 L 0,320 L 80,320 L 200.666,440.666 Z" />
|
||||
<glyph unicode="" d="M 359.765,64.235c-6.143,0-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0,33.941
|
||||
c 65.503,65.503, 65.503,172.085,0,237.588c-9.372,9.373-9.372,24.569,0,33.941c 9.372,9.371, 24.569,9.372, 33.941,0
|
||||
C 417.532,335.938, 440,281.696, 440,224c0-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0,147.078c-9.373,9.373-9.373,24.569,0,33.941c 9.373,9.372, 24.568,9.372, 33.941,0
|
||||
c 59.265-59.265, 59.265-155.696,0-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.5,453.5 224,449.15 224,431 L 224,17 C 224-1.15 213.5-5.499 200.666,7.335 L 80,128 L 0,128 L 0,320 L 80,320 L 200.666,440.666 Z" />
|
||||
<glyph unicode="" d="M 445.020,18.98c-6.143,0-12.284,2.343-16.971,7.029c-9.372,9.373-9.372,24.568,0,33.941
|
||||
C 471.868,103.771, 496.001,162.030, 496.001,224c0,61.969-24.133,120.229-67.952,164.049c-9.372,9.373-9.372,24.569,0,33.941
|
||||
c 9.372,9.372, 24.569,9.372, 33.941,0c 52.885-52.886, 82.011-123.2, 82.011-197.99c0-74.791-29.126-145.104-82.011-197.99
|
||||
C 457.304,21.323, 451.162,18.98, 445.020,18.98zM 359.765,64.235c-6.143,0-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0,33.941
|
||||
c 65.503,65.503, 65.503,172.085,0,237.588c-9.372,9.373-9.372,24.569,0,33.941c 9.372,9.371, 24.569,9.372, 33.941,0
|
||||
C 417.532,335.938, 440,281.696, 440,224c0-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0,33.941
|
||||
c 40.55,40.55, 40.55,106.529,0,147.078c-9.373,9.373-9.373,24.569,0,33.941c 9.373,9.372, 24.568,9.372, 33.941,0
|
||||
c 59.265-59.265, 59.265-155.696,0-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.5,453.5 224,449.15 224,431 L 224,17 C 224-1.15 213.5-5.499 200.666,7.335 L 80,128 L 0,128 L 0,320 L 80,320 L 200.666,440.666 Z" horiz-adv-x="544" />
|
||||
<glyph unicode="" d="M 256,480L 96,224L 256-32L 416,224 z" />
|
||||
<glyph unicode="" d="M 0,480 L 687.158,480 L 687.158-35.207 L 0-35.207 L 0,480 z M 622.731,224.638 C 621.878,314.664 618.46,353.922 597.131,381.656 C 593.291,387.629 586.038,391.042 580.065,395.304 C 559.158,410.669 460.593,416.211 346.247,416.211 C 231.896,416.211 128.642,410.669 108.162,395.304 C 101.762,391.042 94.504,387.629 90.242,381.656 C 69.331,353.922 66.349,314.664 65.069,224.638 C 66.349,134.607 69.331,95.353 90.242,67.62 C 94.504,61.22 101.762,58.233 108.162,53.967 C 128.642,38.18 231.896,33.060 346.247,32.207 C 460.593,33.060 559.158,38.18 580.065,53.967 C 586.038,58.233 593.291,61.22 597.131,67.62 C 618.46,95.353 621.878,134.607 622.731,224.638 z M 331.179,247.952 C 325.389,318.401 287.924,359.905 220.901,359.905 C 159.672,359.905 111.54,304.689 111.54,215.965 C 111.54,126.859 155.405,71.267 227.907,71.267 C 285.79,71.267 326.306,113.916 332.701,184.742 L 263.55,184.742 C 260.81,158.468 249.843,138.285 226.69,138.285 C 190.136,138.285 183.435,174.462 183.435,212.92 C 183.435,265.854 198.665,292.886 223.951,292.886 C 246.492,292.886 260.81,276.511 262.939,247.952 L 331.179,247.952 z M 570.013,247.952 C 564.228,318.401 526.758,359.905 459.74,359.905 C 398.507,359.905 350.379,304.689 350.379,215.965 C 350.379,126.859 394.244,71.267 466.746,71.267 C 524.625,71.267 565.14,113.916 571.536,184.742 L 502.384,184.742 C 499.649,158.468 488.682,138.285 465.529,138.285 C 428.971,138.285 422.27,174.462 422.27,212.92 C 422.27,265.854 437.504,292.886 462.785,292.886 C 485.327,292.886 499.649,276.511 501.778,247.952 L 570.013,247.952 z " horiz-adv-x="687.158" />
|
||||
<glyph unicode="" d="M 64,416L 448,416L 448,32L 64,32z" />
|
||||
<glyph unicode="" d="M 192,416A64,64 12780 1 1 320,416A64,64 12780 1 1 192,416zM 327.765,359.765A64,64 12780 1 1 455.765,359.765A64,64 12780 1 1 327.765,359.765zM 416,224A32,32 12780 1 1 480,224A32,32 12780 1 1 416,224zM 359.765,88.235A32,32 12780 1 1 423.765,88.23500000000001A32,32 12780 1 1 359.765,88.23500000000001zM 224.001,32A32,32 12780 1 1 288.001,32A32,32 12780 1 1 224.001,32zM 88.236,88.235A32,32 12780 1 1 152.236,88.23500000000001A32,32 12780 1 1 88.236,88.23500000000001zM 72.236,359.765A48,48 12780 1 1 168.236,359.765A48,48 12780 1 1 72.236,359.765zM 28,224A36,36 12780 1 1 100,224A36,36 12780 1 1 28,224z" />
|
||||
<glyph unicode="" d="M 224,192 L 224-16 L 144,64 L 48-32 L 0,16 L 96,112 L 16,192 ZM 512,432 L 416,336 L 496,256 L 288,256 L 288,464 L 368,384 L 464,480 Z" />
|
||||
<glyph unicode="" d="M 256,448 C 397.385,448 512,354.875 512,240 C 512,125.124 397.385,32 256,32 C 242.422,32 229.095,32.867 216.088,34.522 C 161.099-20.467 95.463-30.328 32-31.776 L 32-18.318 C 66.268-1.529 96,29.052 96,64 C 96,68.877 95.621,73.665 94.918,78.348 C 37.020,116.48 0,174.725 0,240 C 0,354.875 114.615,448 256,448 Z" />
|
||||
<glyph unicode="" d="M 256,480C 114.615,480,0,365.385,0,224s 114.615-256, 256-256s 256,114.615, 256,256S 397.385,480, 256,480z M 256,352
|
||||
c 70.692,0, 128-57.308, 128-128s-57.308-128-128-128s-128,57.308-128,128S 185.308,352, 256,352z M 408.735,71.265
|
||||
C 367.938,30.468, 313.695,8, 256,8c-57.696,0-111.938,22.468-152.735,63.265C 62.468,112.062, 40,166.304, 40,224
|
||||
c0,57.695, 22.468,111.938, 63.265,152.735l 33.941-33.941c0,0,0,0,0,0c-65.503-65.503-65.503-172.085,0-237.588
|
||||
C 168.937,73.475, 211.125,56, 256,56c 44.874,0, 87.062,17.475, 118.794,49.206c 65.503,65.503, 65.503,172.084,0,237.588l 33.941,33.941
|
||||
C 449.532,335.938, 472,281.695, 472,224C 472,166.304, 449.532,112.062, 408.735,71.265z" />
|
||||
<glyph unicode="" d="M 512,224c-0.639,33.431-7.892,66.758-21.288,97.231c-13.352,30.5-32.731,58.129-56.521,80.96
|
||||
c-23.776,22.848-51.972,40.91-82.492,52.826C 321.197,466.979, 288.401,472.693, 256,472c-32.405-0.641-64.666-7.687-94.167-20.678
|
||||
c-29.524-12.948-56.271-31.735-78.367-54.788c-22.112-23.041-39.58-50.354-51.093-79.899C 20.816,287.104, 15.309,255.375, 16,224
|
||||
c 0.643-31.38, 7.482-62.574, 20.067-91.103c 12.544-28.55, 30.738-54.414, 53.055-75.774c 22.305-21.377, 48.736-38.252, 77.307-49.36
|
||||
C 194.988-3.389, 225.652-8.688, 256-8c 30.354,0.645, 60.481,7.277, 88.038,19.457c 27.575,12.141, 52.558,29.74, 73.183,51.322
|
||||
c 20.641,21.57, 36.922,47.118, 47.627,74.715c 6.517,16.729, 10.94,34.2, 13.271,51.899c 0.623-0.036, 1.249-0.060, 1.881-0.060
|
||||
c 17.673,0, 32,14.326, 32,32c0,0.898-0.047,1.786-0.119,2.666L 512,223.999 z M 461.153,139.026c-11.736-26.601-28.742-50.7-49.589-70.59
|
||||
c-20.835-19.905-45.5-35.593-72.122-45.895C 312.828,12.202, 284.297,7.315, 256,8c-28.302,0.649-56.298,6.868-81.91,18.237
|
||||
c-25.625,11.333-48.842,27.745-67.997,47.856c-19.169,20.099-34.264,43.882-44.161,69.529C 51.997,169.264, 47.318,196.729, 48,224
|
||||
c 0.651,27.276, 6.664,54.206, 17.627,78.845c 10.929,24.65, 26.749,46.985, 46.123,65.405c 19.365,18.434, 42.265,32.935, 66.937,42.428
|
||||
C 203.356,420.208, 229.755,424.681, 256,424c 26.25-0.653, 52.114-6.459, 75.781-17.017c 23.676-10.525, 45.128-25.751, 62.812-44.391
|
||||
c 17.698-18.629, 31.605-40.647, 40.695-64.344C 444.412,274.552, 448.679,249.219, 448,224l 0.119,0 c-0.072-0.88-0.119-1.768-0.119-2.666
|
||||
c0-16.506, 12.496-30.087, 28.543-31.812C 473.431,172.111, 468.278,155.113, 461.153,139.026z" />
|
||||
<glyph unicode="" d="M 256,480 C 116.626,480 3.271,368.619 0.076,230.013 C 3.036,350.945 94.992,448 208,448 C 322.875,448 416,347.712 416,224 C 416,197.49 437.49,176 464,176 C 490.51,176 512,197.49 512,224 C 512,365.385 397.385,480 256,480 ZM 256-32 C 395.374-32 508.729,79.381 511.924,217.987 C 508.964,97.055 417.008,0 304,0 C 189.125,0 96,100.288 96,224 C 96,250.51 74.51,272 48,272 C 21.49,272 0,250.51 0,224 C 0,82.615 114.615-32 256-32 Z" />
|
||||
<glyph unicode="" d="M 432,128c-22.58,0-42.96-9.369-57.506-24.415L 158.992,211.336C 159.649,215.462, 160,219.689, 160,224
|
||||
s-0.351,8.538-1.008,12.663l 215.502,107.751C 389.040,329.369, 409.42,320, 432,320c 44.183,0, 80,35.817, 80,80S 476.183,480, 432,480
|
||||
s-80-35.817-80-80c0-4.311, 0.352-8.538, 1.008-12.663L 137.506,279.585C 122.96,294.63, 102.58,304, 80,304c-44.183,0-80-35.818-80-80
|
||||
c0-44.184, 35.817-80, 80-80c 22.58,0, 42.96,9.369, 57.506,24.414l 215.502-107.751C 352.352,56.538, 352,52.311, 352,48
|
||||
c0-44.184, 35.817-80, 80-80s 80,35.816, 80,80C 512,92.182, 476.183,128, 432,128z" />
|
||||
<glyph unicode="" d="M 96,416L 416,224L 96,32 z" />
|
||||
<glyph unicode="" d="M 512,480 L 512,272 L 432,352 L 336,256 L 288,304 L 384,400 L 304,480 ZM 224,144 L 128,48 L 208-32 L 0-32 L 0,176 L 80,96 L 176,192 Z" />
|
||||
<glyph unicode=" " horiz-adv-x="256" />
|
||||
</font></defs></svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 9.6 KiB |
@@ -0,0 +1,766 @@
|
||||
/*!
|
||||
Video.js Default Styles (http://videojs.com)
|
||||
Version 4.4.1
|
||||
Create your own skin at http://designer.videojs.com
|
||||
*/
|
||||
/* SKIN
|
||||
================================================================================
|
||||
The main class name for all skin-specific styles. To make your own skin,
|
||||
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
|
||||
skin name to your video tag instead of the default skin.
|
||||
e.g. <video class="video-js my-skin-name">
|
||||
*/
|
||||
.vjs-default-skin {
|
||||
color: #cccccc;
|
||||
}
|
||||
/* Custom Icon Font
|
||||
--------------------------------------------------------------------------------
|
||||
The control icons are from a custom font. Each icon corresponds to a character
|
||||
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'VideoJS';
|
||||
src: url('font/vjs.eot');
|
||||
src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Base UI Component Classes
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
/* Slider - used for Volume bar and Seek bar */
|
||||
.vjs-default-skin .vjs-slider {
|
||||
/* Replace browser focus hightlight with handle highlight */
|
||||
outline: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
/* background-color-with-alpha */
|
||||
background-color: #333333;
|
||||
background-color: rgba(51, 51, 51, 0.9);
|
||||
}
|
||||
.vjs-default-skin .vjs-slider:focus {
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0 0 2em #ffffff;
|
||||
-moz-box-shadow: 0 0 2em #ffffff;
|
||||
box-shadow: 0 0 2em #ffffff;
|
||||
}
|
||||
.vjs-default-skin .vjs-slider-handle {
|
||||
position: absolute;
|
||||
/* Needed for IE6 */
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.vjs-default-skin .vjs-slider-handle:before {
|
||||
content: "\e009";
|
||||
font-family: VideoJS;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-shadow: 0em 0em 1em #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* Rotate the square icon to make a diamond */
|
||||
/* transform */
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
/* Control Bar
|
||||
--------------------------------------------------------------------------------
|
||||
The default control bar that is a container for most of the controls.
|
||||
*/
|
||||
.vjs-default-skin .vjs-control-bar {
|
||||
/* Start hidden */
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* Place control bar at the bottom of the player box/video.
|
||||
If you want more margin below the control bar, add more height. */
|
||||
bottom: 0;
|
||||
/* Use left/right to stretch to 100% width of player div */
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* Height includes any margin you want above or below control items */
|
||||
height: 3.0em;
|
||||
/* background-color-with-alpha */
|
||||
background-color: #07141e;
|
||||
background-color: rgba(7, 20, 30, 0.7);
|
||||
}
|
||||
/* Show the control bar only once the video has started playing */
|
||||
.vjs-default-skin.vjs-has-started .vjs-control-bar {
|
||||
display: block;
|
||||
/* Visibility needed to make sure things hide in older browsers too. */
|
||||
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
/* transition */
|
||||
-webkit-transition: visibility 0.1s, opacity 0.1s;
|
||||
-moz-transition: visibility 0.1s, opacity 0.1s;
|
||||
-o-transition: visibility 0.1s, opacity 0.1s;
|
||||
transition: visibility 0.1s, opacity 0.1s;
|
||||
}
|
||||
/* Hide the control bar when the video is playing and the user is inactive */
|
||||
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
/* transition */
|
||||
-webkit-transition: visibility 1s, opacity 1s;
|
||||
-moz-transition: visibility 1s, opacity 1s;
|
||||
-o-transition: visibility 1s, opacity 1s;
|
||||
transition: visibility 1s, opacity 1s;
|
||||
}
|
||||
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
|
||||
display: none;
|
||||
}
|
||||
.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
|
||||
display: none;
|
||||
}
|
||||
/* IE8 is flakey with fonts, and you have to change the actual content to force
|
||||
fonts to show/hide properly.
|
||||
- "\9" IE8 hack didn't work for this
|
||||
- Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
|
||||
*/
|
||||
@media \0screen {
|
||||
.vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
/* General styles for individual controls. */
|
||||
.vjs-default-skin .vjs-control {
|
||||
outline: none;
|
||||
position: relative;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 3.0em;
|
||||
width: 4em;
|
||||
}
|
||||
/* FontAwsome button icons */
|
||||
.vjs-default-skin .vjs-control:before {
|
||||
font-family: VideoJS;
|
||||
font-size: 1.5em;
|
||||
line-height: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
/* Replacement for focus outline */
|
||||
.vjs-default-skin .vjs-control:focus:before,
|
||||
.vjs-default-skin .vjs-control:hover:before {
|
||||
text-shadow: 0em 0em 1em #ffffff;
|
||||
}
|
||||
.vjs-default-skin .vjs-control:focus {
|
||||
/* outline: 0; */
|
||||
/* keyboard-only users cannot see the focus on several of the UI elements when
|
||||
this is set to 0 */
|
||||
|
||||
}
|
||||
/* Hide control text visually, but have it available for screenreaders */
|
||||
.vjs-default-skin .vjs-control-text {
|
||||
/* hide-visually */
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
/* Play/Pause
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-play-control {
|
||||
width: 5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.vjs-default-skin .vjs-play-control:before {
|
||||
content: "\e001";
|
||||
}
|
||||
.vjs-default-skin.vjs-playing .vjs-play-control:before {
|
||||
content: "\e002";
|
||||
}
|
||||
/* Volume/Mute
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vjs-default-skin .vjs-mute-control,
|
||||
.vjs-default-skin .vjs-volume-menu-button {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
.vjs-default-skin .vjs-mute-control:before,
|
||||
.vjs-default-skin .vjs-volume-menu-button:before {
|
||||
content: "\e006";
|
||||
}
|
||||
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
|
||||
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
|
||||
content: "\e003";
|
||||
}
|
||||
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
|
||||
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
|
||||
content: "\e004";
|
||||
}
|
||||
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
|
||||
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
|
||||
content: "\e005";
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-control {
|
||||
width: 5em;
|
||||
float: right;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-bar {
|
||||
width: 5em;
|
||||
height: 0.6em;
|
||||
margin: 1.1em auto 0;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
|
||||
height: 2.9em;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-level {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 0.5em;
|
||||
background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-handle:before {
|
||||
font-size: 0.9em;
|
||||
top: -0.2em;
|
||||
left: -0.2em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
|
||||
width: 6em;
|
||||
left: -4em;
|
||||
}
|
||||
/* Progress
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-progress-control {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
font-size: 0.3em;
|
||||
height: 1em;
|
||||
/* Set above the rest of the controls. */
|
||||
top: -1em;
|
||||
/* Shrink the bar slower than it grows. */
|
||||
/* transition */
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
/* On hover, make the progress bar grow to something that's more clickable.
|
||||
This simply changes the overall font for the progress bar, and this
|
||||
updates both the em-based widths and heights, as wells as the icon font */
|
||||
.vjs-default-skin:hover .vjs-progress-control {
|
||||
font-size: .9em;
|
||||
/* Even though we're not changing the top/height, we need to include them in
|
||||
the transition so they're handled correctly. */
|
||||
|
||||
/* transition */
|
||||
-webkit-transition: all 0.2s;
|
||||
-moz-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
/* Box containing play and load progresses. Also acts as seek scrubber. */
|
||||
.vjs-default-skin .vjs-progress-holder {
|
||||
height: 100%;
|
||||
}
|
||||
/* Progress Bars */
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* Needed for IE6 */
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.vjs-default-skin .vjs-play-progress {
|
||||
/*
|
||||
Using a data URI to create the white diagonal lines with a transparent
|
||||
background. Surprisingly works in IE8.
|
||||
Created using http://www.patternify.com
|
||||
Changing the first color value will change the bar color.
|
||||
Also using a paralax effect to make the lines move backwards.
|
||||
The -50% left position makes that happen.
|
||||
*/
|
||||
|
||||
background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
|
||||
}
|
||||
.vjs-default-skin .vjs-load-progress {
|
||||
background: #646464 /* IE8- Fallback */;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.vjs-default-skin .vjs-seek-handle {
|
||||
width: 1.5em;
|
||||
height: 100%;
|
||||
}
|
||||
.vjs-default-skin .vjs-seek-handle:before {
|
||||
padding-top: 0.1em /* Minor adjustment */;
|
||||
}
|
||||
/* Time Display
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-time-controls {
|
||||
font-size: 1em;
|
||||
/* Align vertically by making the line height the same as the control bar */
|
||||
line-height: 3em;
|
||||
}
|
||||
.vjs-default-skin .vjs-current-time {
|
||||
float: left;
|
||||
}
|
||||
.vjs-default-skin .vjs-duration {
|
||||
float: left;
|
||||
}
|
||||
/* Remaining time is in the HTML, but not included in default design */
|
||||
.vjs-default-skin .vjs-remaining-time {
|
||||
display: none;
|
||||
float: left;
|
||||
}
|
||||
.vjs-time-divider {
|
||||
float: left;
|
||||
line-height: 3em;
|
||||
}
|
||||
/* Fullscreen
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-fullscreen-control {
|
||||
width: 3.8em;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
.vjs-default-skin .vjs-fullscreen-control:before {
|
||||
content: "\e000";
|
||||
}
|
||||
/* Switch to the exit icon when the player is in fullscreen */
|
||||
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
|
||||
content: "\e00b";
|
||||
}
|
||||
/* Big Play Button (play button at start)
|
||||
--------------------------------------------------------------------------------
|
||||
Positioning of the play button in the center or other corners can be done more
|
||||
easily in the skin designer. http://designer.videojs.com/
|
||||
*/
|
||||
.vjs-default-skin .vjs-big-play-button {
|
||||
left: 0.5em;
|
||||
top: 0.5em;
|
||||
font-size: 3em;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
width: 4em;
|
||||
height: 2.6em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
/* Need a slightly gray bg so it can be seen on black backgrounds */
|
||||
/* background-color-with-alpha */
|
||||
background-color: #07141e;
|
||||
background-color: rgba(7, 20, 30, 0.7);
|
||||
border: 0.1em solid #3b4249;
|
||||
/* border-radius */
|
||||
-webkit-border-radius: 0.8em;
|
||||
-moz-border-radius: 0.8em;
|
||||
border-radius: 0.8em;
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
|
||||
-moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
|
||||
/* transition */
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
/* Optionally center */
|
||||
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
|
||||
/* Center it horizontally */
|
||||
left: 50%;
|
||||
margin-left: -2.1em;
|
||||
/* Center it vertically */
|
||||
top: 50%;
|
||||
margin-top: -1.4000000000000001em;
|
||||
}
|
||||
/* Hide if controls are disabled */
|
||||
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
|
||||
display: none;
|
||||
}
|
||||
/* Hide when video starts playing */
|
||||
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
|
||||
display: none;
|
||||
}
|
||||
/* Hide on mobile devices. Remove when we stop using native controls
|
||||
by default on mobile */
|
||||
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
|
||||
display: none;
|
||||
}
|
||||
.vjs-default-skin:hover .vjs-big-play-button,
|
||||
.vjs-default-skin .vjs-big-play-button:focus {
|
||||
outline: 0;
|
||||
border-color: #fff;
|
||||
/* IE8 needs a non-glow hover state */
|
||||
background-color: #505050;
|
||||
background-color: rgba(50, 50, 50, 0.75);
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0 0 3em #ffffff;
|
||||
-moz-box-shadow: 0 0 3em #ffffff;
|
||||
box-shadow: 0 0 3em #ffffff;
|
||||
/* transition */
|
||||
-webkit-transition: all 0s;
|
||||
-moz-transition: all 0s;
|
||||
-o-transition: all 0s;
|
||||
transition: all 0s;
|
||||
}
|
||||
.vjs-default-skin .vjs-big-play-button:before {
|
||||
content: "\e001";
|
||||
font-family: VideoJS;
|
||||
/* In order to center the play icon vertically we need to set the line height
|
||||
to the same as the button height */
|
||||
|
||||
line-height: 2.6em;
|
||||
text-shadow: 0.05em 0.05em 0.1em #000;
|
||||
text-align: center /* Needed for IE8 */;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* Loading Spinner
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-loading-spinner {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: -0.5em;
|
||||
margin-top: -0.5em;
|
||||
opacity: 0.75;
|
||||
/* animation */
|
||||
-webkit-animation: spin 1.5s infinite linear;
|
||||
-moz-animation: spin 1.5s infinite linear;
|
||||
-o-animation: spin 1.5s infinite linear;
|
||||
animation: spin 1.5s infinite linear;
|
||||
}
|
||||
.vjs-default-skin .vjs-loading-spinner:before {
|
||||
content: "\e01e";
|
||||
font-family: VideoJS;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
text-shadow: 0em 0em 0.1em #000;
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% {
|
||||
-o-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-o-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
/* Menu Buttons (Captions/Subtitles/etc.)
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.vjs-default-skin .vjs-menu-button {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0em;
|
||||
/* (Width of vjs-menu - width of button) / 2 */
|
||||
|
||||
width: 0em;
|
||||
height: 0em;
|
||||
margin-bottom: 3em;
|
||||
border-left: 2em solid transparent;
|
||||
border-right: 2em solid transparent;
|
||||
border-top: 1.55em solid #000000;
|
||||
/* Same width top as ul bottom */
|
||||
|
||||
border-top-color: rgba(7, 40, 50, 0.5);
|
||||
/* Same as ul background */
|
||||
|
||||
}
|
||||
/* Button Pop-up Menu */
|
||||
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 10em;
|
||||
bottom: 1.5em;
|
||||
/* Same bottom as vjs-menu border-top */
|
||||
|
||||
max-height: 15em;
|
||||
overflow: auto;
|
||||
left: -5em;
|
||||
/* Width of menu - width of button / 2 */
|
||||
|
||||
/* background-color-with-alpha */
|
||||
background-color: #07141e;
|
||||
background-color: rgba(7, 20, 30, 0.7);
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
|
||||
-moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
|
||||
box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
|
||||
display: block;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.3em 0 0.3em 0;
|
||||
line-height: 1.4em;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
|
||||
background-color: #000;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button ul li:focus,
|
||||
.vjs-default-skin .vjs-menu-button ul li:hover,
|
||||
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
|
||||
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
|
||||
outline: 0;
|
||||
color: #111;
|
||||
/* background-color-with-alpha */
|
||||
background-color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0 0 1em #ffffff;
|
||||
-moz-box-shadow: 0 0 1em #ffffff;
|
||||
box-shadow: 0 0 1em #ffffff;
|
||||
}
|
||||
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
padding: 0;
|
||||
margin: 0 0 0.3em 0;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
/* Subtitles Button */
|
||||
.vjs-default-skin .vjs-subtitles-button:before {
|
||||
content: "\e00c";
|
||||
}
|
||||
/* Captions Button */
|
||||
.vjs-default-skin .vjs-captions-button:before {
|
||||
content: "\e008";
|
||||
}
|
||||
/* Replacement for focus outline */
|
||||
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
|
||||
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
|
||||
/* box-shadow */
|
||||
-webkit-box-shadow: 0 0 1em #ffffff;
|
||||
-moz-box-shadow: 0 0 1em #ffffff;
|
||||
box-shadow: 0 0 1em #ffffff;
|
||||
}
|
||||
/*
|
||||
REQUIRED STYLES (be careful overriding)
|
||||
================================================================================
|
||||
When loading the player, the video tag is replaced with a DIV,
|
||||
that will hold the video tag or object tag for other playback methods.
|
||||
The div contains the video playback element (Flash or HTML5) and controls,
|
||||
and sets the width and height of the video.
|
||||
|
||||
** If you want to add some kind of border/padding (e.g. a frame), or special
|
||||
positioning, use another containing element. Otherwise you risk messing up
|
||||
control positioning and full window mode. **
|
||||
*/
|
||||
.video-js {
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
/* Start with 10px for base font size so other dimensions can be em based and
|
||||
easily calculable. */
|
||||
|
||||
font-size: 10px;
|
||||
/* Allow poster to be vertially aligned. */
|
||||
|
||||
vertical-align: middle;
|
||||
/* display: table-cell; */
|
||||
/*This works in Safari but not Firefox.*/
|
||||
|
||||
/* Provide some basic defaults for fonts */
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
/* Avoiding helvetica: issue #376 */
|
||||
|
||||
font-family: Arial, sans-serif;
|
||||
/* Turn off user selection (text highlighting) by default.
|
||||
The majority of player components will not be text blocks.
|
||||
Text areas will need to turn user selection back on. */
|
||||
|
||||
/* user-select */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/* Playback technology elements expand to the width/height of the containing div
|
||||
<video> or <object> */
|
||||
.video-js .vjs-tech {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
|
||||
checking fullScreenEnabled. */
|
||||
.video-js:-moz-full-screen {
|
||||
position: absolute;
|
||||
}
|
||||
/* Fullscreen Styles */
|
||||
body.vjs-full-window {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
/* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
|
||||
overflow-y: auto;
|
||||
}
|
||||
.video-js.vjs-fullscreen {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
/* IE6 full-window (underscore hack) */
|
||||
_position: absolute;
|
||||
}
|
||||
.video-js:-webkit-full-screen {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.video-js.vjs-fullscreen.vjs-user-inactive {
|
||||
cursor: none;
|
||||
}
|
||||
/* Poster Styles */
|
||||
.vjs-poster {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.vjs-poster img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-height: 100%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/* Hide the poster when native controls are used otherwise it covers them */
|
||||
.video-js.vjs-using-native-controls .vjs-poster {
|
||||
display: none;
|
||||
}
|
||||
/* Text Track Styles */
|
||||
/* Overall track holder for both captions and subtitles */
|
||||
.video-js .vjs-text-track-display {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 4em;
|
||||
/* Leave padding on left and right */
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
/* Individual tracks */
|
||||
.video-js .vjs-text-track {
|
||||
display: none;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
margin-bottom: 0.1em;
|
||||
/* Transparent black background, or fallback to all black (oldIE) */
|
||||
/* background-color-with-alpha */
|
||||
background-color: #000000;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.video-js .vjs-subtitles {
|
||||
color: #ffffff /* Subtitles are white */;
|
||||
}
|
||||
.video-js .vjs-captions {
|
||||
color: #ffcc66 /* Captions are yellow */;
|
||||
}
|
||||
.vjs-tt-cue {
|
||||
display: block;
|
||||
}
|
||||
/* Hide disabled or unsupported controls */
|
||||
.vjs-default-skin .vjs-hidden {
|
||||
display: none;
|
||||
}
|
||||
.vjs-lock-showing {
|
||||
display: block !important;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
/* -----------------------------------------------------------------------------
|
||||
The original source of this file lives at
|
||||
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
|
||||
@@ -0,0 +1,137 @@
|
||||
/*! Video.js v4.4.1 Copyright 2014 Brightcove, Inc. https://github.com/videojs/video.js/blob/master/LICENSE */
|
||||
(function() {var b=void 0,f=!0,h=null,l=!1;function m(){return function(){}}function p(a){return function(){return this[a]}}function r(a){return function(){return a}}var t;document.createElement("video");document.createElement("audio");document.createElement("track");function u(a,c,d){if("string"===typeof a){0===a.indexOf("#")&&(a=a.slice(1));if(u.va[a])return u.va[a];a=u.u(a)}if(!a||!a.nodeName)throw new TypeError("The element or ID supplied is not valid. (videojs)");return a.player||new u.Player(a,c,d)}
|
||||
var videojs=u;window.Vd=window.Wd=u;u.Qb="4.4";u.Dc="https:"==document.location.protocol?"https://":"http://";u.options={techOrder:["html5","flash"],html5:{},flash:{},width:300,height:150,defaultVolume:0,children:{mediaLoader:{},posterImage:{},textTrackDisplay:{},loadingSpinner:{},bigPlayButton:{},controlBar:{}},notSupportedMessage:'Sorry, no compatible source and playback technology were found for this video. Try using another browser like <a href="http://bit.ly/ccMUEC">Chrome</a> or download the latest <a href="http://adobe.ly/mwfN1">Adobe Flash Player</a>.'};
|
||||
"GENERATED_CDN_VSN"!==u.Qb&&(videojs.options.flash.swf=u.Dc+"vjs.zencdn.net/"+u.Qb+"/video-js.swf");u.va={};"function"===typeof define&&define.amd?define([],function(){return videojs}):"object"===typeof exports&&"object"===typeof module&&(module.exports=videojs);u.ka=u.CoreObject=m();
|
||||
u.ka.extend=function(a){var c,d;a=a||{};c=a.init||a.h||this.prototype.init||this.prototype.h||m();d=function(){c.apply(this,arguments)};d.prototype=u.k.create(this.prototype);d.prototype.constructor=d;d.extend=u.ka.extend;d.create=u.ka.create;for(var e in a)a.hasOwnProperty(e)&&(d.prototype[e]=a[e]);return d};u.ka.create=function(){var a=u.k.create(this.prototype);this.apply(a,arguments);return a};
|
||||
u.d=function(a,c,d){var e=u.getData(a);e.z||(e.z={});e.z[c]||(e.z[c]=[]);d.s||(d.s=u.s++);e.z[c].push(d);e.U||(e.disabled=l,e.U=function(c){if(!e.disabled){c=u.hc(c);var d=e.z[c.type];if(d)for(var d=d.slice(0),k=0,q=d.length;k<q&&!c.oc();k++)d[k].call(a,c)}});1==e.z[c].length&&(document.addEventListener?a.addEventListener(c,e.U,l):document.attachEvent&&a.attachEvent("on"+c,e.U))};
|
||||
u.o=function(a,c,d){if(u.lc(a)){var e=u.getData(a);if(e.z)if(c){var g=e.z[c];if(g){if(d){if(d.s)for(e=0;e<g.length;e++)g[e].s===d.s&&g.splice(e--,1)}else e.z[c]=[];u.dc(a,c)}}else for(g in e.z)c=g,e.z[c]=[],u.dc(a,c)}};u.dc=function(a,c){var d=u.getData(a);0===d.z[c].length&&(delete d.z[c],document.removeEventListener?a.removeEventListener(c,d.U,l):document.detachEvent&&a.detachEvent("on"+c,d.U));u.Ab(d.z)&&(delete d.z,delete d.U,delete d.disabled);u.Ab(d)&&u.sc(a)};
|
||||
u.hc=function(a){function c(){return f}function d(){return l}if(!a||!a.Bb){var e=a||window.event;a={};for(var g in e)"layerX"!==g&&("layerY"!==g&&"keyboardEvent.keyLocation"!==g)&&("returnValue"==g&&e.preventDefault||(a[g]=e[g]));a.target||(a.target=a.srcElement||document);a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement;a.preventDefault=function(){e.preventDefault&&e.preventDefault();a.returnValue=l;a.zb=c};a.zb=d;a.stopPropagation=function(){e.stopPropagation&&e.stopPropagation();
|
||||
a.cancelBubble=f;a.Bb=c};a.Bb=d;a.stopImmediatePropagation=function(){e.stopImmediatePropagation&&e.stopImmediatePropagation();a.oc=c;a.stopPropagation()};a.oc=d;if(a.clientX!=h){g=document.documentElement;var j=document.body;a.pageX=a.clientX+(g&&g.scrollLeft||j&&j.scrollLeft||0)-(g&&g.clientLeft||j&&j.clientLeft||0);a.pageY=a.clientY+(g&&g.scrollTop||j&&j.scrollTop||0)-(g&&g.clientTop||j&&j.clientTop||0)}a.which=a.charCode||a.keyCode;a.button!=h&&(a.button=a.button&1?0:a.button&4?1:a.button&2?2:
|
||||
0)}return a};u.j=function(a,c){var d=u.lc(a)?u.getData(a):{},e=a.parentNode||a.ownerDocument;"string"===typeof c&&(c={type:c,target:a});c=u.hc(c);d.U&&d.U.call(a,c);if(e&&!c.Bb()&&c.bubbles!==l)u.j(e,c);else if(!e&&!c.zb()&&(d=u.getData(c.target),c.target[c.type])){d.disabled=f;if("function"===typeof c.target[c.type])c.target[c.type]();d.disabled=l}return!c.zb()};u.T=function(a,c,d){function e(){u.o(a,c,e);d.apply(this,arguments)}e.s=d.s=d.s||u.s++;u.d(a,c,e)};var v=Object.prototype.hasOwnProperty;
|
||||
u.e=function(a,c){var d,e;d=document.createElement(a||"div");for(e in c)v.call(c,e)&&(-1!==e.indexOf("aria-")||"role"==e?d.setAttribute(e,c[e]):d[e]=c[e]);return d};u.Y=function(a){return a.charAt(0).toUpperCase()+a.slice(1)};u.k={};u.k.create=Object.create||function(a){function c(){}c.prototype=a;return new c};u.k.ra=function(a,c,d){for(var e in a)v.call(a,e)&&c.call(d||this,e,a[e])};u.k.B=function(a,c){if(!c)return a;for(var d in c)v.call(c,d)&&(a[d]=c[d]);return a};
|
||||
u.k.Vc=function(a,c){var d,e,g;a=u.k.copy(a);for(d in c)v.call(c,d)&&(e=a[d],g=c[d],a[d]=u.k.Ma(e)&&u.k.Ma(g)?u.k.Vc(e,g):c[d]);return a};u.k.copy=function(a){return u.k.B({},a)};u.k.Ma=function(a){return!!a&&"object"===typeof a&&"[object Object]"===a.toString()&&a.constructor===Object};u.bind=function(a,c,d){function e(){return c.apply(a,arguments)}c.s||(c.s=u.s++);e.s=d?d+"_"+c.s:c.s;return e};u.pa={};u.s=1;u.expando="vdata"+(new Date).getTime();
|
||||
u.getData=function(a){var c=a[u.expando];c||(c=a[u.expando]=u.s++,u.pa[c]={});return u.pa[c]};u.lc=function(a){a=a[u.expando];return!(!a||u.Ab(u.pa[a]))};u.sc=function(a){var c=a[u.expando];if(c){delete u.pa[c];try{delete a[u.expando]}catch(d){a.removeAttribute?a.removeAttribute(u.expando):a[u.expando]=h}}};u.Ab=function(a){for(var c in a)if(a[c]!==h)return l;return f};u.n=function(a,c){-1==(" "+a.className+" ").indexOf(" "+c+" ")&&(a.className=""===a.className?c:a.className+" "+c)};
|
||||
u.t=function(a,c){var d,e;if(-1!=a.className.indexOf(c)){d=a.className.split(" ");for(e=d.length-1;0<=e;e--)d[e]===c&&d.splice(e,1);a.className=d.join(" ")}};u.ea=u.e("video");u.I=navigator.userAgent;u.Jc=/iPhone/i.test(u.I);u.Ic=/iPad/i.test(u.I);u.Kc=/iPod/i.test(u.I);u.Hc=u.Jc||u.Ic||u.Kc;var aa=u,w;var x=u.I.match(/OS (\d+)_/i);w=x&&x[1]?x[1]:b;aa.Hd=w;u.Gc=/Android/i.test(u.I);var ba=u,y;var z=u.I.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i),A,B;
|
||||
z?(A=z[1]&&parseFloat(z[1]),B=z[2]&&parseFloat(z[2]),y=A&&B?parseFloat(z[1]+"."+z[2]):A?A:h):y=h;ba.Ec=y;u.Lc=u.Gc&&/webkit/i.test(u.I)&&2.3>u.Ec;u.Tb=/Firefox/i.test(u.I);u.Id=/Chrome/i.test(u.I);u.Zb=!!("ontouchstart"in window||window.Fc&&document instanceof window.Fc);
|
||||
u.wb=function(a){var c,d,e,g;c={};if(a&&a.attributes&&0<a.attributes.length){d=a.attributes;for(var j=d.length-1;0<=j;j--){e=d[j].name;g=d[j].value;if("boolean"===typeof a[e]||-1!==",autoplay,controls,loop,muted,default,".indexOf(","+e+","))g=g!==h?f:l;c[e]=g}}return c};
|
||||
u.Md=function(a,c){var d="";document.defaultView&&document.defaultView.getComputedStyle?d=document.defaultView.getComputedStyle(a,"").getPropertyValue(c):a.currentStyle&&(d=a["client"+c.substr(0,1).toUpperCase()+c.substr(1)]+"px");return d};u.yb=function(a,c){c.firstChild?c.insertBefore(a,c.firstChild):c.appendChild(a)};u.Nb={};u.u=function(a){0===a.indexOf("#")&&(a=a.slice(1));return document.getElementById(a)};
|
||||
u.ta=function(a,c){c=c||a;var d=Math.floor(a%60),e=Math.floor(a/60%60),g=Math.floor(a/3600),j=Math.floor(c/60%60),k=Math.floor(c/3600);if(isNaN(a)||Infinity===a)g=e=d="-";g=0<g||0<k?g+":":"";return g+(((g||10<=j)&&10>e?"0"+e:e)+":")+(10>d?"0"+d:d)};u.Rc=function(){document.body.focus();document.onselectstart=r(l)};u.Cd=function(){document.onselectstart=r(f)};u.trim=function(a){return(a+"").replace(/^\s+|\s+$/g,"")};u.round=function(a,c){c||(c=0);return Math.round(a*Math.pow(10,c))/Math.pow(10,c)};
|
||||
u.sb=function(a,c){return{length:1,start:function(){return a},end:function(){return c}}};
|
||||
u.get=function(a,c,d){var e,g;"undefined"===typeof XMLHttpRequest&&(window.XMLHttpRequest=function(){try{return new window.ActiveXObject("Msxml2.XMLHTTP.6.0")}catch(a){}try{return new window.ActiveXObject("Msxml2.XMLHTTP.3.0")}catch(c){}try{return new window.ActiveXObject("Msxml2.XMLHTTP")}catch(d){}throw Error("This browser does not support XMLHttpRequest.");});g=new XMLHttpRequest;try{g.open("GET",a)}catch(j){d(j)}e=0===a.indexOf("file:")||0===window.location.href.indexOf("file:")&&-1===a.indexOf("http");
|
||||
g.onreadystatechange=function(){4===g.readyState&&(200===g.status||e&&0===g.status?c(g.responseText):d&&d())};try{g.send()}catch(k){d&&d(k)}};u.ud=function(a){try{var c=window.localStorage||l;c&&(c.volume=a)}catch(d){22==d.code||1014==d.code?u.log("LocalStorage Full (VideoJS)",d):18==d.code?u.log("LocalStorage not allowed (VideoJS)",d):u.log("LocalStorage Error (VideoJS)",d)}};u.jc=function(a){a.match(/^https?:\/\//)||(a=u.e("div",{innerHTML:'<a href="'+a+'">x</a>'}).firstChild.href);return a};
|
||||
u.log=function(){u.log.history=u.log.history||[];u.log.history.push(arguments);window.console&&window.console.log(Array.prototype.slice.call(arguments))};u.bd=function(a){var c,d;a.getBoundingClientRect&&a.parentNode&&(c=a.getBoundingClientRect());if(!c)return{left:0,top:0};a=document.documentElement;d=document.body;return{left:c.left+(window.pageXOffset||d.scrollLeft)-(a.clientLeft||d.clientLeft||0),top:c.top+(window.pageYOffset||d.scrollTop)-(a.clientTop||d.clientTop||0)}};u.ja={};
|
||||
u.ja.Fb=function(a,c){var d,e,g;a=u.k.copy(a);for(d in c)c.hasOwnProperty(d)&&(e=a[d],g=c[d],a[d]=u.k.Ma(e)&&u.k.Ma(g)?u.ja.Fb(e,g):c[d]);return a};
|
||||
u.b=u.ka.extend({h:function(a,c,d){this.c=a;this.g=u.k.copy(this.g);c=this.options(c);this.Q=c.id||(c.el&&c.el.id?c.el.id:a.id()+"_component_"+u.s++);this.jd=c.name||h;this.a=c.el||this.e();this.J=[];this.Ia={};this.Ja={};this.mc();this.H(d);if(c.tc!==l){var e,g;e=u.bind(this.C(),this.C().reportUserActivity);this.d("touchstart",function(){e();clearInterval(g);g=setInterval(e,250)});a=function(){e();clearInterval(g)};this.d("touchmove",e);this.d("touchend",a);this.d("touchcancel",a)}}});t=u.b.prototype;
|
||||
t.dispose=function(){this.j({type:"dispose",bubbles:l});if(this.J)for(var a=this.J.length-1;0<=a;a--)this.J[a].dispose&&this.J[a].dispose();this.Ja=this.Ia=this.J=h;this.o();this.a.parentNode&&this.a.parentNode.removeChild(this.a);u.sc(this.a);this.a=h};t.c=f;t.C=p("c");t.options=function(a){return a===b?this.g:this.g=u.ja.Fb(this.g,a)};t.e=function(a,c){return u.e(a,c)};t.u=p("a");t.Ka=function(){return this.F||this.a};t.id=p("Q");t.name=p("jd");t.children=p("J");t.dd=function(a){return this.Ia[a]};
|
||||
t.fa=function(a){return this.Ja[a]};t.X=function(a,c){var d,e;"string"===typeof a?(e=a,c=c||{},d=c.componentClass||u.Y(e),c.name=e,d=new window.videojs[d](this.c||this,c)):d=a;this.J.push(d);"function"===typeof d.id&&(this.Ia[d.id()]=d);(e=e||d.name&&d.name())&&(this.Ja[e]=d);"function"===typeof d.el&&d.el()&&this.Ka().appendChild(d.el());return d};
|
||||
t.removeChild=function(a){"string"===typeof a&&(a=this.fa(a));if(a&&this.J){for(var c=l,d=this.J.length-1;0<=d;d--)if(this.J[d]===a){c=f;this.J.splice(d,1);break}c&&(this.Ia[a.id]=h,this.Ja[a.name]=h,(c=a.u())&&c.parentNode===this.Ka()&&this.Ka().removeChild(a.u()))}};t.mc=function(){var a=this.g;if(a&&a.children){var c=this;u.k.ra(a.children,function(a,e){e!==l&&!e.loadEvent&&(c[a]=c.X(a,e))})}};t.P=r("");t.d=function(a,c){u.d(this.a,a,u.bind(this,c));return this};
|
||||
t.o=function(a,c){u.o(this.a,a,c);return this};t.T=function(a,c){u.T(this.a,a,u.bind(this,c));return this};t.j=function(a,c){u.j(this.a,a,c);return this};t.H=function(a){a&&(this.$?a.call(this):(this.Ta===b&&(this.Ta=[]),this.Ta.push(a)));return this};t.Wa=function(){this.$=f;var a=this.Ta;if(a&&0<a.length){for(var c=0,d=a.length;c<d;c++)a[c].call(this);this.Ta=[];this.j("ready")}};t.n=function(a){u.n(this.a,a);return this};t.t=function(a){u.t(this.a,a);return this};
|
||||
t.show=function(){this.a.style.display="block";return this};t.D=function(){this.a.style.display="none";return this};function D(a){a.t("vjs-lock-showing")}t.disable=function(){this.D();this.show=m()};t.width=function(a,c){return E(this,"width",a,c)};t.height=function(a,c){return E(this,"height",a,c)};t.Xc=function(a,c){return this.width(a,f).height(c)};
|
||||
function E(a,c,d,e){if(d!==b)return a.a.style[c]=-1!==(""+d).indexOf("%")||-1!==(""+d).indexOf("px")?d:"auto"===d?"":d+"px",e||a.j("resize"),a;if(!a.a)return 0;d=a.a.style[c];e=d.indexOf("px");return-1!==e?parseInt(d.slice(0,e),10):parseInt(a.a["offset"+u.Y(c)],10)}
|
||||
u.q=u.b.extend({h:function(a,c){u.b.call(this,a,c);var d=l;this.d("touchstart",function(a){a.preventDefault();d=f});this.d("touchmove",function(){d=l});var e=this;this.d("touchend",function(a){d&&e.p(a);a.preventDefault()});this.d("click",this.p);this.d("focus",this.Pa);this.d("blur",this.Oa)}});t=u.q.prototype;
|
||||
t.e=function(a,c){c=u.k.B({className:this.P(),innerHTML:'<div class="vjs-control-content"><span class="vjs-control-text">'+(this.oa||"Need Text")+"</span></div>",role:"button","aria-live":"polite",tabIndex:0},c);return u.b.prototype.e.call(this,a,c)};t.P=function(){return"vjs-control "+u.b.prototype.P.call(this)};t.p=m();t.Pa=function(){u.d(document,"keyup",u.bind(this,this.aa))};t.aa=function(a){if(32==a.which||13==a.which)a.preventDefault(),this.p()};
|
||||
t.Oa=function(){u.o(document,"keyup",u.bind(this,this.aa))};u.N=u.b.extend({h:function(a,c){u.b.call(this,a,c);this.Qc=this.fa(this.g.barName);this.handle=this.fa(this.g.handleName);a.d(this.qc,u.bind(this,this.update));this.d("mousedown",this.Qa);this.d("touchstart",this.Qa);this.d("focus",this.Pa);this.d("blur",this.Oa);this.d("click",this.p);this.c.d("controlsvisible",u.bind(this,this.update));a.H(u.bind(this,this.update));this.O={}}});t=u.N.prototype;
|
||||
t.e=function(a,c){c=c||{};c.className+=" vjs-slider";c=u.k.B({role:"slider","aria-valuenow":0,"aria-valuemin":0,"aria-valuemax":100,tabIndex:0},c);return u.b.prototype.e.call(this,a,c)};t.Qa=function(a){a.preventDefault();u.Rc();this.O.move=u.bind(this,this.Hb);this.O.end=u.bind(this,this.Ib);u.d(document,"mousemove",this.O.move);u.d(document,"mouseup",this.O.end);u.d(document,"touchmove",this.O.move);u.d(document,"touchend",this.O.end);this.Hb(a)};
|
||||
t.Ib=function(){u.Cd();u.o(document,"mousemove",this.O.move,l);u.o(document,"mouseup",this.O.end,l);u.o(document,"touchmove",this.O.move,l);u.o(document,"touchend",this.O.end,l);this.update()};t.update=function(){if(this.a){var a,c=this.xb(),d=this.handle,e=this.Qc;isNaN(c)&&(c=0);a=c;if(d){a=this.a.offsetWidth;var g=d.u().offsetWidth;a=g?g/a:0;c*=1-a;a=c+a/2;d.u().style.left=u.round(100*c,2)+"%"}e.u().style.width=u.round(100*a,2)+"%"}};
|
||||
function F(a,c){var d,e,g,j;d=a.a;e=u.bd(d);j=g=d.offsetWidth;d=a.handle;if(a.g.Dd)return j=e.top,e=c.changedTouches?c.changedTouches[0].pageY:c.pageY,d&&(d=d.u().offsetHeight,j+=d/2,g-=d),Math.max(0,Math.min(1,(j-e+g)/g));g=e.left;e=c.changedTouches?c.changedTouches[0].pageX:c.pageX;d&&(d=d.u().offsetWidth,g+=d/2,j-=d);return Math.max(0,Math.min(1,(e-g)/j))}t.Pa=function(){u.d(document,"keyup",u.bind(this,this.aa))};
|
||||
t.aa=function(a){37==a.which?(a.preventDefault(),this.wc()):39==a.which&&(a.preventDefault(),this.xc())};t.Oa=function(){u.o(document,"keyup",u.bind(this,this.aa))};t.p=function(a){a.stopImmediatePropagation();a.preventDefault()};u.V=u.b.extend();u.V.prototype.defaultValue=0;u.V.prototype.e=function(a,c){c=c||{};c.className+=" vjs-slider-handle";c=u.k.B({innerHTML:'<span class="vjs-control-text">'+this.defaultValue+"</span>"},c);return u.b.prototype.e.call(this,"div",c)};u.la=u.b.extend();
|
||||
function ca(a,c){a.X(c);c.d("click",u.bind(a,function(){D(this)}))}u.la.prototype.e=function(){var a=this.options().Tc||"ul";this.F=u.e(a,{className:"vjs-menu-content"});a=u.b.prototype.e.call(this,"div",{append:this.F,className:"vjs-menu"});a.appendChild(this.F);u.d(a,"click",function(a){a.preventDefault();a.stopImmediatePropagation()});return a};u.M=u.q.extend({h:function(a,c){u.q.call(this,a,c);this.selected(c.selected)}});
|
||||
u.M.prototype.e=function(a,c){return u.q.prototype.e.call(this,"li",u.k.B({className:"vjs-menu-item",innerHTML:this.g.label},c))};u.M.prototype.p=function(){this.selected(f)};u.M.prototype.selected=function(a){a?(this.n("vjs-selected"),this.a.setAttribute("aria-selected",f)):(this.t("vjs-selected"),this.a.setAttribute("aria-selected",l))};
|
||||
u.R=u.q.extend({h:function(a,c){u.q.call(this,a,c);this.ua=this.La();this.X(this.ua);this.K&&0===this.K.length&&this.D();this.d("keyup",this.aa);this.a.setAttribute("aria-haspopup",f);this.a.setAttribute("role","button")}});t=u.R.prototype;t.na=l;t.La=function(){var a=new u.la(this.c);this.options().title&&a.u().appendChild(u.e("li",{className:"vjs-menu-title",innerHTML:u.Y(this.A),Ad:-1}));if(this.K=this.createItems())for(var c=0;c<this.K.length;c++)ca(a,this.K[c]);return a};t.qa=m();
|
||||
t.P=function(){return this.className+" vjs-menu-button "+u.q.prototype.P.call(this)};t.Pa=m();t.Oa=m();t.p=function(){this.T("mouseout",u.bind(this,function(){D(this.ua);this.a.blur()}));this.na?G(this):H(this)};t.aa=function(a){a.preventDefault();32==a.which||13==a.which?this.na?G(this):H(this):27==a.which&&this.na&&G(this)};function H(a){a.na=f;a.ua.n("vjs-lock-showing");a.a.setAttribute("aria-pressed",f);a.K&&0<a.K.length&&a.K[0].u().focus()}
|
||||
function G(a){a.na=l;D(a.ua);a.a.setAttribute("aria-pressed",l)}
|
||||
u.Player=u.b.extend({h:function(a,c,d){this.L=a;a.id=a.id||"vjs_video_"+u.s++;c=u.k.B(da(a),c);this.v={};this.rc=c.poster;this.rb=c.controls;a.controls=l;c.tc=l;u.b.call(this,this,c,d);this.controls()?this.n("vjs-controls-enabled"):this.n("vjs-controls-disabled");this.T("play",function(a){u.j(this.a,{type:"firstplay",target:this.a})||(a.preventDefault(),a.stopPropagation(),a.stopImmediatePropagation())});this.d("ended",this.kd);this.d("play",this.Kb);this.d("firstplay",this.ld);this.d("pause",this.Jb);
|
||||
this.d("progress",this.nd);this.d("durationchange",this.pc);this.d("error",this.Gb);this.d("fullscreenchange",this.md);u.va[this.Q]=this;c.plugins&&u.k.ra(c.plugins,function(a,c){this[a](c)},this);var e,g,j,k;e=u.bind(this,this.reportUserActivity);this.d("mousedown",function(){e();clearInterval(g);g=setInterval(e,250)});this.d("mousemove",e);this.d("mouseup",function(){e();clearInterval(g)});this.d("keydown",e);this.d("keyup",e);j=setInterval(u.bind(this,function(){this.ia&&(this.ia=l,this.userActive(f),
|
||||
clearTimeout(k),k=setTimeout(u.bind(this,function(){this.ia||this.userActive(l)}),2E3))}),250);this.d("dispose",function(){clearInterval(j);clearTimeout(k)})}});t=u.Player.prototype;t.g=u.options;t.dispose=function(){this.j("dispose");this.o("dispose");u.va[this.Q]=h;this.L&&this.L.player&&(this.L.player=h);this.a&&this.a.player&&(this.a.player=h);clearInterval(this.Sa);this.wa();this.i&&this.i.dispose();u.b.prototype.dispose.call(this)};
|
||||
function da(a){var c={sources:[],tracks:[]};u.k.B(c,u.wb(a));if(a.hasChildNodes()){var d,e,g,j;a=a.childNodes;g=0;for(j=a.length;g<j;g++)d=a[g],e=d.nodeName.toLowerCase(),"source"===e?c.sources.push(u.wb(d)):"track"===e&&c.tracks.push(u.wb(d))}return c}
|
||||
t.e=function(){var a=this.a=u.b.prototype.e.call(this,"div"),c=this.L;c.removeAttribute("width");c.removeAttribute("height");if(c.hasChildNodes()){var d,e,g,j,k;d=c.childNodes;e=d.length;for(k=[];e--;)g=d[e],j=g.nodeName.toLowerCase(),"track"===j&&k.push(g);for(d=0;d<k.length;d++)c.removeChild(k[d])}a.id=c.id;a.className=c.className;c.id+="_html5_api";c.className="vjs-tech";c.player=a.player=this;this.n("vjs-paused");this.width(this.g.width,f);this.height(this.g.height,f);c.parentNode&&c.parentNode.insertBefore(a,
|
||||
c);u.yb(c,a);return a};
|
||||
function I(a,c,d){a.i&&(a.$=l,a.i.dispose(),a.Db&&(a.Db=l,clearInterval(a.Sa)),a.Eb&&J(a),a.i=l);"Html5"!==c&&a.L&&(u.l.fc(a.L),a.L=h);a.xa=c;a.$=l;var e=u.k.B({source:d,parentEl:a.a},a.g[c.toLowerCase()]);d&&(d.src==a.v.src&&0<a.v.currentTime&&(e.startTime=a.v.currentTime),a.v.src=d.src);a.i=new window.videojs[c](a,e);a.i.H(function(){this.c.Wa();if(!this.m.progressEvents){var a=this.c;a.Db=f;a.Sa=setInterval(u.bind(a,function(){this.v.mb<this.buffered().end(0)?this.j("progress"):1==this.bufferedPercent()&&
|
||||
(clearInterval(this.Sa),this.j("progress"))}),500);a.i.T("progress",function(){this.m.progressEvents=f;var a=this.c;a.Db=l;clearInterval(a.Sa)})}this.m.timeupdateEvents||(a=this.c,a.Eb=f,a.d("play",a.Ac),a.d("pause",a.wa),a.i.T("timeupdate",function(){this.m.timeupdateEvents=f;J(this.c)}))})}function J(a){a.Eb=l;a.wa();a.o("play",a.Ac);a.o("pause",a.wa)}t.Ac=function(){this.ec&&this.wa();this.ec=setInterval(u.bind(this,function(){this.j("timeupdate")}),250)};t.wa=function(){clearInterval(this.ec)};
|
||||
t.Kb=function(){u.t(this.a,"vjs-paused");u.n(this.a,"vjs-playing")};t.ld=function(){this.g.starttime&&this.currentTime(this.g.starttime);this.n("vjs-has-started")};t.Jb=function(){u.t(this.a,"vjs-playing");u.n(this.a,"vjs-paused")};t.nd=function(){1==this.bufferedPercent()&&this.j("loadedalldata")};t.kd=function(){this.g.loop&&(this.currentTime(0),this.play())};t.pc=function(){var a=K(this,"duration");a&&this.duration(a)};t.md=function(){this.isFullScreen()?this.n("vjs-fullscreen"):this.t("vjs-fullscreen")};
|
||||
t.Gb=function(a){u.log("Video Error",a)};function L(a,c,d){if(a.i&&!a.i.$)a.i.H(function(){this[c](d)});else try{a.i[c](d)}catch(e){throw u.log(e),e;}}function K(a,c){if(a.i&&a.i.$)try{return a.i[c]()}catch(d){throw a.i[c]===b?u.log("Video.js: "+c+" method not defined for "+a.xa+" playback technology.",d):"TypeError"==d.name?(u.log("Video.js: "+c+" unavailable on "+a.xa+" playback technology element.",d),a.i.$=l):u.log(d),d;}}t.play=function(){L(this,"play");return this};
|
||||
t.pause=function(){L(this,"pause");return this};t.paused=function(){return K(this,"paused")===l?l:f};t.currentTime=function(a){return a!==b?(L(this,"setCurrentTime",a),this.Eb&&this.j("timeupdate"),this):this.v.currentTime=K(this,"currentTime")||0};t.duration=function(a){if(a!==b)return this.v.duration=parseFloat(a),this;this.v.duration===b&&this.pc();return this.v.duration||0};
|
||||
t.buffered=function(){var a=K(this,"buffered"),c=a.length-1,d=this.v.mb=this.v.mb||0;a&&(0<=c&&a.end(c)!==d)&&(d=a.end(c),this.v.mb=d);return u.sb(0,d)};t.bufferedPercent=function(){return this.duration()?this.buffered().end(0)/this.duration():0};t.volume=function(a){if(a!==b)return a=Math.max(0,Math.min(1,parseFloat(a))),this.v.volume=a,L(this,"setVolume",a),u.ud(a),this;a=parseFloat(K(this,"volume"));return isNaN(a)?1:a};
|
||||
t.muted=function(a){return a!==b?(L(this,"setMuted",a),this):K(this,"muted")||l};t.Va=function(){return K(this,"supportsFullScreen")||l};t.nc=l;t.isFullScreen=function(a){return a!==b?(this.nc=a,this):this.nc};
|
||||
t.requestFullScreen=function(){var a=u.Nb.requestFullScreen;this.isFullScreen(f);a?(u.d(document,a.ub,u.bind(this,function(c){this.isFullScreen(document[a.isFullScreen]);this.isFullScreen()===l&&u.o(document,a.ub,arguments.callee);this.j("fullscreenchange")})),this.a[a.uc]()):this.i.Va()?L(this,"enterFullScreen"):(this.ed=f,this.Yc=document.documentElement.style.overflow,u.d(document,"keydown",u.bind(this,this.ic)),document.documentElement.style.overflow="hidden",u.n(document.body,"vjs-full-window"),
|
||||
this.j("enterFullWindow"),this.j("fullscreenchange"));return this};t.cancelFullScreen=function(){var a=u.Nb.requestFullScreen;this.isFullScreen(l);if(a)document[a.ob]();else this.i.Va()?L(this,"exitFullScreen"):(M(this),this.j("fullscreenchange"));return this};t.ic=function(a){27===a.keyCode&&(this.isFullScreen()===f?this.cancelFullScreen():M(this))};
|
||||
function M(a){a.ed=l;u.o(document,"keydown",a.ic);document.documentElement.style.overflow=a.Yc;u.t(document.body,"vjs-full-window");a.j("exitFullWindow")}
|
||||
t.src=function(a){if(a instanceof Array){var c;a:{c=a;for(var d=0,e=this.g.techOrder;d<e.length;d++){var g=u.Y(e[d]),j=window.videojs[g];if(j.isSupported())for(var k=0,q=c;k<q.length;k++){var n=q[k];if(j.canPlaySource(n)){c={source:n,i:g};break a}}}c=l}c?(a=c.source,c=c.i,c==this.xa?this.src(a):I(this,c,a)):this.a.appendChild(u.e("p",{innerHTML:this.options().notSupportedMessage}))}else a instanceof Object?window.videojs[this.xa].canPlaySource(a)?this.src(a.src):this.src([a]):(this.v.src=a,this.$?
|
||||
(L(this,"src",a),"auto"==this.g.preload&&this.load(),this.g.autoplay&&this.play()):this.H(function(){this.src(a)}));return this};t.load=function(){L(this,"load");return this};t.currentSrc=function(){return K(this,"currentSrc")||this.v.src||""};t.Ra=function(a){return a!==b?(L(this,"setPreload",a),this.g.preload=a,this):K(this,"preload")};t.autoplay=function(a){return a!==b?(L(this,"setAutoplay",a),this.g.autoplay=a,this):K(this,"autoplay")};
|
||||
t.loop=function(a){return a!==b?(L(this,"setLoop",a),this.g.loop=a,this):K(this,"loop")};t.poster=function(a){if(a===b)return this.rc;this.rc=a;L(this,"setPoster",a);this.j("posterchange")};t.controls=function(a){return a!==b?(a=!!a,this.rb!==a&&((this.rb=a)?(this.t("vjs-controls-disabled"),this.n("vjs-controls-enabled"),this.j("controlsenabled")):(this.t("vjs-controls-enabled"),this.n("vjs-controls-disabled"),this.j("controlsdisabled"))),this):this.rb};u.Player.prototype.Pb;t=u.Player.prototype;
|
||||
t.usingNativeControls=function(a){return a!==b?(a=!!a,this.Pb!==a&&((this.Pb=a)?(this.n("vjs-using-native-controls"),this.j("usingnativecontrols")):(this.t("vjs-using-native-controls"),this.j("usingcustomcontrols"))),this):this.Pb};t.error=function(){return K(this,"error")};t.ended=function(){return K(this,"ended")};t.seeking=function(){return K(this,"seeking")};t.ia=f;t.reportUserActivity=function(){this.ia=f};t.Ob=f;
|
||||
t.userActive=function(a){return a!==b?(a=!!a,a!==this.Ob&&((this.Ob=a)?(this.ia=f,this.t("vjs-user-inactive"),this.n("vjs-user-active"),this.j("useractive")):(this.ia=l,this.i.T("mousemove",function(a){a.stopPropagation();a.preventDefault()}),this.t("vjs-user-active"),this.n("vjs-user-inactive"),this.j("userinactive"))),this):this.Ob};var N,O,P;P=document.createElement("div");O={};
|
||||
P.Jd!==b?(O.uc="requestFullscreen",O.ob="exitFullscreen",O.ub="fullscreenchange",O.isFullScreen="fullScreen"):(document.mozCancelFullScreen?(N="moz",O.isFullScreen=N+"FullScreen"):(N="webkit",O.isFullScreen=N+"IsFullScreen"),P[N+"RequestFullScreen"]&&(O.uc=N+"RequestFullScreen",O.ob=N+"CancelFullScreen"),O.ub=N+"fullscreenchange");document[O.ob]&&(u.Nb.requestFullScreen=O);u.Ca=u.b.extend();
|
||||
u.Ca.prototype.g={Od:"play",children:{playToggle:{},currentTimeDisplay:{},timeDivider:{},durationDisplay:{},remainingTimeDisplay:{},progressControl:{},fullscreenToggle:{},volumeControl:{},muteToggle:{}}};u.Ca.prototype.e=function(){return u.e("div",{className:"vjs-control-bar"})};u.Wb=u.q.extend({h:function(a,c){u.q.call(this,a,c);a.d("play",u.bind(this,this.Kb));a.d("pause",u.bind(this,this.Jb))}});t=u.Wb.prototype;t.oa="Play";t.P=function(){return"vjs-play-control "+u.q.prototype.P.call(this)};
|
||||
t.p=function(){this.c.paused()?this.c.play():this.c.pause()};t.Kb=function(){u.t(this.a,"vjs-paused");u.n(this.a,"vjs-playing");this.a.children[0].children[0].innerHTML="Pause"};t.Jb=function(){u.t(this.a,"vjs-playing");u.n(this.a,"vjs-paused");this.a.children[0].children[0].innerHTML="Play"};u.$a=u.b.extend({h:function(a,c){u.b.call(this,a,c);a.d("timeupdate",u.bind(this,this.ca))}});
|
||||
u.$a.prototype.e=function(){var a=u.b.prototype.e.call(this,"div",{className:"vjs-current-time vjs-time-controls vjs-control"});this.F=u.e("div",{className:"vjs-current-time-display",innerHTML:'<span class="vjs-control-text">Current Time </span>0:00',"aria-live":"off"});a.appendChild(this.F);return a};u.$a.prototype.ca=function(){var a=this.c.Ua?this.c.v.currentTime:this.c.currentTime();this.F.innerHTML='<span class="vjs-control-text">Current Time </span>'+u.ta(a,this.c.duration())};
|
||||
u.ab=u.b.extend({h:function(a,c){u.b.call(this,a,c);a.d("timeupdate",u.bind(this,this.ca))}});u.ab.prototype.e=function(){var a=u.b.prototype.e.call(this,"div",{className:"vjs-duration vjs-time-controls vjs-control"});this.F=u.e("div",{className:"vjs-duration-display",innerHTML:'<span class="vjs-control-text">Duration Time </span>0:00',"aria-live":"off"});a.appendChild(this.F);return a};
|
||||
u.ab.prototype.ca=function(){var a=this.c.duration();a&&(this.F.innerHTML='<span class="vjs-control-text">Duration Time </span>'+u.ta(a))};u.ac=u.b.extend({h:function(a,c){u.b.call(this,a,c)}});u.ac.prototype.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-time-divider",innerHTML:"<div><span>/</span></div>"})};u.gb=u.b.extend({h:function(a,c){u.b.call(this,a,c);a.d("timeupdate",u.bind(this,this.ca))}});
|
||||
u.gb.prototype.e=function(){var a=u.b.prototype.e.call(this,"div",{className:"vjs-remaining-time vjs-time-controls vjs-control"});this.F=u.e("div",{className:"vjs-remaining-time-display",innerHTML:'<span class="vjs-control-text">Remaining Time </span>-0:00',"aria-live":"off"});a.appendChild(this.F);return a};u.gb.prototype.ca=function(){this.c.duration()&&(this.F.innerHTML='<span class="vjs-control-text">Remaining Time </span>-'+u.ta(this.c.duration()-this.c.currentTime()))};
|
||||
u.Da=u.q.extend({h:function(a,c){u.q.call(this,a,c)}});u.Da.prototype.oa="Fullscreen";u.Da.prototype.P=function(){return"vjs-fullscreen-control "+u.q.prototype.P.call(this)};u.Da.prototype.p=function(){this.c.isFullScreen()?(this.c.cancelFullScreen(),this.a.children[0].children[0].innerHTML="Fullscreen"):(this.c.requestFullScreen(),this.a.children[0].children[0].innerHTML="Non-Fullscreen")};u.fb=u.b.extend({h:function(a,c){u.b.call(this,a,c)}});u.fb.prototype.g={children:{seekBar:{}}};
|
||||
u.fb.prototype.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-progress-control vjs-control"})};u.Xb=u.N.extend({h:function(a,c){u.N.call(this,a,c);a.d("timeupdate",u.bind(this,this.za));a.H(u.bind(this,this.za))}});t=u.Xb.prototype;t.g={children:{loadProgressBar:{},playProgressBar:{},seekHandle:{}},barName:"playProgressBar",handleName:"seekHandle"};t.qc="timeupdate";t.e=function(){return u.N.prototype.e.call(this,"div",{className:"vjs-progress-holder","aria-label":"video progress bar"})};
|
||||
t.za=function(){var a=this.c.Ua?this.c.v.currentTime:this.c.currentTime();this.a.setAttribute("aria-valuenow",u.round(100*this.xb(),2));this.a.setAttribute("aria-valuetext",u.ta(a,this.c.duration()))};t.xb=function(){return this.c.currentTime()/this.c.duration()};t.Qa=function(a){u.N.prototype.Qa.call(this,a);this.c.Ua=f;this.Ed=!this.c.paused();this.c.pause()};t.Hb=function(a){a=F(this,a)*this.c.duration();a==this.c.duration()&&(a-=0.1);this.c.currentTime(a)};
|
||||
t.Ib=function(a){u.N.prototype.Ib.call(this,a);this.c.Ua=l;this.Ed&&this.c.play()};t.xc=function(){this.c.currentTime(this.c.currentTime()+5)};t.wc=function(){this.c.currentTime(this.c.currentTime()-5)};u.cb=u.b.extend({h:function(a,c){u.b.call(this,a,c);a.d("progress",u.bind(this,this.update))}});u.cb.prototype.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-load-progress",innerHTML:'<span class="vjs-control-text">Loaded: 0%</span>'})};
|
||||
u.cb.prototype.update=function(){this.a.style&&(this.a.style.width=u.round(100*this.c.bufferedPercent(),2)+"%")};u.Vb=u.b.extend({h:function(a,c){u.b.call(this,a,c)}});u.Vb.prototype.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-play-progress",innerHTML:'<span class="vjs-control-text">Progress: 0%</span>'})};u.Fa=u.V.extend({h:function(a,c){u.V.call(this,a,c);a.d("timeupdate",u.bind(this,this.ca))}});u.Fa.prototype.defaultValue="00:00";
|
||||
u.Fa.prototype.e=function(){return u.V.prototype.e.call(this,"div",{className:"vjs-seek-handle","aria-live":"off"})};u.Fa.prototype.ca=function(){var a=this.c.Ua?this.c.v.currentTime:this.c.currentTime();this.a.innerHTML='<span class="vjs-control-text">'+u.ta(a,this.c.duration())+"</span>"};u.ib=u.b.extend({h:function(a,c){u.b.call(this,a,c);a.i&&(a.i.m&&a.i.m.volumeControl===l)&&this.n("vjs-hidden");a.d("loadstart",u.bind(this,function(){a.i.m&&a.i.m.volumeControl===l?this.n("vjs-hidden"):this.t("vjs-hidden")}))}});
|
||||
u.ib.prototype.g={children:{volumeBar:{}}};u.ib.prototype.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-volume-control vjs-control"})};u.hb=u.N.extend({h:function(a,c){u.N.call(this,a,c);a.d("volumechange",u.bind(this,this.za));a.H(u.bind(this,this.za));setTimeout(u.bind(this,this.update),0)}});t=u.hb.prototype;t.za=function(){this.a.setAttribute("aria-valuenow",u.round(100*this.c.volume(),2));this.a.setAttribute("aria-valuetext",u.round(100*this.c.volume(),2)+"%")};
|
||||
t.g={children:{volumeLevel:{},volumeHandle:{}},barName:"volumeLevel",handleName:"volumeHandle"};t.qc="volumechange";t.e=function(){return u.N.prototype.e.call(this,"div",{className:"vjs-volume-bar","aria-label":"volume level"})};t.Hb=function(a){this.c.muted()&&this.c.muted(l);this.c.volume(F(this,a))};t.xb=function(){return this.c.muted()?0:this.c.volume()};t.xc=function(){this.c.volume(this.c.volume()+0.1)};t.wc=function(){this.c.volume(this.c.volume()-0.1)};
|
||||
u.bc=u.b.extend({h:function(a,c){u.b.call(this,a,c)}});u.bc.prototype.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-volume-level",innerHTML:'<span class="vjs-control-text"></span>'})};u.jb=u.V.extend();u.jb.prototype.defaultValue="00:00";u.jb.prototype.e=function(){return u.V.prototype.e.call(this,"div",{className:"vjs-volume-handle"})};
|
||||
u.da=u.q.extend({h:function(a,c){u.q.call(this,a,c);a.d("volumechange",u.bind(this,this.update));a.i&&(a.i.m&&a.i.m.volumeControl===l)&&this.n("vjs-hidden");a.d("loadstart",u.bind(this,function(){a.i.m&&a.i.m.volumeControl===l?this.n("vjs-hidden"):this.t("vjs-hidden")}))}});u.da.prototype.e=function(){return u.q.prototype.e.call(this,"div",{className:"vjs-mute-control vjs-control",innerHTML:'<div><span class="vjs-control-text">Mute</span></div>'})};
|
||||
u.da.prototype.p=function(){this.c.muted(this.c.muted()?l:f)};u.da.prototype.update=function(){var a=this.c.volume(),c=3;0===a||this.c.muted()?c=0:0.33>a?c=1:0.67>a&&(c=2);this.c.muted()?"Unmute"!=this.a.children[0].children[0].innerHTML&&(this.a.children[0].children[0].innerHTML="Unmute"):"Mute"!=this.a.children[0].children[0].innerHTML&&(this.a.children[0].children[0].innerHTML="Mute");for(a=0;4>a;a++)u.t(this.a,"vjs-vol-"+a);u.n(this.a,"vjs-vol-"+c)};
|
||||
u.ma=u.R.extend({h:function(a,c){u.R.call(this,a,c);a.d("volumechange",u.bind(this,this.update));a.i&&(a.i.m&&a.i.m.Bc===l)&&this.n("vjs-hidden");a.d("loadstart",u.bind(this,function(){a.i.m&&a.i.m.Bc===l?this.n("vjs-hidden"):this.t("vjs-hidden")}));this.n("vjs-menu-button")}});u.ma.prototype.La=function(){var a=new u.la(this.c,{Tc:"div"}),c=new u.hb(this.c,u.k.B({Dd:f},this.g.Xd));a.X(c);return a};u.ma.prototype.p=function(){u.da.prototype.p.call(this);u.R.prototype.p.call(this)};
|
||||
u.ma.prototype.e=function(){return u.q.prototype.e.call(this,"div",{className:"vjs-volume-menu-button vjs-menu-button vjs-control",innerHTML:'<div><span class="vjs-control-text">Mute</span></div>'})};u.ma.prototype.update=u.da.prototype.update;u.Ea=u.q.extend({h:function(a,c){u.q.call(this,a,c);a.poster()&&this.src(a.poster());(!a.poster()||!a.controls())&&this.D();a.d("posterchange",u.bind(this,function(){this.src(a.poster())}));a.d("play",u.bind(this,this.D))}});var Q="backgroundSize"in u.ea.style;
|
||||
u.Ea.prototype.e=function(){var a=u.e("div",{className:"vjs-poster",tabIndex:-1});Q||a.appendChild(u.e("img"));return a};u.Ea.prototype.src=function(a){var c=this.u();a!==b&&(Q?c.style.backgroundImage='url("'+a+'")':c.firstChild.src=a)};u.Ea.prototype.p=function(){this.C().controls()&&this.c.play()};
|
||||
u.Ub=u.b.extend({h:function(a,c){u.b.call(this,a,c);a.d("canplay",u.bind(this,this.D));a.d("canplaythrough",u.bind(this,this.D));a.d("playing",u.bind(this,this.D));a.d("seeked",u.bind(this,this.D));a.d("seeking",u.bind(this,this.show));a.d("seeked",u.bind(this,this.D));a.d("error",u.bind(this,this.show));a.d("waiting",u.bind(this,this.show))}});u.Ub.prototype.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-loading-spinner"})};u.Ya=u.q.extend();
|
||||
u.Ya.prototype.e=function(){return u.q.prototype.e.call(this,"div",{className:"vjs-big-play-button",innerHTML:'<span aria-hidden="true"></span>',"aria-label":"play video"})};u.Ya.prototype.p=function(){this.c.play()};
|
||||
u.r=u.b.extend({h:function(a,c,d){c=c||{};c.tc=l;u.b.call(this,a,c,d);var e,g;g=this;e=this.C();a=function(){if(e.controls()&&!e.usingNativeControls()){var a;g.d("mousedown",g.p);g.d("touchstart",function(c){c.preventDefault();a=this.c.userActive()});g.d("touchmove",function(){a&&this.C().reportUserActivity()});var c,d,n,s;c=0;g.d("touchstart",function(){c=(new Date).getTime();n=f});s=function(){n=l};g.d("touchmove",s);g.d("touchleave",s);g.d("touchcancel",s);g.d("touchend",function(){n===f&&(d=(new Date).getTime()-
|
||||
c,250>d&&this.j("tap"))});g.d("tap",g.od)}};c=u.bind(g,g.rd);this.H(a);e.d("controlsenabled",a);e.d("controlsdisabled",c)}});u.r.prototype.rd=function(){this.o("tap");this.o("touchstart");this.o("touchmove");this.o("touchleave");this.o("touchcancel");this.o("touchend");this.o("click");this.o("mousedown")};u.r.prototype.p=function(a){0===a.button&&this.C().controls()&&(this.C().paused()?this.C().play():this.C().pause())};u.r.prototype.od=function(){this.C().userActive(!this.C().userActive())};
|
||||
u.r.prototype.m={volumeControl:f,fullscreenResize:l,progressEvents:l,timeupdateEvents:l};u.media={};u.media.Xa="play pause paused currentTime setCurrentTime duration buffered volume setVolume muted setMuted width height supportsFullScreen enterFullScreen src load currentSrc preload setPreload autoplay setAutoplay loop setLoop error networkState readyState seeking initialTime startOffsetTime played seekable ended videoTracks audioTracks videoWidth videoHeight textTracks defaultPlaybackRate playbackRate mediaGroup controller controls defaultMuted".split(" ");
|
||||
function ea(){var a=u.media.Xa[i];return function(){throw Error('The "'+a+"\" method is not available on the playback technology's API");}}for(var i=u.media.Xa.length-1;0<=i;i--)u.r.prototype[u.media.Xa[i]]=ea();
|
||||
u.l=u.r.extend({h:function(a,c,d){this.m.volumeControl=u.l.Sc();this.m.movingMediaElementInDOM=!u.Hc;this.m.fullscreenResize=f;u.r.call(this,a,c,d);for(d=u.l.bb.length-1;0<=d;d--)u.d(this.a,u.l.bb[d],u.bind(this.c,this.$c));(c=c.source)&&this.a.currentSrc===c.src&&0<this.a.networkState?a.j("loadstart"):c&&(this.a.src=c.src);if(u.Zb&&a.options().nativeControlsForTouch!==l){var e,g,j,k;e=this;g=this.C();c=g.controls();e.a.controls=!!c;j=function(){e.a.controls=f};k=function(){e.a.controls=l};g.d("controlsenabled",
|
||||
j);g.d("controlsdisabled",k);c=function(){g.o("controlsenabled",j);g.o("controlsdisabled",k)};e.d("dispose",c);g.d("usingcustomcontrols",c);g.usingNativeControls(f)}a.H(function(){this.L&&(this.g.autoplay&&this.paused())&&(delete this.L.poster,this.play())});this.Wa()}});t=u.l.prototype;t.dispose=function(){u.r.prototype.dispose.call(this)};
|
||||
t.e=function(){var a=this.c,c=a.L,d;if(!c||this.m.movingMediaElementInDOM===l)c?(d=c.cloneNode(l),u.l.fc(c),c=d,a.L=h):c=u.e("video",{id:a.id()+"_html5_api",className:"vjs-tech"}),c.player=a,u.yb(c,a.u());d=["autoplay","preload","loop","muted"];for(var e=d.length-1;0<=e;e--){var g=d[e];a.g[g]!==h&&(c[g]=a.g[g])}return c};t.$c=function(a){this.j(a);a.stopPropagation()};t.play=function(){this.a.play()};t.pause=function(){this.a.pause()};t.paused=function(){return this.a.paused};t.currentTime=function(){return this.a.currentTime};
|
||||
t.td=function(a){try{this.a.currentTime=a}catch(c){u.log(c,"Video is not ready. (Video.js)")}};t.duration=function(){return this.a.duration||0};t.buffered=function(){return this.a.buffered};t.volume=function(){return this.a.volume};t.yd=function(a){this.a.volume=a};t.muted=function(){return this.a.muted};t.wd=function(a){this.a.muted=a};t.width=function(){return this.a.offsetWidth};t.height=function(){return this.a.offsetHeight};
|
||||
t.Va=function(){return"function"==typeof this.a.webkitEnterFullScreen&&(/Android/.test(u.I)||!/Chrome|Mac OS X 10.5/.test(u.I))?f:l};t.gc=function(){var a=this.a;a.paused&&a.networkState<=a.Gd?(this.a.play(),setTimeout(function(){a.pause();a.webkitEnterFullScreen()},0)):a.webkitEnterFullScreen()};t.ad=function(){this.a.webkitExitFullScreen()};t.src=function(a){this.a.src=a};t.load=function(){this.a.load()};t.currentSrc=function(){return this.a.currentSrc};t.poster=function(){return this.a.poster};
|
||||
t.Ra=function(){return this.a.Ra};t.xd=function(a){this.a.Ra=a};t.autoplay=function(){return this.a.autoplay};t.sd=function(a){this.a.autoplay=a};t.controls=function(){return this.a.controls};t.loop=function(){return this.a.loop};t.vd=function(a){this.a.loop=a};t.error=function(){return this.a.error};t.seeking=function(){return this.a.seeking};t.ended=function(){return this.a.ended};u.l.isSupported=function(){return!!u.ea.canPlayType};u.l.nb=function(a){try{return!!u.ea.canPlayType(a.type)}catch(c){return""}};
|
||||
u.l.Sc=function(){var a=u.ea.volume;u.ea.volume=a/2+0.1;return a!==u.ea.volume};u.l.bb="loadstart suspend abort error emptied stalled loadedmetadata loadeddata canplay canplaythrough playing waiting seeking seeked ended durationchange timeupdate progress play pause ratechange volumechange".split(" ");u.l.fc=function(a){if(a){a.player=h;for(a.parentNode&&a.parentNode.removeChild(a);a.hasChildNodes();)a.removeChild(a.firstChild);a.removeAttribute("src");"function"===typeof a.load&&a.load()}};
|
||||
u.Lc&&(document.createElement("video").constructor.prototype.canPlayType=function(a){return a&&-1!=a.toLowerCase().indexOf("video/mp4")?"maybe":""});
|
||||
u.f=u.r.extend({h:function(a,c,d){u.r.call(this,a,c,d);var e=c.source;d=c.parentEl;var g=this.a=u.e("div",{id:a.id()+"_temp_flash"}),j=a.id()+"_flash_api";a=a.g;var k=u.k.B({readyFunction:"videojs.Flash.onReady",eventProxyFunction:"videojs.Flash.onEvent",errorEventProxyFunction:"videojs.Flash.onError",autoplay:a.autoplay,preload:a.Ra,loop:a.loop,muted:a.muted},c.flashVars),q=u.k.B({wmode:"opaque",bgcolor:"#000000"},c.params),n=u.k.B({id:j,name:j,"class":"vjs-tech"},c.attributes),s;e&&(e.type&&u.f.gd(e.type)?
|
||||
(a=u.f.yc(e.src),k.rtmpConnection=encodeURIComponent(a.qb),k.rtmpStream=encodeURIComponent(a.Mb)):k.src=encodeURIComponent(u.jc(e.src)));this.setCurrentTime=function(a){s=a;this.a.vjs_setProperty("currentTime",a)};this.currentTime=function(){return this.seeking()?s:this.a.vjs_getProperty("currentTime")};u.yb(g,d);c.startTime&&this.H(function(){this.load();this.play();this.currentTime(c.startTime)});u.Tb&&this.H(function(){u.d(this.u(),"mousemove",u.bind(this,function(){this.C().j({type:"mousemove",
|
||||
bubbles:l})}))});if(c.iFrameMode===f&&!u.Tb){var C=u.e("iframe",{id:j+"_iframe",name:j+"_iframe",className:"vjs-tech",scrolling:"no",marginWidth:0,marginHeight:0,frameBorder:0});k.readyFunction="ready";k.eventProxyFunction="events";k.errorEventProxyFunction="errors";u.d(C,"load",u.bind(this,function(){var a,d=C.contentWindow;a=C.contentDocument?C.contentDocument:C.contentWindow.document;a.write(u.f.kc(c.swf,k,q,n));d.player=this.c;d.ready=u.bind(this.c,function(c){var d=this.i;d.a=a.getElementById(c);
|
||||
u.f.pb(d)});d.events=u.bind(this.c,function(a,c){this&&"flash"===this.xa&&this.j(c)});d.errors=u.bind(this.c,function(a,c){u.log("Flash Error",c)})}));g.parentNode.replaceChild(C,g)}else u.f.Zc(c.swf,g,k,q,n)}});t=u.f.prototype;t.dispose=function(){u.r.prototype.dispose.call(this)};t.play=function(){this.a.vjs_play()};t.pause=function(){this.a.vjs_pause()};
|
||||
t.src=function(a){u.f.fd(a)?(a=u.f.yc(a),this.Sd(a.qb),this.Td(a.Mb)):(a=u.jc(a),this.a.vjs_src(a));if(this.c.autoplay()){var c=this;setTimeout(function(){c.play()},0)}};t.currentSrc=function(){var a=this.a.vjs_getProperty("currentSrc");if(a==h){var c=this.Qd(),d=this.Rd();c&&d&&(a=u.f.zd(c,d))}return a};t.load=function(){this.a.vjs_load()};t.poster=function(){this.a.vjs_getProperty("poster")};t.buffered=function(){return u.sb(0,this.a.vjs_getProperty("buffered"))};t.Va=r(l);t.gc=r(l);
|
||||
var R=u.f.prototype,S="rtmpConnection rtmpStream preload defaultPlaybackRate playbackRate autoplay loop mediaGroup controller controls volume muted defaultMuted".split(" "),T="error currentSrc networkState readyState seeking initialTime duration startOffsetTime paused played seekable ended videoTracks audioTracks videoWidth videoHeight textTracks".split(" ");function fa(){var a=S[U],c=a.charAt(0).toUpperCase()+a.slice(1);R["set"+c]=function(c){return this.a.vjs_setProperty(a,c)}}
|
||||
function V(a){R[a]=function(){return this.a.vjs_getProperty(a)}}var U;for(U=0;U<S.length;U++)V(S[U]),fa();for(U=0;U<T.length;U++)V(T[U]);u.f.isSupported=function(){return 10<=u.f.version()[0]};u.f.nb=function(a){if(!a.type)return"";a=a.type.replace(/;.*/,"").toLowerCase();if(a in u.f.cd||a in u.f.zc)return"maybe"};u.f.cd={"video/flv":"FLV","video/x-flv":"FLV","video/mp4":"MP4","video/m4v":"MP4"};u.f.zc={"rtmp/mp4":"MP4","rtmp/flv":"FLV"};
|
||||
u.f.onReady=function(a){a=u.u(a);var c=a.player||a.parentNode.player,d=c.i;a.player=c;d.a=a;u.f.pb(d)};u.f.pb=function(a){a.u().vjs_getProperty?a.Wa():setTimeout(function(){u.f.pb(a)},50)};u.f.onEvent=function(a,c){u.u(a).player.j(c)};u.f.onError=function(a,c){u.u(a).player.j("error");u.log("Flash Error",c,a)};
|
||||
u.f.version=function(){var a="0,0,0";try{a=(new window.ActiveXObject("ShockwaveFlash.ShockwaveFlash")).GetVariable("$version").replace(/\D+/g,",").match(/^,?(.+),?$/)[1]}catch(c){try{navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin&&(a=(navigator.plugins["Shockwave Flash 2.0"]||navigator.plugins["Shockwave Flash"]).description.replace(/\D+/g,",").match(/^,?(.+),?$/)[1])}catch(d){}}return a.split(",")};
|
||||
u.f.Zc=function(a,c,d,e,g){a=u.f.kc(a,d,e,g);a=u.e("div",{innerHTML:a}).childNodes[0];d=c.parentNode;c.parentNode.replaceChild(a,c);var j=d.childNodes[0];setTimeout(function(){j.style.display="block"},1E3)};
|
||||
u.f.kc=function(a,c,d,e){var g="",j="",k="";c&&u.k.ra(c,function(a,c){g+=a+"="+c+"&"});d=u.k.B({movie:a,flashvars:g,allowScriptAccess:"always",allowNetworking:"all"},d);u.k.ra(d,function(a,c){j+='<param name="'+a+'" value="'+c+'" />'});e=u.k.B({data:a,width:"100%",height:"100%"},e);u.k.ra(e,function(a,c){k+=a+'="'+c+'" '});return'<object type="application/x-shockwave-flash"'+k+">"+j+"</object>"};u.f.zd=function(a,c){return a+"&"+c};
|
||||
u.f.yc=function(a){var c={qb:"",Mb:""};if(!a)return c;var d=a.indexOf("&"),e;-1!==d?e=d+1:(d=e=a.lastIndexOf("/")+1,0===d&&(d=e=a.length));c.qb=a.substring(0,d);c.Mb=a.substring(e,a.length);return c};u.f.gd=function(a){return a in u.f.zc};u.f.Nc=/^rtmp[set]?:\/\//i;u.f.fd=function(a){return u.f.Nc.test(a)};
|
||||
u.Mc=u.b.extend({h:function(a,c,d){u.b.call(this,a,c,d);if(!a.g.sources||0===a.g.sources.length){c=0;for(d=a.g.techOrder;c<d.length;c++){var e=u.Y(d[c]),g=window.videojs[e];if(g&&g.isSupported()){I(a,e);break}}}else a.src(a.g.sources)}});u.Player.prototype.textTracks=function(){return this.ya=this.ya||[]};function W(a,c,d){for(var e=a.ya,g=0,j=e.length,k,q;g<j;g++)k=e[g],k.id()===c?(k.show(),q=k):d&&(k.G()==d&&0<k.mode())&&k.disable();(c=q?q.G():d?d:l)&&a.j(c+"trackchange")}
|
||||
u.w=u.b.extend({h:function(a,c){u.b.call(this,a,c);this.Q=c.id||"vjs_"+c.kind+"_"+c.language+"_"+u.s++;this.vc=c.src;this.Wc=c["default"]||c.dflt;this.Bd=c.title;this.Nd=c.srclang;this.hd=c.label;this.Z=[];this.kb=[];this.ga=this.ha=0;this.c.d("fullscreenchange",u.bind(this,this.Pc))}});t=u.w.prototype;t.G=p("A");t.src=p("vc");t.tb=p("Wc");t.title=p("Bd");t.label=p("hd");t.Uc=p("Z");t.Oc=p("kb");t.readyState=p("ha");t.mode=p("ga");
|
||||
t.Pc=function(){this.a.style.fontSize=this.c.isFullScreen()?140*(screen.width/this.c.width())+"%":""};t.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-"+this.A+" vjs-text-track"})};t.show=function(){X(this);this.ga=2;u.b.prototype.show.call(this)};t.D=function(){X(this);this.ga=1;u.b.prototype.D.call(this)};
|
||||
t.disable=function(){2==this.ga&&this.D();this.c.o("timeupdate",u.bind(this,this.update,this.Q));this.c.o("ended",u.bind(this,this.reset,this.Q));this.reset();this.c.fa("textTrackDisplay").removeChild(this);this.ga=0};function X(a){0===a.ha&&a.load();0===a.ga&&(a.c.d("timeupdate",u.bind(a,a.update,a.Q)),a.c.d("ended",u.bind(a,a.reset,a.Q)),("captions"===a.A||"subtitles"===a.A)&&a.c.fa("textTrackDisplay").X(a))}
|
||||
t.load=function(){0===this.ha&&(this.ha=1,u.get(this.vc,u.bind(this,this.pd),u.bind(this,this.Gb)))};t.Gb=function(a){this.error=a;this.ha=3;this.j("error")};t.pd=function(a){var c,d;a=a.split("\n");for(var e="",g=1,j=a.length;g<j;g++)if(e=u.trim(a[g])){-1==e.indexOf("--\x3e")?(c=e,e=u.trim(a[++g])):c=this.Z.length;c={id:c,index:this.Z.length};d=e.split(" --\x3e ");c.startTime=Y(d[0]);c.sa=Y(d[1]);for(d=[];a[++g]&&(e=u.trim(a[g]));)d.push(e);c.text=d.join("<br/>");this.Z.push(c)}this.ha=2;this.j("loaded")};
|
||||
function Y(a){var c=a.split(":");a=0;var d,e,g;3==c.length?(d=c[0],e=c[1],c=c[2]):(d=0,e=c[0],c=c[1]);c=c.split(/\s+/);c=c.splice(0,1)[0];c=c.split(/\.|,/);g=parseFloat(c[1]);c=c[0];a+=3600*parseFloat(d);a+=60*parseFloat(e);a+=parseFloat(c);g&&(a+=g/1E3);return a}
|
||||
t.update=function(){if(0<this.Z.length){var a=this.c.currentTime();if(this.Lb===b||a<this.Lb||this.Na<=a){var c=this.Z,d=this.c.duration(),e=0,g=l,j=[],k,q,n,s;a>=this.Na||this.Na===b?s=this.vb!==b?this.vb:0:(g=f,s=this.Cb!==b?this.Cb:c.length-1);for(;;){n=c[s];if(n.sa<=a)e=Math.max(e,n.sa),n.Ha&&(n.Ha=l);else if(a<n.startTime){if(d=Math.min(d,n.startTime),n.Ha&&(n.Ha=l),!g)break}else g?(j.splice(0,0,n),q===b&&(q=s),k=s):(j.push(n),k===b&&(k=s),q=s),d=Math.min(d,n.sa),e=Math.max(e,n.startTime),n.Ha=
|
||||
f;if(g)if(0===s)break;else s--;else if(s===c.length-1)break;else s++}this.kb=j;this.Na=d;this.Lb=e;this.vb=k;this.Cb=q;a=this.kb;c="";d=0;for(e=a.length;d<e;d++)c+='<span class="vjs-tt-cue">'+a[d].text+"</span>";this.a.innerHTML=c;this.j("cuechange")}}};t.reset=function(){this.Na=0;this.Lb=this.c.duration();this.Cb=this.vb=0};u.Rb=u.w.extend();u.Rb.prototype.A="captions";u.Yb=u.w.extend();u.Yb.prototype.A="subtitles";u.Sb=u.w.extend();u.Sb.prototype.A="chapters";
|
||||
u.$b=u.b.extend({h:function(a,c,d){u.b.call(this,a,c,d);if(a.g.tracks&&0<a.g.tracks.length){c=this.c;a=a.g.tracks;var e;for(d=0;d<a.length;d++){e=a[d];var g=c,j=e.kind,k=e.label,q=e.language,n=e;e=g.ya=g.ya||[];n=n||{};n.kind=j;n.label=k;n.language=q;j=u.Y(j||"subtitles");g=new window.videojs[j+"Track"](g,n);e.push(g)}}}});u.$b.prototype.e=function(){return u.b.prototype.e.call(this,"div",{className:"vjs-text-track-display"})};
|
||||
u.W=u.M.extend({h:function(a,c){var d=this.ba=c.track;c.label=d.label();c.selected=d.tb();u.M.call(this,a,c);this.c.d(d.G()+"trackchange",u.bind(this,this.update))}});u.W.prototype.p=function(){u.M.prototype.p.call(this);W(this.c,this.ba.Q,this.ba.G())};u.W.prototype.update=function(){this.selected(2==this.ba.mode())};u.eb=u.W.extend({h:function(a,c){c.track={G:function(){return c.kind},C:a,label:function(){return c.kind+" off"},tb:r(l),mode:r(l)};u.W.call(this,a,c);this.selected(f)}});
|
||||
u.eb.prototype.p=function(){u.W.prototype.p.call(this);W(this.c,this.ba.Q,this.ba.G())};u.eb.prototype.update=function(){for(var a=this.c.textTracks(),c=0,d=a.length,e,g=f;c<d;c++)e=a[c],e.G()==this.ba.G()&&2==e.mode()&&(g=l);this.selected(g)};u.S=u.R.extend({h:function(a,c){u.R.call(this,a,c);1>=this.K.length&&this.D()}});
|
||||
u.S.prototype.qa=function(){var a=[],c;a.push(new u.eb(this.c,{kind:this.A}));for(var d=0;d<this.c.textTracks().length;d++)c=this.c.textTracks()[d],c.G()===this.A&&a.push(new u.W(this.c,{track:c}));return a};u.Aa=u.S.extend({h:function(a,c,d){u.S.call(this,a,c,d);this.a.setAttribute("aria-label","Captions Menu")}});u.Aa.prototype.A="captions";u.Aa.prototype.oa="Captions";u.Aa.prototype.className="vjs-captions-button";
|
||||
u.Ga=u.S.extend({h:function(a,c,d){u.S.call(this,a,c,d);this.a.setAttribute("aria-label","Subtitles Menu")}});u.Ga.prototype.A="subtitles";u.Ga.prototype.oa="Subtitles";u.Ga.prototype.className="vjs-subtitles-button";u.Ba=u.S.extend({h:function(a,c,d){u.S.call(this,a,c,d);this.a.setAttribute("aria-label","Chapters Menu")}});t=u.Ba.prototype;t.A="chapters";t.oa="Chapters";t.className="vjs-chapters-button";
|
||||
t.qa=function(){for(var a=[],c,d=0;d<this.c.textTracks().length;d++)c=this.c.textTracks()[d],c.G()===this.A&&a.push(new u.W(this.c,{track:c}));return a};
|
||||
t.La=function(){for(var a=this.c.textTracks(),c=0,d=a.length,e,g,j=this.K=[];c<d;c++)if(e=a[c],e.G()==this.A&&e.tb()){if(2>e.readyState()){this.Kd=e;e.d("loaded",u.bind(this,this.La));return}g=e;break}a=this.ua=new u.la(this.c);a.a.appendChild(u.e("li",{className:"vjs-menu-title",innerHTML:u.Y(this.A),Ad:-1}));if(g){e=g.Z;for(var k,c=0,d=e.length;c<d;c++)k=e[c],k=new u.Za(this.c,{track:g,cue:k}),j.push(k),a.X(k)}0<this.K.length&&this.show();return a};
|
||||
u.Za=u.M.extend({h:function(a,c){var d=this.ba=c.track,e=this.cue=c.cue,g=a.currentTime();c.label=e.text;c.selected=e.startTime<=g&&g<e.sa;u.M.call(this,a,c);d.d("cuechange",u.bind(this,this.update))}});u.Za.prototype.p=function(){u.M.prototype.p.call(this);this.c.currentTime(this.cue.startTime);this.update(this.cue.startTime)};u.Za.prototype.update=function(){var a=this.cue,c=this.c.currentTime();this.selected(a.startTime<=c&&c<a.sa)};
|
||||
u.k.B(u.Ca.prototype.g.children,{subtitlesButton:{},captionsButton:{},chaptersButton:{}});
|
||||
if("undefined"!==typeof window.JSON&&"function"===window.JSON.parse)u.JSON=window.JSON;else{u.JSON={};var Z=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;u.JSON.parse=function(a,c){function d(a,e){var k,q,n=a[e];if(n&&"object"===typeof n)for(k in n)Object.prototype.hasOwnProperty.call(n,k)&&(q=d(n,k),q!==b?n[k]=q:delete n[k]);return c.call(a,e,n)}var e;a=String(a);Z.lastIndex=0;Z.test(a)&&(a=a.replace(Z,function(a){return"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)}));
|
||||
if(/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return e=eval("("+a+")"),"function"===typeof c?d({"":e},""):e;throw new SyntaxError("JSON.parse(): invalid or malformed JSON data");}}
|
||||
u.cc=function(){var a,c,d=document.getElementsByTagName("video");if(d&&0<d.length)for(var e=0,g=d.length;e<g;e++)if((c=d[e])&&c.getAttribute)c.player===b&&(a=c.getAttribute("data-setup"),a!==h&&(a=u.JSON.parse(a||"{}"),videojs(c,a)));else{u.lb();break}else u.Cc||u.lb()};u.lb=function(){setTimeout(u.cc,1)};"complete"===document.readyState?u.Cc=f:u.T(window,"load",function(){u.Cc=f});u.lb();u.qd=function(a,c){u.Player.prototype[a]=c};var ga=this;ga.Fd=f;function $(a,c){var d=a.split("."),e=ga;!(d[0]in e)&&e.execScript&&e.execScript("var "+d[0]);for(var g;d.length&&(g=d.shift());)!d.length&&c!==b?e[g]=c:e=e[g]?e[g]:e[g]={}};$("videojs",u);$("_V_",u);$("videojs.options",u.options);$("videojs.players",u.va);$("videojs.TOUCH_ENABLED",u.Zb);$("videojs.cache",u.pa);$("videojs.Component",u.b);u.b.prototype.player=u.b.prototype.C;u.b.prototype.options=u.b.prototype.options;u.b.prototype.init=u.b.prototype.h;u.b.prototype.dispose=u.b.prototype.dispose;u.b.prototype.createEl=u.b.prototype.e;u.b.prototype.contentEl=u.b.prototype.Ka;u.b.prototype.el=u.b.prototype.u;u.b.prototype.addChild=u.b.prototype.X;
|
||||
u.b.prototype.getChild=u.b.prototype.fa;u.b.prototype.getChildById=u.b.prototype.dd;u.b.prototype.children=u.b.prototype.children;u.b.prototype.initChildren=u.b.prototype.mc;u.b.prototype.removeChild=u.b.prototype.removeChild;u.b.prototype.on=u.b.prototype.d;u.b.prototype.off=u.b.prototype.o;u.b.prototype.one=u.b.prototype.T;u.b.prototype.trigger=u.b.prototype.j;u.b.prototype.triggerReady=u.b.prototype.Wa;u.b.prototype.show=u.b.prototype.show;u.b.prototype.hide=u.b.prototype.D;
|
||||
u.b.prototype.width=u.b.prototype.width;u.b.prototype.height=u.b.prototype.height;u.b.prototype.dimensions=u.b.prototype.Xc;u.b.prototype.ready=u.b.prototype.H;u.b.prototype.addClass=u.b.prototype.n;u.b.prototype.removeClass=u.b.prototype.t;u.b.prototype.buildCSSClass=u.b.prototype.P;u.Player.prototype.ended=u.Player.prototype.ended;$("videojs.MediaLoader",u.Mc);$("videojs.TextTrackDisplay",u.$b);$("videojs.ControlBar",u.Ca);$("videojs.Button",u.q);$("videojs.PlayToggle",u.Wb);
|
||||
$("videojs.FullscreenToggle",u.Da);$("videojs.BigPlayButton",u.Ya);$("videojs.LoadingSpinner",u.Ub);$("videojs.CurrentTimeDisplay",u.$a);$("videojs.DurationDisplay",u.ab);$("videojs.TimeDivider",u.ac);$("videojs.RemainingTimeDisplay",u.gb);$("videojs.Slider",u.N);$("videojs.ProgressControl",u.fb);$("videojs.SeekBar",u.Xb);$("videojs.LoadProgressBar",u.cb);$("videojs.PlayProgressBar",u.Vb);$("videojs.SeekHandle",u.Fa);$("videojs.VolumeControl",u.ib);$("videojs.VolumeBar",u.hb);
|
||||
$("videojs.VolumeLevel",u.bc);$("videojs.VolumeMenuButton",u.ma);$("videojs.VolumeHandle",u.jb);$("videojs.MuteToggle",u.da);$("videojs.PosterImage",u.Ea);$("videojs.Menu",u.la);$("videojs.MenuItem",u.M);$("videojs.MenuButton",u.R);u.R.prototype.createItems=u.R.prototype.qa;u.S.prototype.createItems=u.S.prototype.qa;u.Ba.prototype.createItems=u.Ba.prototype.qa;$("videojs.SubtitlesButton",u.Ga);$("videojs.CaptionsButton",u.Aa);$("videojs.ChaptersButton",u.Ba);$("videojs.MediaTechController",u.r);
|
||||
u.r.prototype.features=u.r.prototype.m;u.r.prototype.m.volumeControl=u.r.prototype.m.Bc;u.r.prototype.m.fullscreenResize=u.r.prototype.m.Ld;u.r.prototype.m.progressEvents=u.r.prototype.m.Pd;u.r.prototype.m.timeupdateEvents=u.r.prototype.m.Ud;$("videojs.Html5",u.l);u.l.Events=u.l.bb;u.l.isSupported=u.l.isSupported;u.l.canPlaySource=u.l.nb;u.l.prototype.setCurrentTime=u.l.prototype.td;u.l.prototype.setVolume=u.l.prototype.yd;u.l.prototype.setMuted=u.l.prototype.wd;u.l.prototype.setPreload=u.l.prototype.xd;
|
||||
u.l.prototype.setAutoplay=u.l.prototype.sd;u.l.prototype.setLoop=u.l.prototype.vd;u.l.prototype.enterFullScreen=u.l.prototype.gc;u.l.prototype.exitFullScreen=u.l.prototype.ad;$("videojs.Flash",u.f);u.f.isSupported=u.f.isSupported;u.f.canPlaySource=u.f.nb;u.f.onReady=u.f.onReady;$("videojs.TextTrack",u.w);u.w.prototype.label=u.w.prototype.label;u.w.prototype.kind=u.w.prototype.G;u.w.prototype.mode=u.w.prototype.mode;u.w.prototype.cues=u.w.prototype.Uc;u.w.prototype.activeCues=u.w.prototype.Oc;
|
||||
$("videojs.CaptionsTrack",u.Rb);$("videojs.SubtitlesTrack",u.Yb);$("videojs.ChaptersTrack",u.Sb);$("videojs.autoSetup",u.cc);$("videojs.plugin",u.qd);$("videojs.createTimeRange",u.sb);$("videojs.util",u.ja);u.ja.mergeOptions=u.ja.Fb;})();
|
||||
@@ -0,0 +1,530 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.BigPlayButton
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/big-play-button.js#L11](https://github.com/videojs/video.js/blob/master/src/js/big-play-button.js#L11)
|
||||
|
||||
Initial play button. Shows before the video has played. The hiding of the
|
||||
big play button is done via CSS and player states.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,529 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Button
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/button.js#L10](https://github.com/videojs/video.js/blob/master/src/js/button.js#L10)
|
||||
|
||||
Base class for all buttons
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,533 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CaptionsButton
|
||||
|
||||
__EXTENDS__: [vjs.TextTrackButton](vjs.TextTrackButton.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L867](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L867)
|
||||
|
||||
The button component for toggling and selecting captions
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L869](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L869)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,672 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CaptionsTrack
|
||||
|
||||
__EXTENDS__: [vjs.TextTrack](vjs.TextTrack.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L679](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L679)
|
||||
|
||||
The track component for managing the hiding and showing of captions
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate) _`inherited`_
|
||||
- [activeCues](#activecues) _`inherited`_
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [adjustFontSize](#adjustfontsize) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel) _`inherited`_
|
||||
- [cues](#cues) _`inherited`_
|
||||
- [deactivate](#deactivate) _`inherited`_
|
||||
- [dflt](#dflt) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [disable](#disable) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [kind](#kind) _`inherited`_
|
||||
- [label](#label) _`inherited`_
|
||||
- [language](#language) _`inherited`_
|
||||
- [mode](#mode) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [src](#src) _`inherited`_
|
||||
- [title](#title) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L385](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L385)
|
||||
|
||||
---
|
||||
|
||||
### activeCues()
|
||||
> Get the track active cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L264](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L264)
|
||||
|
||||
---
|
||||
|
||||
### 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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### adjustFontSize()
|
||||
> Change the font size of the text track to make it larger when playing in fullscreen mode
|
||||
> and restore it to its normal size when not in fullscreen mode.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L309](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L309)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L325](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L325)
|
||||
|
||||
---
|
||||
|
||||
### cues()
|
||||
> Get the track cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L249](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L249)
|
||||
|
||||
---
|
||||
|
||||
### deactivate()
|
||||
> Turn off cue tracking.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L408](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L408)
|
||||
|
||||
---
|
||||
|
||||
### dflt()
|
||||
> Get the track default value. ('default' is a reserved keyword)
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L190](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L190)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### 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#L371](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L371)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### 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#L356](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L128](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L128)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### kind()
|
||||
> Get the track kind value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L161](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L161)
|
||||
|
||||
---
|
||||
|
||||
### label()
|
||||
> Get the track label value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L234](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L234)
|
||||
|
||||
---
|
||||
|
||||
### language()
|
||||
> Get the track language value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L219](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L219)
|
||||
|
||||
---
|
||||
|
||||
### mode()
|
||||
> Get the track mode
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L301](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L301)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### readyState()
|
||||
> Get the track readyState
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L283](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L283)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### 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#L341](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L341)
|
||||
|
||||
---
|
||||
|
||||
### src()
|
||||
> Get the track src value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L175](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L175)
|
||||
|
||||
---
|
||||
|
||||
### title()
|
||||
> Get the track title value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L204](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L204)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,533 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersButton
|
||||
|
||||
__EXTENDS__: [vjs.TextTrackButton](vjs.TextTrackButton.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L901](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L901)
|
||||
|
||||
The button component for toggling and selecting chapters
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L903](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L903)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,672 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersTrack
|
||||
|
||||
__EXTENDS__: [vjs.TextTrack](vjs.TextTrack.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L697](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L697)
|
||||
|
||||
The track component for managing the hiding and showing of chapters
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate) _`inherited`_
|
||||
- [activeCues](#activecues) _`inherited`_
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [adjustFontSize](#adjustfontsize) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel) _`inherited`_
|
||||
- [cues](#cues) _`inherited`_
|
||||
- [deactivate](#deactivate) _`inherited`_
|
||||
- [dflt](#dflt) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [disable](#disable) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [kind](#kind) _`inherited`_
|
||||
- [label](#label) _`inherited`_
|
||||
- [language](#language) _`inherited`_
|
||||
- [mode](#mode) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [src](#src) _`inherited`_
|
||||
- [title](#title) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L385](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L385)
|
||||
|
||||
---
|
||||
|
||||
### activeCues()
|
||||
> Get the track active cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L264](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L264)
|
||||
|
||||
---
|
||||
|
||||
### 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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### adjustFontSize()
|
||||
> Change the font size of the text track to make it larger when playing in fullscreen mode
|
||||
> and restore it to its normal size when not in fullscreen mode.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L309](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L309)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L325](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L325)
|
||||
|
||||
---
|
||||
|
||||
### cues()
|
||||
> Get the track cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L249](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L249)
|
||||
|
||||
---
|
||||
|
||||
### deactivate()
|
||||
> Turn off cue tracking.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L408](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L408)
|
||||
|
||||
---
|
||||
|
||||
### dflt()
|
||||
> Get the track default value. ('default' is a reserved keyword)
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L190](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L190)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### 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#L371](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L371)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### 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#L356](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L128](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L128)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### kind()
|
||||
> Get the track kind value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L161](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L161)
|
||||
|
||||
---
|
||||
|
||||
### label()
|
||||
> Get the track label value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L234](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L234)
|
||||
|
||||
---
|
||||
|
||||
### language()
|
||||
> Get the track language value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L219](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L219)
|
||||
|
||||
---
|
||||
|
||||
### mode()
|
||||
> Get the track mode
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L301](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L301)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### readyState()
|
||||
> Get the track readyState
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L283](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L283)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### 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#L341](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L341)
|
||||
|
||||
---
|
||||
|
||||
### src()
|
||||
> Get the track src value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L175](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L175)
|
||||
|
||||
---
|
||||
|
||||
### title()
|
||||
> Get the track title value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L204](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L204)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,541 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ChaptersTrackMenuItem
|
||||
|
||||
__EXTENDS__: [vjs.MenuItem](vjs.MenuItem.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L987](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L987)
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [selected](#selected-selected-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_inherited from_: [src/js/menu.js#L64](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L64)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L989](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L989)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Handle a click on the menu item, and set it to selected
|
||||
|
||||
_inherited from_: [src/js/menu.js#L74](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L74)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### selected( selected )
|
||||
> Set this menu item as selected or not
|
||||
|
||||
##### PARAMETERS:
|
||||
* __selected__ `Boolean`
|
||||
|
||||
_inherited from_: [src/js/menu.js#L82](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L82)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,549 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Component
|
||||
|
||||
__EXTENDS__: [vjs.CoreObject](vjs.CoreObject.md)
|
||||
__DEFINED IN__: [src/js/component.js#L35](https://github.com/videojs/video.js/blob/master/src/js/component.js#L35)
|
||||
|
||||
Base UI Component class
|
||||
|
||||
Components are embeddable UI objects that are represented by both a
|
||||
javascript object and an element in the DOM. They can be children of other
|
||||
components, and can have many children themselves.
|
||||
|
||||
// adding a button to the player
|
||||
var button = player.addChild('button');
|
||||
button.el(); // -> button element
|
||||
|
||||
<div class="video-js">
|
||||
<div class="vjs-button">Button</div>
|
||||
</div>
|
||||
|
||||
Components are also event emitters.
|
||||
|
||||
button.on('click', function(){
|
||||
console.log('Button Clicked!');
|
||||
});
|
||||
|
||||
button.trigger('customevent');
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addChild](#addchild-child-options-)
|
||||
- [addClass](#addclass-classtoadd-)
|
||||
- [buildCSSClass](#buildcssclass)
|
||||
- [children](#children)
|
||||
- [contentEl](#contentel)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [dimensions](#dimensions-width-height-)
|
||||
- [dispose](#dispose)
|
||||
- [el](#el)
|
||||
- [enableTouchActivity](#enabletouchactivity)
|
||||
- [getChild](#getchild-name-)
|
||||
- [getChildById](#getchildbyid-id-)
|
||||
- [height](#height-num-skiplisteners-)
|
||||
- [hide](#hide)
|
||||
- [id](#id)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [initChildren](#initchildren)
|
||||
- [name](#name)
|
||||
- [off](#off-type-fn-)
|
||||
- [on](#on-type-fn-)
|
||||
- [one](#one-type-fn-)
|
||||
- [options](#options-obj-)
|
||||
- [player](#player)
|
||||
- [ready](#ready-fn-)
|
||||
- [removeChild](#removechild-component-)
|
||||
- [removeClass](#removeclass-classtoremove-)
|
||||
- [show](#show)
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_defined in_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_defined in_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_defined in_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_defined in_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_defined in_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_defined in_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_defined in_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_defined in_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_defined in_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_defined in_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_defined in_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,529 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ControlBar
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/control-bar.js#L9](https://github.com/videojs/video.js/blob/master/src/js/control-bar/control-bar.js#L9)
|
||||
|
||||
Container of main controls
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CoreObject
|
||||
|
||||
__DEFINED IN__: [src/js/core-object.js#L52](https://github.com/videojs/video.js/blob/master/src/js/core-object.js#L52)
|
||||
|
||||
Core Object/Class for objects that use inheritance + contstructors
|
||||
|
||||
To create a class that can be subclassed itself, extend the CoreObject class.
|
||||
|
||||
var Animal = CoreObject.extend();
|
||||
var Horse = Animal.extend();
|
||||
|
||||
The constructor can be defined through the init property of an object argument.
|
||||
|
||||
var Animal = CoreObject.extend({
|
||||
init: function(name, sound){
|
||||
this.name = name;
|
||||
}
|
||||
});
|
||||
|
||||
Other methods and properties can be added the same way, or directly to the
|
||||
prototype.
|
||||
|
||||
var Animal = CoreObject.extend({
|
||||
init: function(name){
|
||||
this.name = name;
|
||||
},
|
||||
getName: function(){
|
||||
return this.name;
|
||||
},
|
||||
sound: '...'
|
||||
});
|
||||
|
||||
Animal.prototype.makeSound = function(){
|
||||
alert(this.sound);
|
||||
};
|
||||
|
||||
To create an instance of a class, use the create method.
|
||||
|
||||
var fluffy = Animal.create('Fluffy');
|
||||
fluffy.getName(); // -> Fluffy
|
||||
|
||||
Methods and properties can be overridden in subclasses.
|
||||
|
||||
var Horse = Animal.extend({
|
||||
sound: 'Neighhhhh!'
|
||||
});
|
||||
|
||||
var horsey = Horse.create('Horsey');
|
||||
horsey.getName(); // -> Horsey
|
||||
horsey.makeSound(); // -> Alert: Neighhhhh!
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [create](#create-static)
|
||||
- [extend](#extend-props--static)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### create() `STATIC`
|
||||
> Create a new instace of this Object class
|
||||
>
|
||||
> var myAnimal = Animal.create();
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.CoreObject` An instance of a CoreObject subclass
|
||||
|
||||
_defined in_: [src/js/core-object.js#L120](https://github.com/videojs/video.js/blob/master/src/js/core-object.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### extend( props ) `STATIC`
|
||||
> Create a new object that inherits from this Object
|
||||
>
|
||||
> var Animal = CoreObject.extend();
|
||||
> var Horse = Animal.extend();
|
||||
|
||||
##### PARAMETERS:
|
||||
* __props__ `Object` Functions and properties to be applied to the
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.CoreObject` An object that inherits from CoreObject
|
||||
|
||||
_defined in_: [src/js/core-object.js#L70](https://github.com/videojs/video.js/blob/master/src/js/core-object.js#L70)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.CurrentTimeDisplay
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/time-display.js#L7](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L7)
|
||||
|
||||
Displays the current time
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.DurationDisplay
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/time-display.js#L43](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L43)
|
||||
|
||||
Displays the duration
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,582 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Flash
|
||||
|
||||
__EXTENDS__: [vjs.MediaTechController](vjs.MediaTechController.md)
|
||||
__DEFINED IN__: [src/js/media/flash.js#L15](https://github.com/videojs/video.js/blob/master/src/js/media/flash.js#L15)
|
||||
|
||||
Flash Media Controller - Wrapper for fallback SWF API
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [initControlsListeners](#initcontrolslisteners) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [onTap](#ontap) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [removeControlsListeners](#removecontrolslisteners) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/media/flash.js#L17](https://github.com/videojs/video.js/blob/master/src/js/media/flash.js#L17)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### initControlsListeners()
|
||||
> Set up click and touch listeners for the playback element
|
||||
> On desktops, a click on the video itself will toggle playback,
|
||||
> on a mobile device a click on the video toggles controls.
|
||||
> (toggling controls is done by toggling the user state between active and
|
||||
> inactive)
|
||||
>
|
||||
> A tap can signal that a user has become active, or has become inactive
|
||||
> e.g. a quick tap on an iPhone movie should reveal the controls. Another
|
||||
> quick tap should hide them again (signaling the user is in an inactive
|
||||
> viewing state)
|
||||
>
|
||||
> In addition to this, we still want the user to be considered inactive after
|
||||
> a few seconds of inactivity.
|
||||
>
|
||||
> Note: the only part of iOS interaction we can't mimic with this setup
|
||||
> is a touch and hold on the video element counting as activity in order to
|
||||
> keep the controls showing, but that shouldn't be an issue. A touch and hold on
|
||||
> any controls will still keep the user active
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L45](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L45)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Handle a click on the media element. By default will play/pause the media.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L118](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L118)
|
||||
|
||||
---
|
||||
|
||||
### onTap()
|
||||
> Handle a tap on the media element. By default it will toggle the user
|
||||
> activity state, which hides and shows the controls.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L138](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L138)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### removeControlsListeners()
|
||||
> Remove the listeners used for click and tap controls. This is needed for
|
||||
> toggling to controls disabled, where a tap/touch should do nothing.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L102](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L102)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.FullscreenToggle
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/control-bar/fullscreen-toggle.js#L8](https://github.com/videojs/video.js/blob/master/src/js/control-bar/fullscreen-toggle.js#L8)
|
||||
|
||||
Toggle fullscreen video
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,582 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Html5
|
||||
|
||||
__EXTENDS__: [vjs.MediaTechController](vjs.MediaTechController.md)
|
||||
__DEFINED IN__: [src/js/media/html5.js#L12](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L12)
|
||||
|
||||
HTML5 Media Controller - Wrapper for HTML5 Media API
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [initControlsListeners](#initcontrolslisteners) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [onTap](#ontap) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [removeControlsListeners](#removecontrolslisteners) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/media/html5.js#L14](https://github.com/videojs/video.js/blob/master/src/js/media/html5.js#L14)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### initControlsListeners()
|
||||
> Set up click and touch listeners for the playback element
|
||||
> On desktops, a click on the video itself will toggle playback,
|
||||
> on a mobile device a click on the video toggles controls.
|
||||
> (toggling controls is done by toggling the user state between active and
|
||||
> inactive)
|
||||
>
|
||||
> A tap can signal that a user has become active, or has become inactive
|
||||
> e.g. a quick tap on an iPhone movie should reveal the controls. Another
|
||||
> quick tap should hide them again (signaling the user is in an inactive
|
||||
> viewing state)
|
||||
>
|
||||
> In addition to this, we still want the user to be considered inactive after
|
||||
> a few seconds of inactivity.
|
||||
>
|
||||
> Note: the only part of iOS interaction we can't mimic with this setup
|
||||
> is a touch and hold on the video element counting as activity in order to
|
||||
> keep the controls showing, but that shouldn't be an issue. A touch and hold on
|
||||
> any controls will still keep the user active
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L45](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L45)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Handle a click on the media element. By default will play/pause the media.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L118](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L118)
|
||||
|
||||
---
|
||||
|
||||
### onTap()
|
||||
> Handle a tap on the media element. By default it will toggle the user
|
||||
> activity state, which hides and shows the controls.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L138](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L138)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### removeControlsListeners()
|
||||
> Remove the listeners used for click and tap controls. This is needed for
|
||||
> toggling to controls disabled, where a tap/touch should do nothing.
|
||||
|
||||
_inherited from_: [src/js/media/media.js#L102](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L102)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.JSON
|
||||
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [parse](#parse-text-reviver-)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### parse( text, [reviver] )
|
||||
> parse the json
|
||||
|
||||
##### PARAMETERS:
|
||||
* __text__ `String` The JSON string to parse
|
||||
* __reviver__ `Function` _(OPTIONAL)_ Optional function that can transform the results
|
||||
|
||||
##### RETURNS:
|
||||
* `Object|Array` The parsed JSON
|
||||
|
||||
_defined in_: [src/js/json.js#L34](https://github.com/videojs/video.js/blob/master/src/js/json.js#L34)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.LoadProgressBar
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L118](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L118)
|
||||
|
||||
Shows load progress
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L120](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.LoadingSpinner
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/loading-spinner.js#L10](https://github.com/videojs/video.js/blob/master/src/js/loading-spinner.js#L10)
|
||||
|
||||
Loading spinner for waiting events
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,529 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MediaLoader
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/media/loader.js#L7](https://github.com/videojs/video.js/blob/master/src/js/media/loader.js#L7)
|
||||
|
||||
The Media Loader is the component that decides which playback technology to load
|
||||
when the player is initialized.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,582 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MediaTechController
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/media/media.js#L12](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L12)
|
||||
|
||||
Base class for media (HTML5 Video, Flash) controllers
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [initControlsListeners](#initcontrolslisteners)
|
||||
- [onClick](#onclick-event-)
|
||||
- [onTap](#ontap)
|
||||
- [removeControlsListeners](#removecontrolslisteners)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/media/media.js#L14](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L14)
|
||||
|
||||
---
|
||||
|
||||
### initChildren()
|
||||
> Add and initialize default child components from options
|
||||
>
|
||||
> // when an instance of MyComponent is created, all children in options
|
||||
> // will be added to the instance by their name strings and options
|
||||
> MyComponent.prototype.options_.children = {
|
||||
> myChildComponent: {
|
||||
> myChildOption: true
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### initControlsListeners()
|
||||
> Set up click and touch listeners for the playback element
|
||||
> On desktops, a click on the video itself will toggle playback,
|
||||
> on a mobile device a click on the video toggles controls.
|
||||
> (toggling controls is done by toggling the user state between active and
|
||||
> inactive)
|
||||
>
|
||||
> A tap can signal that a user has become active, or has become inactive
|
||||
> e.g. a quick tap on an iPhone movie should reveal the controls. Another
|
||||
> quick tap should hide them again (signaling the user is in an inactive
|
||||
> viewing state)
|
||||
>
|
||||
> In addition to this, we still want the user to be considered inactive after
|
||||
> a few seconds of inactivity.
|
||||
>
|
||||
> Note: the only part of iOS interaction we can't mimic with this setup
|
||||
> is a touch and hold on the video element counting as activity in order to
|
||||
> keep the controls showing, but that shouldn't be an issue. A touch and hold on
|
||||
> any controls will still keep the user active
|
||||
|
||||
_defined in_: [src/js/media/media.js#L45](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L45)
|
||||
|
||||
---
|
||||
|
||||
### name()
|
||||
> Get the component's name. The name is often used to reference the component.
|
||||
>
|
||||
> var name = myComponent.name();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### onClick( event )
|
||||
> Handle a click on the media element. By default will play/pause the media.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __event__
|
||||
|
||||
_defined in_: [src/js/media/media.js#L118](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L118)
|
||||
|
||||
---
|
||||
|
||||
### onTap()
|
||||
> Handle a tap on the media element. By default it will toggle the user
|
||||
> activity state, which hides and shows the controls.
|
||||
|
||||
_defined in_: [src/js/media/media.js#L138](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L138)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### removeControlsListeners()
|
||||
> Remove the listeners used for click and tap controls. This is needed for
|
||||
> toggling to controls disabled, where a tap/touch should do nothing.
|
||||
|
||||
_defined in_: [src/js/media/media.js#L102](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L102)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,538 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Menu
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/menu.js#L12](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L12)
|
||||
|
||||
The Menu component is used to build pop up menus, including subtitle and
|
||||
captions selection menus.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [addItem](#additem-component-)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### 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#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,532 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MenuButton
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/menu.js#L99](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L99)
|
||||
|
||||
A button class with a popup menu
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [buildCSSClass](#buildcssclass)
|
||||
- [createItems](#createitems)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_defined in_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_defined in_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,543 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MenuItem
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/menu.js#L55](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L55)
|
||||
|
||||
The component for a menu item. `<li>`
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [init](#init-player-options-)
|
||||
- [onClick](#onclick)
|
||||
- [selected](#selected-selected-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Handle a click on the menu item, and set it to selected
|
||||
|
||||
_defined in_: [src/js/menu.js#L74](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L74)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### selected( selected )
|
||||
> Set this menu item as selected or not
|
||||
|
||||
##### PARAMETERS:
|
||||
* __selected__ `Boolean`
|
||||
|
||||
_defined in_: [src/js/menu.js#L82](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L82)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.MuteToggle
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/control-bar/mute-toggle.js#L8](https://github.com/videojs/video.js/blob/master/src/js/control-bar/mute-toggle.js#L8)
|
||||
|
||||
A button component for muting the audio
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,543 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.OffTextTrackMenuItem
|
||||
|
||||
__EXTENDS__: [vjs.TextTrackMenuItem](vjs.TextTrackMenuItem.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L765](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L765)
|
||||
|
||||
A special menu item for turning of a specific type of text track
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [selected](#selected-selected-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_inherited from_: [src/js/menu.js#L64](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L64)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L767](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L767)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Handle a click on the menu item, and set it to selected
|
||||
|
||||
_inherited from_: [src/js/menu.js#L74](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L74)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### selected( selected )
|
||||
> Set this menu item as selected or not
|
||||
|
||||
##### PARAMETERS:
|
||||
* __selected__ `Boolean`
|
||||
|
||||
_inherited from_: [src/js/menu.js#L82](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L82)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.PlayProgressBar
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L145](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L145)
|
||||
|
||||
Shows play progress
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/progress-control.js#L147](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L147)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.PlayToggle
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/control-bar/play-toggle.js#L8](https://github.com/videojs/video.js/blob/master/src/js/control-bar/play-toggle.js#L8)
|
||||
|
||||
Button to toggle between play and pause
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,971 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Player
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/player.js#L21](https://github.com/videojs/video.js/blob/master/src/js/player.js#L21)
|
||||
|
||||
An instance of the `vjs.Player` class is created when any of the Video.js setup methods are used to initialize a video.
|
||||
|
||||
```js
|
||||
var myPlayer = videojs('example_video_1');
|
||||
```
|
||||
|
||||
In the follwing example, the `data-setup` attribute tells the Video.js library to create a player instance when the library is ready.
|
||||
|
||||
```html
|
||||
<video id="example_video_1" data-setup='{}' controls>
|
||||
<source src="my-source.mp4" type="video/mp4">
|
||||
</video>
|
||||
```
|
||||
|
||||
After an instance has been created it can be accessed globally using `Video('example_video_1')`.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [buffered](#buffered)
|
||||
- [bufferedPercent](#bufferedpercent)
|
||||
- [cancelFullScreen](#cancelfullscreen)
|
||||
- [controls](#controls-controls-)
|
||||
- [currentTime](#currenttime-seconds-)
|
||||
- [dispose](#dispose)
|
||||
- [duration](#duration-seconds-)
|
||||
- [init](#init-tag-options-ready-)
|
||||
- [isFullScreen](#isfullscreen-isfs-)
|
||||
- [muted](#muted-muted-)
|
||||
- [pause](#pause)
|
||||
- [paused](#paused)
|
||||
- [play](#play)
|
||||
- [poster](#poster-src-)
|
||||
- [requestFullScreen](#requestfullscreen)
|
||||
- [src](#src-source-)
|
||||
- [volume](#volume-percentasdecimal-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-event-) _`inherited`_
|
||||
- [triggerReady](#triggerready) _`inherited`_
|
||||
- [width](#width-num-skiplisteners-) _`inherited`_
|
||||
|
||||
- [EVENTS](#events)
|
||||
- [durationchange](#durationchange-event)
|
||||
- [ended](#ended-event)
|
||||
- [error](#error-event)
|
||||
- [firstplay](#firstplay-event)
|
||||
- [fullscreenchange](#fullscreenchange-event)
|
||||
- [loadedalldata](#loadedalldata-event)
|
||||
- [loadeddata](#loadeddata-event)
|
||||
- [loadedmetadata](#loadedmetadata-event)
|
||||
- [loadstart](#loadstart-event)
|
||||
- [pause](#pause-event)
|
||||
- [play](#play-event)
|
||||
- [progress](#progress-event)
|
||||
- [timeupdate](#timeupdate-event)
|
||||
- [volumechange](#volumechange-event)
|
||||
- [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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buffered()
|
||||
> Get a TimeRange object with the times of the video that have been downloaded
|
||||
>
|
||||
> If you just want the percent of the video that's been downloaded,
|
||||
> use bufferedPercent.
|
||||
>
|
||||
> // Number of different ranges of time have been buffered. Usually 1.
|
||||
> numberOfRanges = bufferedTimeRange.length,
|
||||
>
|
||||
> // Time in seconds when the first range starts. Usually 0.
|
||||
> firstRangeStart = bufferedTimeRange.start(0),
|
||||
>
|
||||
> // Time in seconds when the first range ends
|
||||
> firstRangeEnd = bufferedTimeRange.end(0),
|
||||
>
|
||||
> // Length in seconds of the first time range
|
||||
> firstRangeLength = firstRangeEnd - firstRangeStart;
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A mock TimeRange object (following HTML spec)
|
||||
|
||||
_defined in_: [src/js/player.js#L727](https://github.com/videojs/video.js/blob/master/src/js/player.js#L727)
|
||||
|
||||
---
|
||||
|
||||
### bufferedPercent()
|
||||
> Get the percent (as a decimal) of the video that's been downloaded
|
||||
>
|
||||
> var howMuchIsDownloaded = myPlayer.bufferedPercent();
|
||||
>
|
||||
> 0 means none, 1 means all.
|
||||
> (This method isn't in the HTML5 spec, but it's very convenient)
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` A decimal between 0 and 1 representing the percent
|
||||
|
||||
_defined in_: [src/js/player.js#L753](https://github.com/videojs/video.js/blob/master/src/js/player.js#L753)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### cancelFullScreen()
|
||||
> Return the video to its normal size after having been in full screen mode
|
||||
>
|
||||
> myPlayer.cancelFullScreen();
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player` self
|
||||
|
||||
_defined in_: [src/js/player.js#L909](https://github.com/videojs/video.js/blob/master/src/js/player.js#L909)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### controls( controls )
|
||||
> Get or set whether or not the controls are showing.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __controls__ `Boolean` Set controls to showing or not
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean` Controls are showing
|
||||
|
||||
_defined in_: [src/js/player.js#L1167](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1167)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### currentTime( [seconds] )
|
||||
> Get or set the current time (in seconds)
|
||||
>
|
||||
> // get
|
||||
> var whereYouAt = myPlayer.currentTime();
|
||||
>
|
||||
> // set
|
||||
> myPlayer.currentTime(120); // 2 minutes into the video
|
||||
|
||||
##### PARAMETERS:
|
||||
* __seconds__ `Number|String` _(OPTIONAL)_ The time to seek to
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` The time in seconds, when not setting
|
||||
* `vjs.Player` self, when the current time is set
|
||||
|
||||
_defined in_: [src/js/player.js#L650](https://github.com/videojs/video.js/blob/master/src/js/player.js#L650)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Destroys the video player and does any necessary cleanup
|
||||
>
|
||||
> myPlayer.dispose();
|
||||
>
|
||||
> This is especially helpful if you are dynamically adding and removing videos
|
||||
> to/from the DOM.
|
||||
|
||||
_defined in_: [src/js/player.js#L135](https://github.com/videojs/video.js/blob/master/src/js/player.js#L135)
|
||||
|
||||
---
|
||||
|
||||
### duration( seconds )
|
||||
> Get the length in time of the video in seconds
|
||||
>
|
||||
> var lengthOfVideo = myPlayer.duration();
|
||||
>
|
||||
> **NOTE**: The video must have started loading before the duration can be
|
||||
> known, and in the case of Flash, may not be known until the video starts
|
||||
> playing.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __seconds__
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` The duration of the video in seconds
|
||||
|
||||
_defined in_: [src/js/player.js#L681](https://github.com/videojs/video.js/blob/master/src/js/player.js#L681)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( tag, [options], [ready] )
|
||||
> player's constructor function
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tag__ `Element` The original video tag used for configuring options
|
||||
* __options__ `Object` _(OPTIONAL)_ Player options
|
||||
* __ready__ `Function` _(OPTIONAL)_ Ready callback function
|
||||
|
||||
_defined in_: [src/js/player.js#L32](https://github.com/videojs/video.js/blob/master/src/js/player.js#L32)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### isFullScreen( [isFS] )
|
||||
> Check if the player is in fullscreen mode
|
||||
>
|
||||
> // get
|
||||
> var fullscreenOrNot = myPlayer.isFullScreen();
|
||||
>
|
||||
> // set
|
||||
> myPlayer.isFullScreen(true); // tell the player it's in fullscreen
|
||||
>
|
||||
> NOTE: As of the latest HTML5 spec, isFullScreen is no longer an official
|
||||
> property and instead document.fullscreenElement is used. But isFullScreen is
|
||||
> still a valuable property for internal player workings.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __isFS__ `Boolean` _(OPTIONAL)_ Update the player's fullscreen state
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean` true if fullscreen, false if not
|
||||
* `vjs.Player` self, when setting
|
||||
|
||||
_defined in_: [src/js/player.js#L840](https://github.com/videojs/video.js/blob/master/src/js/player.js#L840)
|
||||
|
||||
---
|
||||
|
||||
### muted( [muted] )
|
||||
> Get the current muted state, or turn mute on or off
|
||||
>
|
||||
> // get
|
||||
> var isVolumeMuted = myPlayer.muted();
|
||||
>
|
||||
> // set
|
||||
> myPlayer.muted(true); // mute the volume
|
||||
|
||||
##### PARAMETERS:
|
||||
* __muted__ `Boolean` _(OPTIONAL)_ True to mute, false to unmute
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean` True if mute is on, false if not, when getting
|
||||
* `vjs.Player` self, when setting mute
|
||||
|
||||
_defined in_: [src/js/player.js#L802](https://github.com/videojs/video.js/blob/master/src/js/player.js#L802)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### pause()
|
||||
> Pause the video playback
|
||||
>
|
||||
> myPlayer.pause();
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player` self
|
||||
|
||||
_defined in_: [src/js/player.js#L619](https://github.com/videojs/video.js/blob/master/src/js/player.js#L619)
|
||||
|
||||
---
|
||||
|
||||
### paused()
|
||||
> Check if the player is paused
|
||||
>
|
||||
> var isPaused = myPlayer.paused();
|
||||
> var isPlaying = !myPlayer.paused();
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean` false if the media is currently playing, or true otherwise
|
||||
|
||||
_defined in_: [src/js/player.js#L632](https://github.com/videojs/video.js/blob/master/src/js/player.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### play()
|
||||
> start media playback
|
||||
>
|
||||
> myPlayer.play();
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player` self
|
||||
|
||||
_defined in_: [src/js/player.js#L607](https://github.com/videojs/video.js/blob/master/src/js/player.js#L607)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### poster( [src] )
|
||||
> get or set the poster image source url
|
||||
>
|
||||
> ##### EXAMPLE:
|
||||
>
|
||||
> // getting
|
||||
> var currentPoster = myPlayer.poster();
|
||||
>
|
||||
> // setting
|
||||
> myPlayer.poster('http://example.com/myImage.jpg');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __src__ `String` _(OPTIONAL)_ Poster image source URL
|
||||
|
||||
##### RETURNS:
|
||||
* `String` poster URL when getting
|
||||
* `vjs.Player` self when setting
|
||||
|
||||
_defined in_: [src/js/player.js#L1140](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1140)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### requestFullScreen()
|
||||
> Increase the size of the video to full screen
|
||||
>
|
||||
> myPlayer.requestFullScreen();
|
||||
>
|
||||
> In some browsers, full screen is not supported natively, so it enters
|
||||
> "full window mode", where the video fills the browser window.
|
||||
> In browsers and devices that support native full screen, sometimes the
|
||||
> browser's default controls will be shown, and not the Video.js custom skin.
|
||||
> This includes most mobile devices (iOS, Android) and older versions of
|
||||
> Safari.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player` self
|
||||
|
||||
_defined in_: [src/js/player.js#L862](https://github.com/videojs/video.js/blob/master/src/js/player.js#L862)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### src( [source] )
|
||||
> The source function updates the video source
|
||||
>
|
||||
> There are three types of variables you can pass as the argument.
|
||||
>
|
||||
> **URL String**: A URL to the the video file. Use this method if you are sure
|
||||
> the current playback technology (HTML5/Flash) can support the source you
|
||||
> provide. Currently only MP4 files can be used in both HTML5 and Flash.
|
||||
>
|
||||
> myPlayer.src("http://www.example.com/path/to/video.mp4");
|
||||
>
|
||||
> **Source Object (or element):** A javascript object containing information
|
||||
> about the source file. Use this method if you want the player to determine if
|
||||
> it can support the file using the type information.
|
||||
>
|
||||
> myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
|
||||
>
|
||||
> **Array of Source Objects:** To provide multiple versions of the source so
|
||||
> that it can be played using HTML5 across browsers you can use an array of
|
||||
> source objects. Video.js will detect which version is supported and load that
|
||||
> file.
|
||||
>
|
||||
> myPlayer.src([
|
||||
> { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
|
||||
> { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
|
||||
> { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
|
||||
> ]);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __source__ `String|Object|Array` _(OPTIONAL)_ The source URL, object, or array of sources
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player` self
|
||||
|
||||
_defined in_: [src/js/player.js#L1024](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1024)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### volume( percentAsDecimal )
|
||||
> Get or set the current volume of the media
|
||||
>
|
||||
> // get
|
||||
> var howLoudIsIt = myPlayer.volume();
|
||||
>
|
||||
> // set
|
||||
> myPlayer.volume(0.5); // Set volume to half
|
||||
>
|
||||
> 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __percentAsDecimal__ `Number` The new volume as a decimal percent
|
||||
|
||||
##### RETURNS:
|
||||
* `Number` The current volume, when getting
|
||||
* `vjs.Player` self, when setting
|
||||
|
||||
_defined in_: [src/js/player.js#L772](https://github.com/videojs/video.js/blob/master/src/js/player.js#L772)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### durationchange `EVENT`
|
||||
> Fired when the duration of the media resource is first known or changed
|
||||
|
||||
_defined in_: [src/js/player.js#L502](https://github.com/videojs/video.js/blob/master/src/js/player.js#L502)
|
||||
|
||||
---
|
||||
|
||||
### ended `EVENT`
|
||||
> Fired when the end of the media resource is reached (currentTime == duration)
|
||||
|
||||
_defined in_: [src/js/player.js#L491](https://github.com/videojs/video.js/blob/master/src/js/player.js#L491)
|
||||
|
||||
---
|
||||
|
||||
### error `EVENT`
|
||||
> Fired when there is an error in playback
|
||||
|
||||
##### PARAMETERS:
|
||||
* __e__
|
||||
|
||||
_defined in_: [src/js/player.js#L534](https://github.com/videojs/video.js/blob/master/src/js/player.js#L534)
|
||||
|
||||
---
|
||||
|
||||
### firstplay `EVENT`
|
||||
> Fired the first time a video is played
|
||||
>
|
||||
> Not part of the HLS spec, and we're not sure if this is the best
|
||||
> implementation yet, so use sparingly. If you don't have a reason to
|
||||
> prevent playback, use `myPlayer.one('play');` instead.
|
||||
|
||||
_defined in_: [src/js/player.js#L448](https://github.com/videojs/video.js/blob/master/src/js/player.js#L448)
|
||||
|
||||
---
|
||||
|
||||
### fullscreenchange `EVENT`
|
||||
> Fired when the player switches in or out of fullscreen mode
|
||||
|
||||
_defined in_: [src/js/player.js#L522](https://github.com/videojs/video.js/blob/master/src/js/player.js#L522)
|
||||
|
||||
---
|
||||
|
||||
### loadedalldata `EVENT`
|
||||
> Fired when the player has finished downloading the source data
|
||||
|
||||
_defined in_: [src/js/player.js#L428](https://github.com/videojs/video.js/blob/master/src/js/player.js#L428)
|
||||
|
||||
---
|
||||
|
||||
### loadeddata `EVENT`
|
||||
> Fired when the player has downloaded data at the current playback position
|
||||
|
||||
_defined in_: [src/js/player.js#L422](https://github.com/videojs/video.js/blob/master/src/js/player.js#L422)
|
||||
|
||||
---
|
||||
|
||||
### loadedmetadata `EVENT`
|
||||
> Fired when the player has initial duration and dimension information
|
||||
|
||||
_defined in_: [src/js/player.js#L416](https://github.com/videojs/video.js/blob/master/src/js/player.js#L416)
|
||||
|
||||
---
|
||||
|
||||
### loadstart `EVENT`
|
||||
> Fired when the user agent begins looking for media data
|
||||
|
||||
_defined in_: [src/js/player.js#L410](https://github.com/videojs/video.js/blob/master/src/js/player.js#L410)
|
||||
|
||||
---
|
||||
|
||||
### pause `EVENT`
|
||||
> Fired whenever the media has been paused
|
||||
|
||||
_defined in_: [src/js/player.js#L462](https://github.com/videojs/video.js/blob/master/src/js/player.js#L462)
|
||||
|
||||
---
|
||||
|
||||
### play `EVENT`
|
||||
> Fired whenever the media begins or resumes playback
|
||||
|
||||
_defined in_: [src/js/player.js#L434](https://github.com/videojs/video.js/blob/master/src/js/player.js#L434)
|
||||
|
||||
---
|
||||
|
||||
### progress `EVENT`
|
||||
> Fired while the user agent is downloading media data
|
||||
|
||||
_defined in_: [src/js/player.js#L480](https://github.com/videojs/video.js/blob/master/src/js/player.js#L480)
|
||||
|
||||
---
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
### timeupdate `EVENT`
|
||||
> Fired when the current playback position has changed
|
||||
>
|
||||
> During playback this is fired every 15-250 milliseconds, depnding on the
|
||||
> playback technology in use.
|
||||
|
||||
_defined in_: [src/js/player.js#L474](https://github.com/videojs/video.js/blob/master/src/js/player.js#L474)
|
||||
|
||||
---
|
||||
|
||||
### volumechange `EVENT`
|
||||
> Fired when the volume changes
|
||||
|
||||
_defined in_: [src/js/player.js#L516](https://github.com/videojs/video.js/blob/master/src/js/player.js#L516)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.PosterImage
|
||||
|
||||
__EXTENDS__: [vjs.Button](vjs.Button.md)
|
||||
__DEFINED IN__: [src/js/poster.js#L10](https://github.com/videojs/video.js/blob/master/src/js/poster.js#L10)
|
||||
|
||||
The component that handles showing the poster image.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,528 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.ProgressControl
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L9](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L9)
|
||||
|
||||
The Progress Control component contains the seek bar, load progress,
|
||||
and play progress
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.RemainingTimeDisplay
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/time-display.js#L108](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L108)
|
||||
|
||||
Displays the time left in the video
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,539 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SeekBar
|
||||
|
||||
__EXTENDS__: [vjs.Slider](vjs.Slider.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L35](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L35)
|
||||
|
||||
Seek Bar and holder for the progress bars
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SeekHandle
|
||||
|
||||
__EXTENDS__: [vjs.SliderHandle](vjs.SliderHandle.md)
|
||||
__DEFINED IN__: [src/js/control-bar/progress-control.js#L167](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L167)
|
||||
|
||||
The Seek Handle shows the current position of the playhead during playback,
|
||||
and can be dragged to adjust the playhead.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### 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#L183](https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control.js#L183)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,539 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.Slider
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/slider.js#L10](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L10)
|
||||
|
||||
The base functionality for sliders like the volume bar and seek bar
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [onClick](#onclick-event-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SliderHandle
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/slider.js#L212](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L212)
|
||||
|
||||
SeekBar Behavior includes play progress bar, and seek handle
|
||||
Needed so it can determine seek position based on handle position/size
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### 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#L223](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L223)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,533 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SubtitlesButton
|
||||
|
||||
__EXTENDS__: [vjs.TextTrackButton](vjs.TextTrackButton.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L883](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L883)
|
||||
|
||||
The button component for toggling and selecting subtitles
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L885](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L885)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,672 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.SubtitlesTrack
|
||||
|
||||
__EXTENDS__: [vjs.TextTrack](vjs.TextTrack.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L689](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L689)
|
||||
|
||||
The track component for managing the hiding and showing of subtitles
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate) _`inherited`_
|
||||
- [activeCues](#activecues) _`inherited`_
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [adjustFontSize](#adjustfontsize) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel) _`inherited`_
|
||||
- [cues](#cues) _`inherited`_
|
||||
- [deactivate](#deactivate) _`inherited`_
|
||||
- [dflt](#dflt) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [disable](#disable) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [kind](#kind) _`inherited`_
|
||||
- [label](#label) _`inherited`_
|
||||
- [language](#language) _`inherited`_
|
||||
- [mode](#mode) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [readyState](#readystate) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [src](#src) _`inherited`_
|
||||
- [title](#title) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L385](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L385)
|
||||
|
||||
---
|
||||
|
||||
### activeCues()
|
||||
> Get the track active cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L264](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L264)
|
||||
|
||||
---
|
||||
|
||||
### 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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### adjustFontSize()
|
||||
> Change the font size of the text track to make it larger when playing in fullscreen mode
|
||||
> and restore it to its normal size when not in fullscreen mode.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L309](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L309)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L325](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L325)
|
||||
|
||||
---
|
||||
|
||||
### cues()
|
||||
> Get the track cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L249](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L249)
|
||||
|
||||
---
|
||||
|
||||
### deactivate()
|
||||
> Turn off cue tracking.
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L408](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L408)
|
||||
|
||||
---
|
||||
|
||||
### dflt()
|
||||
> Get the track default value. ('default' is a reserved keyword)
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L190](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L190)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### 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#L371](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L371)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### 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#L356](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L128](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L128)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### kind()
|
||||
> Get the track kind value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L161](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L161)
|
||||
|
||||
---
|
||||
|
||||
### label()
|
||||
> Get the track label value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L234](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L234)
|
||||
|
||||
---
|
||||
|
||||
### language()
|
||||
> Get the track language value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L219](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L219)
|
||||
|
||||
---
|
||||
|
||||
### mode()
|
||||
> Get the track mode
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L301](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L301)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### readyState()
|
||||
> Get the track readyState
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L283](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L283)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### 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#L341](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L341)
|
||||
|
||||
---
|
||||
|
||||
### src()
|
||||
> Get the track src value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L175](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L175)
|
||||
|
||||
---
|
||||
|
||||
### title()
|
||||
> Get the track title value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/tracks.js#L204](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L204)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,674 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrack
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L126](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L126)
|
||||
|
||||
The base class for all text tracks
|
||||
|
||||
Handles the parsing, hiding, and showing of text track cues
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [activate](#activate)
|
||||
- [activeCues](#activecues)
|
||||
- [adjustFontSize](#adjustfontsize)
|
||||
- [createEl](#createel)
|
||||
- [cues](#cues)
|
||||
- [deactivate](#deactivate)
|
||||
- [dflt](#dflt)
|
||||
- [disable](#disable)
|
||||
- [hide](#hide)
|
||||
- [init](#init-player-options-)
|
||||
- [kind](#kind)
|
||||
- [label](#label)
|
||||
- [language](#language)
|
||||
- [mode](#mode)
|
||||
- [readyState](#readystate)
|
||||
- [show](#show)
|
||||
- [src](#src)
|
||||
- [title](#title)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L385](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L385)
|
||||
|
||||
---
|
||||
|
||||
### activeCues()
|
||||
> Get the track active cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L264](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L264)
|
||||
|
||||
---
|
||||
|
||||
### 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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### adjustFontSize()
|
||||
> Change the font size of the text track to make it larger when playing in fullscreen mode
|
||||
> and restore it to its normal size when not in fullscreen mode.
|
||||
|
||||
_defined in_: [src/js/tracks.js#L309](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L309)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl()
|
||||
> Create basic div to hold cue text
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L325](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L325)
|
||||
|
||||
---
|
||||
|
||||
### cues()
|
||||
> Get the track cues
|
||||
|
||||
##### RETURNS:
|
||||
* `Array`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L249](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L249)
|
||||
|
||||
---
|
||||
|
||||
### deactivate()
|
||||
> Turn off cue tracking.
|
||||
|
||||
_defined in_: [src/js/tracks.js#L408](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L408)
|
||||
|
||||
---
|
||||
|
||||
### dflt()
|
||||
> Get the track default value. ('default' is a reserved keyword)
|
||||
|
||||
##### RETURNS:
|
||||
* `Boolean`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L190](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L190)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### 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#L371](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L371)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### 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#L356](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L356)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L128](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L128)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### kind()
|
||||
> Get the track kind value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L161](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L161)
|
||||
|
||||
---
|
||||
|
||||
### label()
|
||||
> Get the track label value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L234](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L234)
|
||||
|
||||
---
|
||||
|
||||
### language()
|
||||
> Get the track language value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L219](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L219)
|
||||
|
||||
---
|
||||
|
||||
### mode()
|
||||
> Get the track mode
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L301](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L301)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### readyState()
|
||||
> Get the track readyState
|
||||
|
||||
##### RETURNS:
|
||||
* `Number`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L283](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L283)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### 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#L341](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L341)
|
||||
|
||||
---
|
||||
|
||||
### src()
|
||||
> Get the track src value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L175](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L175)
|
||||
|
||||
---
|
||||
|
||||
### title()
|
||||
> Get the track title value
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_defined in_: [src/js/tracks.js#L204](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L204)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,532 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackButton
|
||||
|
||||
__EXTENDS__: [vjs.MenuButton](vjs.MenuButton.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L807](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L807)
|
||||
|
||||
The base class for buttons that toggle specific text track types (e.g. subtitles)
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L809](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L809)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,528 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackDisplay
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L710](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L710)
|
||||
|
||||
The component for displaying text track cues
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-ready-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options, ready )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
* __ready__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L712](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L712)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,543 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TextTrackMenuItem
|
||||
|
||||
__EXTENDS__: [vjs.MenuItem](vjs.MenuItem.md)
|
||||
__DEFINED IN__: [src/js/tracks.js#L737](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L737)
|
||||
|
||||
The specific menu item type for selecting a language within a text track kind
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [selected](#selected-selected-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
_inherited from_: [src/js/menu.js#L64](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L64)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/tracks.js#L739](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L739)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### onClick()
|
||||
> Handle a click on the menu item, and set it to selected
|
||||
|
||||
_inherited from_: [src/js/menu.js#L74](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L74)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### selected( selected )
|
||||
> Set this menu item as selected or not
|
||||
|
||||
##### PARAMETERS:
|
||||
* __selected__ `Boolean`
|
||||
|
||||
_inherited from_: [src/js/menu.js#L82](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L82)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,529 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.TimeDivider
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/time-display.js#L88](https://github.com/videojs/video.js/blob/master/src/js/control-bar/time-display.js#L88)
|
||||
|
||||
The separator between the current time and duration
|
||||
|
||||
Can be hidden if it's not needed in the design.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,539 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeBar
|
||||
|
||||
__EXTENDS__: [vjs.Slider](vjs.Slider.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-control.js#L46](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L46)
|
||||
|
||||
The bar that contains the volume level and can be clicked on to adjust the level
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [onClick](#onclick-event-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### 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#L200](https://github.com/videojs/video.js/blob/master/src/js/slider.js#L200)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeControl
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-control.js#L8](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L8)
|
||||
|
||||
The component for controlling the volume level
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,526 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeHandle
|
||||
|
||||
__EXTENDS__: [vjs.SliderHandle](vjs.SliderHandle.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-control.js#L132](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L132)
|
||||
|
||||
The volume handle can be dragged to adjust the volume level
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [createEl](#createel-tagname-attributes-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [init](#init-player-options-ready-) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### 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#L137](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L137)
|
||||
|
||||
---
|
||||
|
||||
### 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#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeLevel
|
||||
|
||||
__EXTENDS__: [vjs.Component](vjs.Component.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-control.js#L111](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L111)
|
||||
|
||||
Shows volume level
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
##### RETURNS:
|
||||
* `String` The constructed class name
|
||||
|
||||
_inherited from_: [src/js/component.js#L475](https://github.com/videojs/video.js/blob/master/src/js/component.js#L475)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### init( player, options )
|
||||
|
||||
##### PARAMETERS:
|
||||
* __player__
|
||||
* __options__
|
||||
|
||||
_defined in_: [src/js/control-bar/volume-control.js#L113](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control.js#L113)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,532 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.VolumeMenuButton
|
||||
|
||||
__EXTENDS__: [vjs.MenuButton](vjs.MenuButton.md)
|
||||
__DEFINED IN__: [src/js/control-bar/volume-menu-button.js#L5](https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-menu-button.js#L5)
|
||||
|
||||
Menu button with a popup for showing the volume slider.
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [init](#init-player-options-)
|
||||
- [addChild](#addchild-child-options-) _`inherited`_
|
||||
- [addClass](#addclass-classtoadd-) _`inherited`_
|
||||
- [buildCSSClass](#buildcssclass) _`inherited`_
|
||||
- [children](#children) _`inherited`_
|
||||
- [contentEl](#contentel) _`inherited`_
|
||||
- [createEl](#createel-tagname-attributes-) _`inherited`_
|
||||
- [createItems](#createitems) _`inherited`_
|
||||
- [dimensions](#dimensions-width-height-) _`inherited`_
|
||||
- [dispose](#dispose) _`inherited`_
|
||||
- [el](#el) _`inherited`_
|
||||
- [enableTouchActivity](#enabletouchactivity) _`inherited`_
|
||||
- [getChild](#getchild-name-) _`inherited`_
|
||||
- [getChildById](#getchildbyid-id-) _`inherited`_
|
||||
- [height](#height-num-skiplisteners-) _`inherited`_
|
||||
- [hide](#hide) _`inherited`_
|
||||
- [id](#id) _`inherited`_
|
||||
- [initChildren](#initchildren) _`inherited`_
|
||||
- [name](#name) _`inherited`_
|
||||
- [off](#off-type-fn-) _`inherited`_
|
||||
- [on](#on-type-fn-) _`inherited`_
|
||||
- [one](#one-type-fn-) _`inherited`_
|
||||
- [options](#options-obj-) _`inherited`_
|
||||
- [player](#player) _`inherited`_
|
||||
- [ready](#ready-fn-) _`inherited`_
|
||||
- [removeChild](#removechild-component-) _`inherited`_
|
||||
- [removeClass](#removeclass-classtoremove-) _`inherited`_
|
||||
- [show](#show) _`inherited`_
|
||||
- [trigger](#trigger-type-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#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)
|
||||
|
||||
---
|
||||
|
||||
### 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#L632](https://github.com/videojs/video.js/blob/master/src/js/component.js#L632)
|
||||
|
||||
---
|
||||
|
||||
### buildCSSClass()
|
||||
> Allows sub components to stack CSS class names
|
||||
|
||||
_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)
|
||||
|
||||
---
|
||||
|
||||
### children()
|
||||
> Get an array of all child components
|
||||
>
|
||||
> var kids = myComponent.children();
|
||||
|
||||
##### RETURNS:
|
||||
* `Array` The children
|
||||
|
||||
_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)
|
||||
|
||||
---
|
||||
|
||||
### 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#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)
|
||||
|
||||
---
|
||||
|
||||
### createEl( [tagName], [attributes] )
|
||||
> Create the component's DOM element
|
||||
|
||||
##### PARAMETERS:
|
||||
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
|
||||
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)
|
||||
|
||||
---
|
||||
|
||||
### createItems()
|
||||
> Create the list of menu items. Specific to each subclass.
|
||||
|
||||
_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)
|
||||
|
||||
---
|
||||
|
||||
### dimensions( width, height )
|
||||
> Set both width and height at the same time
|
||||
|
||||
##### PARAMETERS:
|
||||
* __width__ `Number|String`
|
||||
* __height__ `Number|String`
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` The component
|
||||
|
||||
_inherited from_: [src/js/component.js#L744](https://github.com/videojs/video.js/blob/master/src/js/component.js#L744)
|
||||
|
||||
---
|
||||
|
||||
### dispose()
|
||||
> Dispose of the component and all child components
|
||||
|
||||
_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)
|
||||
|
||||
---
|
||||
|
||||
### el()
|
||||
> Get the component's DOM element
|
||||
>
|
||||
> var domEl = myComponent.el();
|
||||
|
||||
##### RETURNS:
|
||||
* `Element`
|
||||
|
||||
_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)
|
||||
|
||||
---
|
||||
|
||||
### 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#L897](https://github.com/videojs/video.js/blob/master/src/js/component.js#L897)
|
||||
|
||||
---
|
||||
|
||||
### getChild( name )
|
||||
> Returns a child component with the provided name
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)
|
||||
|
||||
---
|
||||
|
||||
### getChildById( id )
|
||||
> Returns a child component with the provided ID
|
||||
|
||||
##### PARAMETERS:
|
||||
* __id__
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)
|
||||
|
||||
---
|
||||
|
||||
### 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#L733](https://github.com/videojs/video.js/blob/master/src/js/component.js#L733)
|
||||
|
||||
---
|
||||
|
||||
### hide()
|
||||
> Hide the component element if currently showing
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)
|
||||
|
||||
---
|
||||
|
||||
### id()
|
||||
> Get the component's ID
|
||||
>
|
||||
> var id = myComponent.id();
|
||||
|
||||
##### RETURNS:
|
||||
* `String`
|
||||
|
||||
_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
> }
|
||||
> }
|
||||
|
||||
_inherited from_: [src/js/component.js#L443](https://github.com/videojs/video.js/blob/master/src/js/component.js#L443)
|
||||
|
||||
---
|
||||
|
||||
### 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#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)
|
||||
|
||||
---
|
||||
|
||||
### off( [type], [fn] )
|
||||
> Remove an event listener from the component's element
|
||||
>
|
||||
> myComponent.off("eventName", myFunc);
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
|
||||
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L514](https://github.com/videojs/video.js/blob/master/src/js/component.js#L514)
|
||||
|
||||
---
|
||||
|
||||
### on( type, fn )
|
||||
> Add an event listener to this component's element
|
||||
>
|
||||
> var myFunc = function(){
|
||||
> var myPlayer = this;
|
||||
> // Do something when the event is fired
|
||||
> };
|
||||
>
|
||||
> myPlayer.on("eventName", myFunc);
|
||||
>
|
||||
> The context will be the component.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type e.g. 'click'
|
||||
* __fn__ `Function` The event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L500](https://github.com/videojs/video.js/blob/master/src/js/component.js#L500)
|
||||
|
||||
---
|
||||
|
||||
### one( type, fn )
|
||||
> Add an event listener to be triggered only once and then removed
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` Event type
|
||||
* __fn__ `Function` Event listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L526](https://github.com/videojs/video.js/blob/master/src/js/component.js#L526)
|
||||
|
||||
---
|
||||
|
||||
### options( obj )
|
||||
> Deep merge of options objects
|
||||
>
|
||||
> Whenever a property is an object on both options objects
|
||||
> the two properties will be merged using vjs.obj.deepMerge.
|
||||
>
|
||||
> This is used for merging options for child components. We
|
||||
> want it to be easy to override individual options on a child
|
||||
> component without having to rewrite all the other default options.
|
||||
>
|
||||
> Parent.prototype.options_ = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
||||
> 'childTwo': {},
|
||||
> 'childThree': {}
|
||||
> }
|
||||
> }
|
||||
> newOptions = {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'abc': '123' }
|
||||
> 'childTwo': null,
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
>
|
||||
> this.options(newOptions);
|
||||
>
|
||||
> RESULT
|
||||
>
|
||||
> {
|
||||
> children: {
|
||||
> 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
||||
> 'childTwo': null, // Disabled. Won't be initialized.
|
||||
> 'childThree': {},
|
||||
> 'childFour': {}
|
||||
> }
|
||||
> }
|
||||
|
||||
##### PARAMETERS:
|
||||
* __obj__ `Object` Object of new option values
|
||||
|
||||
##### RETURNS:
|
||||
* `Object` A NEW object of this.options_ and obj merged
|
||||
|
||||
_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)
|
||||
|
||||
---
|
||||
|
||||
### player()
|
||||
> Return the component's player
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Player`
|
||||
|
||||
_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)
|
||||
|
||||
---
|
||||
|
||||
### ready( fn )
|
||||
> Bind a listener to the component's ready state
|
||||
>
|
||||
> Different from event listeners in that if the ready event has already happend
|
||||
> it will trigger the function immediately.
|
||||
|
||||
##### PARAMETERS:
|
||||
* __fn__ `Function` Ready listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L585](https://github.com/videojs/video.js/blob/master/src/js/component.js#L585)
|
||||
|
||||
---
|
||||
|
||||
### 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#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)
|
||||
|
||||
---
|
||||
|
||||
### 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#L643](https://github.com/videojs/video.js/blob/master/src/js/component.js#L643)
|
||||
|
||||
---
|
||||
|
||||
### show()
|
||||
> Show the component element if hidden
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L653](https://github.com/videojs/video.js/blob/master/src/js/component.js#L653)
|
||||
|
||||
---
|
||||
|
||||
### trigger( type, event )
|
||||
> Trigger an event on an element
|
||||
>
|
||||
> myComponent.trigger('eventName');
|
||||
|
||||
##### PARAMETERS:
|
||||
* __type__ `String` The event type to trigger, e.g. 'click'
|
||||
* __event__ `Event|Object` The event object to be passed to the listener
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component` self
|
||||
|
||||
_inherited from_: [src/js/component.js#L540](https://github.com/videojs/video.js/blob/master/src/js/component.js#L540)
|
||||
|
||||
---
|
||||
|
||||
### triggerReady()
|
||||
> Trigger the ready listeners
|
||||
|
||||
##### RETURNS:
|
||||
* `vjs.Component`
|
||||
|
||||
_inherited from_: [src/js/component.js#L604](https://github.com/videojs/video.js/blob/master/src/js/component.js#L604)
|
||||
|
||||
---
|
||||
|
||||
### 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#L716](https://github.com/videojs/video.js/blob/master/src/js/component.js#L716)
|
||||
|
||||
---
|
||||
|
||||
## EVENTS
|
||||
|
||||
### resize `EVENT`
|
||||
> Fired when the width and/or height of the component changes
|
||||
|
||||
_inherited from_: [src/js/component.js#L823](https://github.com/videojs/video.js/blob/master/src/js/component.js#L823)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs
|
||||
|
||||
__DEFINED IN__: [src/js/core.js#L26](https://github.com/videojs/video.js/blob/master/src/js/core.js#L26)
|
||||
|
||||
Doubles as the main function for users to create a player instance and also
|
||||
the main library object.
|
||||
|
||||
**ALIASES** videojs, _V_ (deprecated)
|
||||
|
||||
The `vjs` function can be used to initialize or retrieve a player.
|
||||
|
||||
var myPlayer = vjs('my_video_id');
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [PROPERTIES](#properties)
|
||||
- [options](#options)
|
||||
- [players](#players)
|
||||
|
||||
- CLASSES
|
||||
- [BigPlayButton](vjs.BigPlayButton.md)
|
||||
- [Button](vjs.Button.md)
|
||||
- [CaptionsButton](vjs.CaptionsButton.md)
|
||||
- [CaptionsTrack](vjs.CaptionsTrack.md)
|
||||
- [ChaptersButton](vjs.ChaptersButton.md)
|
||||
- [ChaptersTrack](vjs.ChaptersTrack.md)
|
||||
- [ChaptersTrackMenuItem](vjs.ChaptersTrackMenuItem.md)
|
||||
- [Component](vjs.Component.md)
|
||||
- [ControlBar](vjs.ControlBar.md)
|
||||
- [CoreObject](vjs.CoreObject.md)
|
||||
- [CurrentTimeDisplay](vjs.CurrentTimeDisplay.md)
|
||||
- [DurationDisplay](vjs.DurationDisplay.md)
|
||||
- [Flash](vjs.Flash.md)
|
||||
- [FullscreenToggle](vjs.FullscreenToggle.md)
|
||||
- [Html5](vjs.Html5.md)
|
||||
- [LoadProgressBar](vjs.LoadProgressBar.md)
|
||||
- [LoadingSpinner](vjs.LoadingSpinner.md)
|
||||
- [MediaLoader](vjs.MediaLoader.md)
|
||||
- [MediaTechController](vjs.MediaTechController.md)
|
||||
- [Menu](vjs.Menu.md)
|
||||
- [MenuButton](vjs.MenuButton.md)
|
||||
- [MenuItem](vjs.MenuItem.md)
|
||||
- [MuteToggle](vjs.MuteToggle.md)
|
||||
- [OffTextTrackMenuItem](vjs.OffTextTrackMenuItem.md)
|
||||
- [PlayProgressBar](vjs.PlayProgressBar.md)
|
||||
- [PlayToggle](vjs.PlayToggle.md)
|
||||
- [Player](vjs.Player.md)
|
||||
- [PosterImage](vjs.PosterImage.md)
|
||||
- [ProgressControl](vjs.ProgressControl.md)
|
||||
- [RemainingTimeDisplay](vjs.RemainingTimeDisplay.md)
|
||||
- [SeekBar](vjs.SeekBar.md)
|
||||
- [SeekHandle](vjs.SeekHandle.md)
|
||||
- [Slider](vjs.Slider.md)
|
||||
- [SliderHandle](vjs.SliderHandle.md)
|
||||
- [SubtitlesButton](vjs.SubtitlesButton.md)
|
||||
- [SubtitlesTrack](vjs.SubtitlesTrack.md)
|
||||
- [TextTrack](vjs.TextTrack.md)
|
||||
- [TextTrackButton](vjs.TextTrackButton.md)
|
||||
- [TextTrackDisplay](vjs.TextTrackDisplay.md)
|
||||
- [TextTrackMenuItem](vjs.TextTrackMenuItem.md)
|
||||
- [TimeDivider](vjs.TimeDivider.md)
|
||||
- [VolumeBar](vjs.VolumeBar.md)
|
||||
- [VolumeControl](vjs.VolumeControl.md)
|
||||
- [VolumeHandle](vjs.VolumeHandle.md)
|
||||
- [VolumeLevel](vjs.VolumeLevel.md)
|
||||
- [VolumeMenuButton](vjs.VolumeMenuButton.md)
|
||||
|
||||
- NAMESPACES
|
||||
- [util](vjs.util.md)
|
||||
|
||||
- [METHODS](#methods)
|
||||
- [plugin](#plugin-name-init-)
|
||||
|
||||
---
|
||||
|
||||
## 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#L77](https://github.com/videojs/video.js/blob/master/src/js/core.js#L77)
|
||||
|
||||
---
|
||||
|
||||
### players
|
||||
> Global player list
|
||||
|
||||
_defined in_: [src/js/core.js#L118](https://github.com/videojs/video.js/blob/master/src/js/core.js#L118)
|
||||
|
||||
---
|
||||
|
||||
## METHODS
|
||||
|
||||
### plugin( name, init )
|
||||
> the method for registering a video.js plugin
|
||||
|
||||
##### PARAMETERS:
|
||||
* __name__ `String` The name of the plugin
|
||||
* __init__ `Function` The function that is run when the player inits
|
||||
|
||||
_defined in_: [src/js/plugins.js#L7](https://github.com/videojs/video.js/blob/master/src/js/plugins.js#L7)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<!-- GENERATED FROM SOURCE -->
|
||||
|
||||
# vjs.media
|
||||
|
||||
|
||||
---
|
||||
|
||||
## INDEX
|
||||
|
||||
- [UNDEFINED](#undefined)
|
||||
- [ApiMethods](#apimethods)
|
||||
|
||||
---
|
||||
|
||||
## UNDEFINED
|
||||
|
||||
### ApiMethods
|
||||
> List of default API methods for any MediaTechController
|
||||
|
||||
_defined in_: [src/js/media/media.js#L160](https://github.com/videojs/video.js/blob/master/src/js/media/media.js#L160)
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
API
|
||||
===
|
||||
|
||||
The Video.js API allows you to interact with the video through JavaScript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
|
||||
|
||||
Referencing the Player
|
||||
----------------------
|
||||
To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example\_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
|
||||
|
||||
```js
|
||||
var myPlayer = videojs('example_video_1');
|
||||
```
|
||||
|
||||
(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
|
||||
|
||||
Wait Until the Player is Ready
|
||||
------------------------------
|
||||
The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
|
||||
|
||||
```javascript
|
||||
videojs("example_video_1").ready(function(){
|
||||
var myPlayer = this;
|
||||
|
||||
// EXAMPLE: Start playing the video.
|
||||
myPlayer.play();
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
API Methods
|
||||
-----------
|
||||
Now that you have access to a ready player, you can control the video, get values, or respond to video events. The Video.js API function names follow the [HTML5 media API](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html). The main difference is that getter/setter functions are used for video properties.
|
||||
|
||||
```js
|
||||
|
||||
// setting a property on a bare HTML5 video element
|
||||
myVideoElement.currentTime = "120";
|
||||
|
||||
// setting a property on a Video.js player
|
||||
myPlayer.currentTime(120);
|
||||
|
||||
```
|
||||
|
||||
The full list of player API methods and events can be found in the [player API docs](../api/vjs.Player.md).
|
||||
@@ -0,0 +1,59 @@
|
||||
Components
|
||||
===
|
||||
The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the Component class, or a subclass of Component.
|
||||
|
||||
```js
|
||||
videojs.Control = videojs.Component.extend();
|
||||
videojs.Button = videojs.Control.extend();
|
||||
videojs.PlayToggle = videojs.Button.extend();
|
||||
```
|
||||
|
||||
The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.
|
||||
|
||||
```js
|
||||
// Adding a new control to the player
|
||||
myPlayer.addChild('BigPlayButton');
|
||||
```
|
||||
|
||||
Every component has an associated DOM element, and when you add a child component, it inserts the element of that child into the element of the parent.
|
||||
|
||||
```js
|
||||
myPlayer.addChild('BigPlayButton');
|
||||
```
|
||||
|
||||
Results in:
|
||||
|
||||
```html
|
||||
<!-- Player Element -->
|
||||
<div class="video-js">
|
||||
<!-- BigPlayButton Element -->
|
||||
<div class="vjs-big-play-button"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
The actual default component structure of the Video.js player looks something like this:
|
||||
|
||||
```
|
||||
Player
|
||||
PosterImage
|
||||
TextTrackDisplay
|
||||
LoadingSpinner
|
||||
BigPlayButton
|
||||
ControlBar
|
||||
PlayToggle
|
||||
FullscreenToggle
|
||||
CurrentTimeDisplay
|
||||
TimeDivider
|
||||
DurationDisplay
|
||||
RemainingTimeDisplay
|
||||
ProgressControl
|
||||
SeekBar
|
||||
LoadProgressBar
|
||||
PlayProgressBar
|
||||
SeekHandle
|
||||
VolumeControl
|
||||
VolumeBar
|
||||
VolumeLevel
|
||||
VolumeHandle
|
||||
MuteToggle
|
||||
```
|
||||
@@ -0,0 +1,39 @@
|
||||
Glossary
|
||||
========
|
||||
Terms related to web video.
|
||||
|
||||
### DOM (Document Object Model)
|
||||
The container of elements on the page that must be loaded before you can interact with the elements with through Javascript.
|
||||
http://en.wikipedia.org/wiki/Document_Object_Model
|
||||
|
||||
|
||||
### Flash Fallback
|
||||
The Flash video player (SWF) used to play a video when HTML5 isn't supported.
|
||||
|
||||
|
||||
### TimeRange
|
||||
|
||||
|
||||
### HTML5 Video
|
||||
HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Apple, Microsoft, Google, Opera, etc.) have to build the video playback functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.
|
||||
|
||||
Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards (not controlled by one company), and it will work everywhere.
|
||||
|
||||
A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside from YouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).
|
||||
|
||||
|
||||
### Video Tag
|
||||
There are a number of great resources that will give you an introduction to the video tag an how it is used including:
|
||||
|
||||
- [Dive into HTML5](http://diveintohtml5.org/video.html)
|
||||
- Lynda.com's ['HTML5 Video and Audio in Depth'](http://www.lynda.com/HTML-5-tutorials/HTML5-Video-and-Audio-in-Depth/80781-2.html) video tutorials created by yours truly.
|
||||
|
||||
An if you really want to dig in, you can read the (W3C Spec)[http://www.w3.org/TR/html5/video.html]. (Warning - not for the faint of heart)
|
||||
|
||||
|
||||
### Skin
|
||||
"Skin" refers to the design of the player's controls, also sometimes called the chrome. With VideoJS, new skins can be built simply by creating a new stylesheet.
|
||||
|
||||
|
||||
### Content Delivery Network (CDN)
|
||||
A network of servers around the world that host copies of a file. When your browser requests one of these files, the CDN automatically determines which server is closest to your location and delivers the file from there. This drastically increases delivery time, especially internationally.
|
||||
@@ -0,0 +1,114 @@
|
||||
Options
|
||||
=======
|
||||
|
||||
Setting Options
|
||||
---------------
|
||||
|
||||
The Video.js embed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.
|
||||
|
||||
```html
|
||||
<video controls autoplay preload="auto" ...>
|
||||
```
|
||||
|
||||
Alternatively, you can use the data-setup attribute to provide options in the [JSON](http://json.org/example.html) format. This is also how you would set options that aren't standard to the video tag.
|
||||
|
||||
```html
|
||||
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
|
||||
```
|
||||
|
||||
Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.
|
||||
|
||||
```js
|
||||
videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
|
||||
```
|
||||
|
||||
|
||||
Individual Options
|
||||
------------------
|
||||
|
||||
> ### Note on Video Tag Attributes ###
|
||||
> With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:
|
||||
|
||||
WRONG
|
||||
```html
|
||||
<video controls="true" ...>
|
||||
```
|
||||
|
||||
RIGHT
|
||||
```html
|
||||
<video controls ...>
|
||||
```
|
||||
|
||||
> The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls="false") which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute's value to the same as its name (e.g. controls="controls").
|
||||
|
||||
|
||||
### controls ###
|
||||
The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.
|
||||
|
||||
```html
|
||||
<video controls ...>
|
||||
or
|
||||
{ "controls": true }
|
||||
```
|
||||
|
||||
|
||||
### autoplay ###
|
||||
If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
|
||||
NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it's customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.
|
||||
```html
|
||||
<video autoplay ...>
|
||||
or
|
||||
{ "autoplay": true }
|
||||
```
|
||||
|
||||
|
||||
### preload ###
|
||||
The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.
|
||||
|
||||
'auto': Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users' bandwidth. This is why the value is called 'auto' and not something more final like 'true'.
|
||||
|
||||
'metadata': Load only the meta data of the video, which includes information like the duration and dimensions of the video.
|
||||
|
||||
'none': Don't preload any of the video data. This will wait until the user clicks play to begin downloading.
|
||||
|
||||
```html
|
||||
<video preload ...>
|
||||
or
|
||||
{ "preload": "auto" }
|
||||
```
|
||||
|
||||
|
||||
### poster ###
|
||||
The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.
|
||||
```html
|
||||
<video poster="myPoster.jpg" ...>
|
||||
or
|
||||
{ "poster": "myPoster.jpg" }
|
||||
```
|
||||
|
||||
|
||||
### loop ###
|
||||
The loop attribute causes the video to start over as soon as it ends. This could be used for a visual affect like clouds in the background.
|
||||
```html
|
||||
<video loop ...>
|
||||
or
|
||||
{ "loop": "true" }
|
||||
```
|
||||
|
||||
|
||||
### width ###
|
||||
The width attribute sets the display width of the video.
|
||||
```html
|
||||
<video width="640" ...>
|
||||
or
|
||||
{ "width": 640 }
|
||||
```
|
||||
|
||||
|
||||
### height ###
|
||||
The height attribute sets the display height of the video.
|
||||
```html
|
||||
<video height="480" ...>
|
||||
or
|
||||
{ "height": 480 }
|
||||
```
|
||||
@@ -0,0 +1,41 @@
|
||||
Plugins
|
||||
=======
|
||||
If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin.
|
||||
|
||||
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:
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
vjs.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...
|
||||
|
||||
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:
|
||||
|
||||
vjs('vidId', {
|
||||
plugins: {
|
||||
examplePlugin: {
|
||||
exampleOption: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
|
||||
|
||||
video.examplePlugin({ exampleOption: true });
|
||||
|
||||
That's it. Head on over to the Video.js wiki and add your plugin to the list so everyone else can check it out.
|
||||
@@ -0,0 +1,102 @@
|
||||
Setup
|
||||
=====
|
||||
|
||||
Video.js is pretty easy to set up. It can take a matter of seconds to get the player up and working on your web page.
|
||||
|
||||
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. It's often recommended now to put JavaScript before the end body tag (</body>) instead of the head (<head>), but Video.js includes an 'HTML5 Shiv', which needs to be in the head for older IE versions to respect the video tag as a valid element.
|
||||
|
||||
> NOTE: If you're already using an HTML5 shiv like [Modernizr](http://modernizr.com/) you can include the Video.js JavaScript anywhere, however make sure your version of Modernizr includes the shiv for video.
|
||||
|
||||
> If you're not using something like Modernizr but still want to include Video.JS before the closing body tag, you can add your own shiv. Include this in the head of your document:
|
||||
|
||||
> ```html
|
||||
<script type="text/javascript">
|
||||
document.createElement('video');document.createElement('audio');document.createElement('track');
|
||||
</script>
|
||||
```
|
||||
|
||||
### CDN Version ###
|
||||
```html
|
||||
<link href="//vjs.zencdn.net/4.4/video-js.css" rel="stylesheet">
|
||||
<script src="//vjs.zencdn.net/4.4/video.js"></script>
|
||||
```
|
||||
|
||||
### Self Hosted. ###
|
||||
With the self hosted option you'll also want to update the location of the video-js.swf file.
|
||||
```html
|
||||
<link href="//example.com/path/to/video-js.css" rel="stylesheet">
|
||||
<script src="//example.com/path/to/video.js"></script>
|
||||
<script>
|
||||
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
Step 2: Add an HTML5 video tag to your page.
|
||||
--------------------------------------------
|
||||
With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.
|
||||
|
||||
1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.
|
||||
|
||||
2. The 'id' Attribute: Should be used and unique for every video on the same page.
|
||||
|
||||
3. The 'class' attribute contains two classes:
|
||||
- `video-js` applies styles that are required for Video.js functionality, like fullscreen and subtitles.
|
||||
- `vjs-default-skin` applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
|
||||
|
||||
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js vjs-default-skin"
|
||||
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' />
|
||||
</video>
|
||||
```
|
||||
|
||||
By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional `vjs-big-play-centered` class to your video element. For example:
|
||||
|
||||
```html
|
||||
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
|
||||
controls preload="auto" width="640" height="264"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
data-setup='{"example_option":true}'>
|
||||
...
|
||||
</video>
|
||||
```
|
||||
|
||||
Alternative Setup for Dynamically Loaded HTML
|
||||
---------------------------------------------
|
||||
If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.
|
||||
```js
|
||||
videojs("example_video_1", {}, function(){
|
||||
// Player (this) is initialized and ready.
|
||||
});
|
||||
```
|
||||
|
||||
The first argument in the `videojs` function is the ID of your video tag. Replace it with your own.
|
||||
|
||||
The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.
|
||||
|
||||
The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.
|
||||
|
||||
Instead of using an element ID, you can also pass a reference to the element itself.
|
||||
|
||||
```js
|
||||
videojs(document.getElementsById('example_video_1')), {}, function()) {
|
||||
// This is functionally the same as the previous example.
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function()) {
|
||||
// You can grab an element by class if you'd like, just make sure
|
||||
// if it's an array that you pick one (here we chose the first).
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,28 @@
|
||||
Skins
|
||||
=====
|
||||
|
||||
The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin.
|
||||
|
||||
## Icons
|
||||
|
||||
New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font.
|
||||
|
||||
All of the icons are available as variables in the [LESS](https://github.com/videojs/video.js/blob/master/src/css/video-js.less#L87-L99) source, making it easy to replace icons (such as the loading spinner). The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
|
||||
|
||||

|
||||
|
||||
## Customization
|
||||
|
||||
When you create a new skin, you can either override styles in the default skin:
|
||||
|
||||
```css
|
||||
.vjs-default-skin .vjs-play-progress { background: #900; }
|
||||
```
|
||||
|
||||
Or remove the 'vjs-default-skin' class from the video tag and create a new skin from scratch.
|
||||
|
||||
```html
|
||||
<video class="video-js my-custom-skin" ...>
|
||||
```
|
||||
|
||||
More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins).
|
||||
@@ -0,0 +1,68 @@
|
||||
Playback Technology ("Tech")
|
||||
============================
|
||||
Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.
|
||||
|
||||
Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
|
||||
|
||||
Building an API Wrapper
|
||||
-----------------------
|
||||
We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the [Video.js](https://github.com/zencoder/video-js/tree/master/src) source where you can see how both the HTML5 and video-js.swf API wrappers were created.
|
||||
|
||||
Required Methods
|
||||
----------------
|
||||
canPlayType
|
||||
play
|
||||
pause
|
||||
currentTime
|
||||
volume
|
||||
duration
|
||||
buffered
|
||||
supportsFullScreen
|
||||
|
||||
Required Events
|
||||
---------------
|
||||
loadstart
|
||||
play
|
||||
pause
|
||||
playing
|
||||
ended
|
||||
volumechange
|
||||
durationchange
|
||||
error
|
||||
|
||||
Optional Events (include if supported)
|
||||
--------------------------------------
|
||||
timeupdate
|
||||
progress
|
||||
enterFullScreen
|
||||
exitFullScreen
|
||||
|
||||
Adding Playback Technology
|
||||
==================
|
||||
When adding additional Tech to a video player, make sure to add the supported tech to the video object.
|
||||
|
||||
### Tag Method: ###
|
||||
<video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'
|
||||
|
||||
### Object Method: ###
|
||||
videojs("videoID", {
|
||||
techOrder: ["html5", "flash", "other supported tech"]
|
||||
});
|
||||
|
||||
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.
|
||||
|
||||
Enabling Streaming Playback
|
||||
--------------------------------
|
||||
In order to force the Flash tech to choose streaming playback, you need to provide a valid streaming source **before other valid Flash video sources**. This is necessary because of the source selection algorithm, where playback tech chooses the first possible source object with a valid type. Valid streaming `type` values include `rtmp/mp4` and `rtmp/flv`. The streaming `src` value requires valid connection and stream strings, separated by an `&`. An example of supplying a streaming source through your HTML markup might look like:
|
||||
|
||||
<source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4">
|
||||
<source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
|
||||
<source src="http://your.static.provider.net/path/to/video.webm" type="video/webm">
|
||||
|
||||
You may optionally use the last `/` as the separator between connection and stream strings, for example:
|
||||
|
||||
<source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4">
|
||||
|
||||
All four RTMP protocols are valid in the `src` (RTMP, RTMPT, RTMPE, and RTMPS).
|
||||
@@ -0,0 +1,225 @@
|
||||
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. [Microsoft has a builder](http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/) that can help you get started on the file.
|
||||
|
||||
When creating captions, there's also additional [caption formatting techniques](http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) that would be good to use, like brackets around sound effects. [ sound effect ]
|
||||
|
||||
Adding to Video.js
|
||||
------------------
|
||||
Once you have your WebVTT file created, you can add it to Video.js using the track trag. Put your track 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>
|
||||
```
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,35 @@
|
||||
[Video.js homepage](http://videojs.com)
|
||||
|
||||
<h1>Video.js Documentation</h1>
|
||||
|
||||
There are two categories of docs: [Guides](./guides/) and [API docs](./api/). Guides explain general topics and use cases (e.g. setup). API docs are automatically generated from the codebase and give specific details about functions, properties, and events.
|
||||
|
||||
(Corrections and additions welcome)
|
||||
|
||||
## Guides
|
||||
|
||||
### Getting Started
|
||||
|
||||
* [Setup](./guides/setup.md) - Check out the [5 second setup](http://videojs.com/#section5) if you're just getting started. The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
|
||||
|
||||
* [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.
|
||||
|
||||
### Customizing
|
||||
|
||||
* [API](./guides/api.md) - The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
|
||||
|
||||
* [Skins](./guides/skins.md) - You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together.
|
||||
|
||||
* [Tech](./guides/tech.md) - A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
|
||||
|
||||
* [Plugins](./guides/plugins.md) - You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or use one created by someone else.
|
||||
|
||||
### Resources
|
||||
|
||||
* [Glossary](./guides/glossary.md) - Some helpful definitions.
|
||||
|
||||
## API Docs
|
||||
- The most relevant API doc is the [player API doc](./api/vjs.Player.md).
|
||||
- [Full list of API Docs](./api/)
|
||||
|
Antes Largura: | Altura: | Tamanho: 120 KiB |
|
Antes Largura: | Altura: | Tamanho: 689 B |
|
Antes Largura: | Altura: | Tamanho: 83 KiB |
|
Antes Largura: | Altura: | Tamanho: 1.2 KiB |
|
Antes Largura: | Altura: | Tamanho: 5.5 KiB |
|
Antes Largura: | Altura: | Tamanho: 5.9 KiB |
|
Antes Largura: | Altura: | Tamanho: 5.6 KiB |