@mux/mux-player 0.1.0-canary.0-556dabf
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +196 -0
- package/README.md +231 -0
- package/dist/index.cjs.js +1432 -0
- package/dist/index.mjs +709 -0
- package/dist/mux-player.js +1478 -0
- package/dist/mux-player.mjs +1478 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/types/dialog.d.ts +6 -0
- package/dist/types/errors.d.ts +6 -0
- package/dist/types/helpers.d.ts +26 -0
- package/dist/types/html.d.ts +18 -0
- package/dist/types/index.d.ts +199 -0
- package/dist/types/logger.d.ts +5 -0
- package/dist/types/media-chrome/dialog.d.ts +12 -0
- package/dist/types/media-chrome/time-display.d.ts +9 -0
- package/dist/types/media-theme-mux/icons.d.ts +15 -0
- package/dist/types/media-theme-mux/media-theme-mux.d.ts +29 -0
- package/dist/types/template.d.ts +5 -0
- package/dist/types/utils.d.ts +10 -0
- package/dist/types/video-api.d.ts +64 -0
- package/dist/types-ts3.4/dialog.d.ts +6 -0
- package/dist/types-ts3.4/errors.d.ts +6 -0
- package/dist/types-ts3.4/helpers.d.ts +26 -0
- package/dist/types-ts3.4/html.d.ts +18 -0
- package/dist/types-ts3.4/index.d.ts +180 -0
- package/dist/types-ts3.4/logger.d.ts +5 -0
- package/dist/types-ts3.4/media-chrome/dialog.d.ts +12 -0
- package/dist/types-ts3.4/media-chrome/time-display.d.ts +9 -0
- package/dist/types-ts3.4/media-theme-mux/icons.d.ts +15 -0
- package/dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts +29 -0
- package/dist/types-ts3.4/template.d.ts +5 -0
- package/dist/types-ts3.4/utils.d.ts +10 -0
- package/dist/types-ts3.4/video-api.d.ts +53 -0
- package/lang/en.json +32 -0
- package/lang/nl.json +31 -0
- package/package.json +106 -0
- package/src/dialog.ts +54 -0
- package/src/errors.ts +163 -0
- package/src/helpers.ts +131 -0
- package/src/html.ts +165 -0
- package/src/index.ts +952 -0
- package/src/logger.ts +26 -0
- package/src/media-chrome/dialog.ts +192 -0
- package/src/media-chrome/time-display.ts +70 -0
- package/src/media-theme-mux/icons/airplay.svg +8 -0
- package/src/media-theme-mux/icons/captions-off.svg +5 -0
- package/src/media-theme-mux/icons/captions-on.svg +5 -0
- package/src/media-theme-mux/icons/fullscreen-enter.svg +5 -0
- package/src/media-theme-mux/icons/fullscreen-exit.svg +5 -0
- package/src/media-theme-mux/icons/pause.svg +5 -0
- package/src/media-theme-mux/icons/pip-enter.svg +5 -0
- package/src/media-theme-mux/icons/pip-exit.svg +5 -0
- package/src/media-theme-mux/icons/play.svg +5 -0
- package/src/media-theme-mux/icons/seek-backward.svg +13 -0
- package/src/media-theme-mux/icons/seek-forward.svg +13 -0
- package/src/media-theme-mux/icons/volume-high.svg +6 -0
- package/src/media-theme-mux/icons/volume-low.svg +6 -0
- package/src/media-theme-mux/icons/volume-medium.svg +6 -0
- package/src/media-theme-mux/icons/volume-off.svg +6 -0
- package/src/media-theme-mux/icons.ts +33 -0
- package/src/media-theme-mux/media-theme-mux.ts +398 -0
- package/src/media-theme-mux/styles.css +167 -0
- package/src/styles.css +42 -0
- package/src/template.ts +126 -0
- package/src/types.d.ts +52 -0
- package/src/utils.ts +100 -0
- package/src/video-api.ts +298 -0
- package/test/errors.test.js +169 -0
- package/test/helpers.test.js +78 -0
- package/test/player.test.js +696 -0
- package/test/template.test.js +70 -0
- package/test/utils.test.js +21 -0
- package/test/web-test-runner.config.mjs +29 -0
- package/tsconfig.json +21 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
+
|
|
6
|
+
# [0.1.0-beta.20](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.19...@mux-elements/mux-player@0.1.0-beta.20) (2022-06-23)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- enable cast docs + cast fix ([#253](https://github.com/muxinc/elements/issues/253)) ([421d515](https://github.com/muxinc/elements/commit/421d515cc4700cf9d7ca4f0d09aa600ec4adac7b))
|
|
11
|
+
- **mux-player:** Add cc btn to Vod XS chrome. ([#249](https://github.com/muxinc/elements/issues/249)) ([cf4ebe0](https://github.com/muxinc/elements/commit/cf4ebe0051c22223bcb50b0f8e2fc9a71b015ff0))
|
|
12
|
+
- **mux-player:** Update theme css to better account for audio vs. non-audio styling. ([81aa045](https://github.com/muxinc/elements/commit/81aa045be8a80e38b9da39800d1ae03cd806412e))
|
|
13
|
+
- upgrade Media Chrome v0.6.9 ([#267](https://github.com/muxinc/elements/issues/267)) ([0ec48f7](https://github.com/muxinc/elements/commit/0ec48f79b2cafe2066425a75d95c06fbeb6a236f))
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
- Handle inferred mux data env key for custom domain cases. ([eedc19e](https://github.com/muxinc/elements/commit/eedc19e2025844f99909cf3d0751811b55239329))
|
|
18
|
+
- **mux-player:** Add basic chromes for audio only live & dvr. ([bc7dfdf](https://github.com/muxinc/elements/commit/bc7dfdf78aee96ab12980354384ea36a8e30ff05))
|
|
19
|
+
- **mux-player:** Add basic support for custom video domains. ([d355705](https://github.com/muxinc/elements/commit/d355705511df296c693fbb9f9168a15c34ae0993))
|
|
20
|
+
- **mux-player:** Add chromecast button for audio only chromes. ([3f2462b](https://github.com/muxinc/elements/commit/3f2462b51621a3e077d6e0471963d10cc606dbe8))
|
|
21
|
+
|
|
22
|
+
# [0.1.0-beta.19](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.18...@mux-elements/mux-player@0.1.0-beta.19) (2022-06-07)
|
|
23
|
+
|
|
24
|
+
### Bug Fixes
|
|
25
|
+
|
|
26
|
+
- importing castable-video ([44cbb2f](https://github.com/muxinc/elements/commit/44cbb2f26290952ac8d3fe51a1d933352b0b9134))
|
|
27
|
+
|
|
28
|
+
# [0.1.0-beta.18](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.17...@mux-elements/mux-player@0.1.0-beta.18) (2022-06-06)
|
|
29
|
+
|
|
30
|
+
### Bug Fixes
|
|
31
|
+
|
|
32
|
+
- attrs not available in constructor ([#240](https://github.com/muxinc/elements/issues/240)) ([add468a](https://github.com/muxinc/elements/commit/add468a0fc93ddfb745dfbc60a08e8a9120621be))
|
|
33
|
+
- don't shift captions on iphones ([a4ae5f1](https://github.com/muxinc/elements/commit/a4ae5f1df0ce030f1ffedd74972873ff0f600483))
|
|
34
|
+
- don't shift captions on live, unless secondary color is set ([b474980](https://github.com/muxinc/elements/commit/b4749806ba1ec082fb21642edae9e963e9287643))
|
|
35
|
+
- lower captions offset for safari ([2f97a45](https://github.com/muxinc/elements/commit/2f97a452397ee276235a55d1deb29c8f0f4d2975))
|
|
36
|
+
|
|
37
|
+
### Features
|
|
38
|
+
|
|
39
|
+
- add casting logic without cast-button ([#237](https://github.com/muxinc/elements/issues/237)) ([f7f1fe9](https://github.com/muxinc/elements/commit/f7f1fe9713f8c2dcedb2840f463b5478d6fffca0))
|
|
40
|
+
- **dvr:** Initial effort for DVR support. ([d58d78f](https://github.com/muxinc/elements/commit/d58d78fe6716d21ff03e5edb7d47c73e85ef4c85))
|
|
41
|
+
- **mux-player:** Add audio-only support. Update vanilla example for audio use case. ([28c3db1](https://github.com/muxinc/elements/commit/28c3db19afb7b885316c034f1e02499dec472f7d))
|
|
42
|
+
- **mux-player:** minor cleanup for audio only UI. ([909a5ea](https://github.com/muxinc/elements/commit/909a5eaee520c2be982f4d3a139dc6836265d514))
|
|
43
|
+
- subtitles for M3U8 playlists, resume session, add cast-button ([#239](https://github.com/muxinc/elements/issues/239)) ([89793d0](https://github.com/muxinc/elements/commit/89793d0f98776252b1a585f605a0af39bd5c22d2))
|
|
44
|
+
- vertical align progress bar and improve second color background ([#235](https://github.com/muxinc/elements/issues/235)) ([37e9eb7](https://github.com/muxinc/elements/commit/37e9eb74339f0f544f5e96e717396a6899446be0))
|
|
45
|
+
|
|
46
|
+
# [0.1.0-beta.17](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.16...@mux-elements/mux-player@0.1.0-beta.17) (2022-05-26)
|
|
47
|
+
|
|
48
|
+
### Bug Fixes
|
|
49
|
+
|
|
50
|
+
- add an error if a token is provided via the playback ID ([d09446d](https://github.com/muxinc/elements/commit/d09446d6da3dc3b332db031336c97ee9349ac9f1))
|
|
51
|
+
|
|
52
|
+
# [0.1.0-beta.16](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.15...@mux-elements/mux-player@0.1.0-beta.16) (2022-05-23)
|
|
53
|
+
|
|
54
|
+
**Note:** Version bump only for package @mux-elements/mux-player
|
|
55
|
+
|
|
56
|
+
# [0.1.0-beta.15](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.14...@mux-elements/mux-player@0.1.0-beta.15) (2022-05-23)
|
|
57
|
+
|
|
58
|
+
### Bug Fixes
|
|
59
|
+
|
|
60
|
+
- **mux-player:** upgrade Media Chrome to 0.6.5 ([45415e6](https://github.com/muxinc/elements/commit/45415e63bbf8b6f7b115231022f06d3805da051e))
|
|
61
|
+
|
|
62
|
+
# [0.1.0-beta.14](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.13...@mux-elements/mux-player@0.1.0-beta.14) (2022-05-20)
|
|
63
|
+
|
|
64
|
+
### Bug Fixes
|
|
65
|
+
|
|
66
|
+
- switch cjs extension to .cjs.js ([30e83c3](https://github.com/muxinc/elements/commit/30e83c3ce0bd9bfda4817c30ffe0921e425619e4))
|
|
67
|
+
|
|
68
|
+
# [0.1.0-beta.13](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.12...@mux-elements/mux-player@0.1.0-beta.13) (2022-05-19)
|
|
69
|
+
|
|
70
|
+
### Bug Fixes
|
|
71
|
+
|
|
72
|
+
- bump LIVE_SEGMENT_SECS to 5 ([3fdf72d](https://github.com/muxinc/elements/commit/3fdf72d0e1322571aa18e8de74649f0dce5ae7b9))
|
|
73
|
+
|
|
74
|
+
# [0.1.0-beta.12](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.11...@mux-elements/mux-player@0.1.0-beta.12) (2022-05-12)
|
|
75
|
+
|
|
76
|
+
### Bug Fixes
|
|
77
|
+
|
|
78
|
+
- bump media-chrome dep for fullscreen bugfix ([7ba458c](https://github.com/muxinc/elements/commit/7ba458ca38d29d2a0c9d4dd8a950bb3cd394c543))
|
|
79
|
+
|
|
80
|
+
# [0.1.0-beta.11](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.10...@mux-elements/mux-player@0.1.0-beta.11) (2022-05-11)
|
|
81
|
+
|
|
82
|
+
### Bug Fixes
|
|
83
|
+
|
|
84
|
+
- **mux-player:** Ensure that the externally set poster attr is used iff it's set. ([e761073](https://github.com/muxinc/elements/commit/e76107359375de8e7db41cf3762734fa98c9d543))
|
|
85
|
+
|
|
86
|
+
### Features
|
|
87
|
+
|
|
88
|
+
- **mux-player:** Add thumbnail-time support to mux-player. Document attr&prop. Warn when used with thumbnail-token. ([ee235e0](https://github.com/muxinc/elements/commit/ee235e014bd76daee470e21eff2944b9a85c9ac9))
|
|
89
|
+
|
|
90
|
+
# [0.1.0-beta.10](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.9...@mux-elements/mux-player@0.1.0-beta.10) (2022-05-10)
|
|
91
|
+
|
|
92
|
+
### Bug Fixes
|
|
93
|
+
|
|
94
|
+
- clear state on other src related attrs ([17e75e7](https://github.com/muxinc/elements/commit/17e75e78d9b14c913138c2d181d279a58ef98832))
|
|
95
|
+
- fullscreen controls layout ([#208](https://github.com/muxinc/elements/issues/208)) ([7bda89d](https://github.com/muxinc/elements/commit/7bda89de57e540e31f92a6b51f7379c94aad983d))
|
|
96
|
+
- make height larger for touch temporarily ([86aaa84](https://github.com/muxinc/elements/commit/86aaa849340ff3a5acdc758f2a3a8fc6065e314e))
|
|
97
|
+
- move hasPlayed into mux-player ([62bcd07](https://github.com/muxinc/elements/commit/62bcd076612a02f4d449ebe1ad0d34c8d8106942))
|
|
98
|
+
- put progress bar above controls ([3f454e0](https://github.com/muxinc/elements/commit/3f454e01f464a74be6bc3c7a14a5920d2ae48623))
|
|
99
|
+
|
|
100
|
+
# [0.1.0-beta.9](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.8...@mux-elements/mux-player@0.1.0-beta.9) (2022-05-03)
|
|
101
|
+
|
|
102
|
+
### Bug Fixes
|
|
103
|
+
|
|
104
|
+
- custom video events handling ([#203](https://github.com/muxinc/elements/issues/203)) ([a909f89](https://github.com/muxinc/elements/commit/a909f89a69ee0d4b67e9d9371ac0f80984016181))
|
|
105
|
+
- keep .hls but have it log a warning saying to use .\_hls ([11e6c10](https://github.com/muxinc/elements/commit/11e6c102a7e238bc8104c52ae9b94e7e3c2c7e19))
|
|
106
|
+
- keep mux-player#video for backward compatibility ([ddf3c6e](https://github.com/muxinc/elements/commit/ddf3c6eccb0011a42774133ec0a646d84d463f53))
|
|
107
|
+
- playback core should handle seek to live on first play ([805070a](https://github.com/muxinc/elements/commit/805070a7a4cb7158180710ecf85bf54bdb1f9280))
|
|
108
|
+
- prevent dialog from focus if outside player ([#196](https://github.com/muxinc/elements/issues/196)) ([6c73219](https://github.com/muxinc/elements/commit/6c732198b08f11162f7ee8c4345344b4c050a60f))
|
|
109
|
+
|
|
110
|
+
### Features
|
|
111
|
+
|
|
112
|
+
- add errorTranslator prop & muxVideo.error property ([#195](https://github.com/muxinc/elements/issues/195)) ([3afc2f0](https://github.com/muxinc/elements/commit/3afc2f0af75a5ad8ef00257a4ebc34882ff8c9ab))
|
|
113
|
+
- add media-theme-mux as a replaceable element ([#175](https://github.com/muxinc/elements/issues/175)) ([ee3c186](https://github.com/muxinc/elements/commit/ee3c186433c198a27304577e012b899c1aee44d4))
|
|
114
|
+
- rename .video to .media for consistency with media-chrome ([52c3a1d](https://github.com/muxinc/elements/commit/52c3a1ddef275256d2adc4cc200cb47b1c3023c3))
|
|
115
|
+
- rename hls to \_hls ([2d53bc2](https://github.com/muxinc/elements/commit/2d53bc2517840d65a8fd5e2bb2d979ce8b491116))
|
|
116
|
+
|
|
117
|
+
# [0.1.0-beta.8](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.7...@mux-elements/mux-player@0.1.0-beta.8) (2022-04-22)
|
|
118
|
+
|
|
119
|
+
### Bug Fixes
|
|
120
|
+
|
|
121
|
+
- point pkgjson#browser at mjs build for webpack 4 ([#191](https://github.com/muxinc/elements/issues/191)) ([a73a495](https://github.com/muxinc/elements/commit/a73a4951052bfc77cc24667b9bc0a05efbcbb355))
|
|
122
|
+
|
|
123
|
+
# [0.1.0-beta.7](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.6...@mux-elements/mux-player@0.1.0-beta.7) (2022-04-18)
|
|
124
|
+
|
|
125
|
+
### Bug Fixes
|
|
126
|
+
|
|
127
|
+
- make mux-player size based on video element ([#185](https://github.com/muxinc/elements/issues/185)) ([e4af9a8](https://github.com/muxinc/elements/commit/e4af9a885720f172837eb20ea49dc96bf66a77be))
|
|
128
|
+
- make mux-video errors more uniform, fix async ([#183](https://github.com/muxinc/elements/issues/183)) ([0ea4dc3](https://github.com/muxinc/elements/commit/0ea4dc3beafc7d8a6c5078087d14f3f4bac5dda7))
|
|
129
|
+
|
|
130
|
+
# [0.1.0-beta.6](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.5...@mux-elements/mux-player@0.1.0-beta.6) (2022-04-13)
|
|
131
|
+
|
|
132
|
+
### Bug Fixes
|
|
133
|
+
|
|
134
|
+
- get polyfill from playback core in mux-player ([ec053f9](https://github.com/muxinc/elements/commit/ec053f90f6b7e3ccf0dd6bdd9034cbe8ead0d593))
|
|
135
|
+
|
|
136
|
+
# [0.1.0-beta.5](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.4...@mux-elements/mux-player@0.1.0-beta.5) (2022-04-12)
|
|
137
|
+
|
|
138
|
+
### Bug Fixes
|
|
139
|
+
|
|
140
|
+
- clear some state on playbackId change ([#174](https://github.com/muxinc/elements/issues/174)) ([af0738e](https://github.com/muxinc/elements/commit/af0738ea5ae5a75861f75fc2ae3809ada735f3e2))
|
|
141
|
+
- **mux-player:** adding test for metadata attrs. ([a460566](https://github.com/muxinc/elements/commit/a4605661fabb33a178bb3244b1411c63bf1e1148))
|
|
142
|
+
- **mux-player:** metadata fields should be set based on 'external'/attr values in mux-player. ([bd474b6](https://github.com/muxinc/elements/commit/bd474b658931afb0ea9f3f1585ba3142d22bd503))
|
|
143
|
+
- prevent non-fatal error events propagating ([#179](https://github.com/muxinc/elements/issues/179)) ([2103800](https://github.com/muxinc/elements/commit/2103800b1026653703a67432a9bf80cb2ce5c7ac))
|
|
144
|
+
|
|
145
|
+
# [0.1.0-beta.4](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.3...@mux-elements/mux-player@0.1.0-beta.4) (2022-04-08)
|
|
146
|
+
|
|
147
|
+
### Bug Fixes
|
|
148
|
+
|
|
149
|
+
- child custom element mux-video upgraded after mux-player ([#171](https://github.com/muxinc/elements/issues/171)) ([9db8037](https://github.com/muxinc/elements/commit/9db8037f379132307727941f82a736d55e76b4e5))
|
|
150
|
+
- primary color should be also used for the text color on controls ([d44da1b](https://github.com/muxinc/elements/commit/d44da1b7e4a11ddf8274a09acf306747a5af42ce))
|
|
151
|
+
|
|
152
|
+
### Features
|
|
153
|
+
|
|
154
|
+
- **mux-player:** Add more seek to live behavior tests. Add event for inLiveWindow change. ([f334328](https://github.com/muxinc/elements/commit/f3343289a29b0c19856addf41fd0c5c1b2081c6a))
|
|
155
|
+
- **mux-player:** Don't use disabled to toggle seek to live btn functionality. ([14f1f1c](https://github.com/muxinc/elements/commit/14f1f1c7ecd43416363eb43583622ea5732c9072))
|
|
156
|
+
- **mux-player:** Seek to live button impl with live edge window detection and play on seek/seek on play behavior. ([77c8c5f](https://github.com/muxinc/elements/commit/77c8c5f05c2b22553efc6e627b0b148dded19a42))
|
|
157
|
+
- **mux-player:** use aria-disabled instead of non-standard attr. Add consts/code comments. fix css var. ([8c73f60](https://github.com/muxinc/elements/commit/8c73f602c6745a731f7fafdfdd8567b90db2ccad))
|
|
158
|
+
- **player:** Add inLiveWindow getter to player. Start tests for seek to live button behaviors. ([8217a4e](https://github.com/muxinc/elements/commit/8217a4ee4c9e61b570fa506f2b476a570dd78f61))
|
|
159
|
+
|
|
160
|
+
# [0.1.0-beta.3](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.2...@mux-elements/mux-player@0.1.0-beta.3) (2022-04-01)
|
|
161
|
+
|
|
162
|
+
### Bug Fixes
|
|
163
|
+
|
|
164
|
+
- devLog links to GH base URL ([022f69f](https://github.com/muxinc/elements/commit/022f69fca5624399e67ea9bb5ce1b2b2929979d6))
|
|
165
|
+
- **mux-player:** Make sure internal state monitoring setup happens after relevant elements exist. ([43e9566](https://github.com/muxinc/elements/commit/43e956678b7e1b8da3e95144b7d9f6f3d2cb99d5))
|
|
166
|
+
|
|
167
|
+
# [0.1.0-beta.2](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.1...@mux-elements/mux-player@0.1.0-beta.2) (2022-04-01)
|
|
168
|
+
|
|
169
|
+
### Bug Fixes
|
|
170
|
+
|
|
171
|
+
- **mux-player:** temp fix conditional render bug ([73534dc](https://github.com/muxinc/elements/commit/73534dc476d901e916734044834c71130a6de73e))
|
|
172
|
+
|
|
173
|
+
### Features
|
|
174
|
+
|
|
175
|
+
- **mux-player:** new iteration on error handling ([a89af8a](https://github.com/muxinc/elements/commit/a89af8a0b9400f2e0836e67b813d996636f044c1))
|
|
176
|
+
|
|
177
|
+
### Reverts
|
|
178
|
+
|
|
179
|
+
- Revert "Publish" ([42fc528](https://github.com/muxinc/elements/commit/42fc528216346ff52d967cec5392a1191f74a1c0))
|
|
180
|
+
|
|
181
|
+
# [0.1.0-beta.1](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.0...@mux-elements/mux-player@0.1.0-beta.1) (2022-03-28)
|
|
182
|
+
|
|
183
|
+
### Bug Fixes
|
|
184
|
+
|
|
185
|
+
- add patched template-parts fork ([b200e9f](https://github.com/muxinc/elements/commit/b200e9fcdff9cf5757ec646c8833e742e329afa0))
|
|
186
|
+
- **mux-player:** Add support for event handlers to template parts processing. ([704d2e3](https://github.com/muxinc/elements/commit/704d2e34dacdb68316ead85a2dd494475de72732))
|
|
187
|
+
- **mux-player:** don't fire the closed event twice per close on the dialog WC. ([0231b1a](https://github.com/muxinc/elements/commit/0231b1a950fe6eb476ce8bcd3ce4d49cee97e0c9))
|
|
188
|
+
- **mux-player:** Use onclose event handler in template. Clear errors onclose. ([1eca0ef](https://github.com/muxinc/elements/commit/1eca0efb32b74f82c67be4f9ac0f3bc5dfbf7839))
|
|
189
|
+
- prettier format all elements files ([741d607](https://github.com/muxinc/elements/commit/741d607521ca9578cfad9f0a9216a6565b4c56a1))
|
|
190
|
+
- update media-chrome to 0.5.4 ([21e7884](https://github.com/muxinc/elements/commit/21e78840768bad8eeb24d39fa97fcd8cf6ab266a))
|
|
191
|
+
|
|
192
|
+
### Features
|
|
193
|
+
|
|
194
|
+
- add beaconCollectionDomain option to replace beaconDomain ([a44b699](https://github.com/muxinc/elements/commit/a44b699ae3138590b9d953f693f95971694658df))
|
|
195
|
+
- Improve error handling / messaging ([#132](https://github.com/muxinc/elements/issues/132)) ([b1f2dd0](https://github.com/muxinc/elements/commit/b1f2dd0f44ceb75a93f8cf758d6e4258e1366ed5))
|
|
196
|
+
- **mux-player:** move captions up when controls are showing ([e8d9842](https://github.com/muxinc/elements/commit/e8d9842f5b343fd11965c4fbda96323a6e173e63))
|
package/README.md
ADDED
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<h1 align="center"><mux-player></h1>
|
|
3
|
+
<a href="https://npmcharts.com/compare/@mux/mux-player?interval=30"><img src="https://img.shields.io/npm/dm/@mux/mux-player.svg?sanitize=true" alt="Downloads"></a>
|
|
4
|
+
<a href="https://www.npmjs.com/package/@mux/mux-player"><img src="https://img.shields.io/npm/v/@mux/mux-player.svg?sanitize=true" alt="Version"></a>
|
|
5
|
+
<a href="https://www.npmjs.com/package/@mux/mux-player"><img src="https://img.shields.io/npm/l/@mux/mux-player.svg?sanitize=true" alt="License"></a>
|
|
6
|
+
</p>
|
|
7
|
+
|
|
8
|
+
# Introduction
|
|
9
|
+
|
|
10
|
+
`<mux-player>` is the official Mux-flavored video player web component.
|
|
11
|
+
|
|
12
|
+
The player UI is built on [`<media-chrome>`](https://github.com/muxinc/media-chrome/) and [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) drives the core video logic used to play Mux Video content that Just Works.
|
|
13
|
+
|
|
14
|
+
Be sure to check out our [official Mux documentation](https://docs.mux.com/guides/video/mux-player), too!
|
|
15
|
+
|
|
16
|
+
# Installation
|
|
17
|
+
|
|
18
|
+
If you're using `npm` or `yarn`, install that way:
|
|
19
|
+
|
|
20
|
+
## Package manager
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
yarn add @mux/mux-player
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
or
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
npm i @mux/mux-player
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Then, import the library into your application with either `import` or `require`:
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
import '@mux/mux-player';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
or
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
require('@mux/mux-player');
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## CDN option
|
|
45
|
+
|
|
46
|
+
Alternatively, use the CDN hosted version of this package:
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<script src="https://unpkg.com/@mux/mux-player"></script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
If you are using ECMAScript modules, you can also load the `mux-player.mjs` file with `type=module`:
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<script type="module" src="https://unpkg.com/@mux/mux-player/dist/mux-player.mjs"></script>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Features and benefits
|
|
59
|
+
|
|
60
|
+
`<mux-player>` is a fully functional Video Player for the web with dirt simple integration to [Mux Video](https://docs.mux.com/guides/video) and [Mux Data](https://docs.mux.com/guides/data/monitor-hls-js).
|
|
61
|
+
|
|
62
|
+
`<mux-player>` provides a responsive UI based on player dimensions and stream type, automatic thumbnail previews and poster images, and built-in integration with Mux Data.
|
|
63
|
+
|
|
64
|
+
`<mux-player>` will use the optimal [Hls.js](https://github.com/video-dev/hls.js) settings for Mux Video so you don't have to worry about that. `<mux-player>` will also periodically test new versions of Hls.js and upgrade to known stable versions so you don't have to worry about upgrading to a new version of Hls.js yourself.
|
|
65
|
+
|
|
66
|
+
## Usage
|
|
67
|
+
|
|
68
|
+
Loading this library in the browser will register a [custom web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) for `<mux-player>`.
|
|
69
|
+
|
|
70
|
+
Now you are free to use this web component in your HTML, just as you would with the HTML5 `<video>` element.
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<body>
|
|
74
|
+
<p></p>
|
|
75
|
+
|
|
76
|
+
<mux-player
|
|
77
|
+
playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
|
|
78
|
+
metadata-video-title="Big Buck Bunny"
|
|
79
|
+
metadata-viewer-user-id="user-id-1234"
|
|
80
|
+
stream-type="on-demand"
|
|
81
|
+
controls
|
|
82
|
+
></mux-player>
|
|
83
|
+
</body>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Metadata
|
|
87
|
+
|
|
88
|
+
To go above and beyond `metadata-*` attributes
|
|
89
|
+
|
|
90
|
+
To set other available metadata fields use the `metadata` property on the `<mux-player>` element like so:
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<mux-player
|
|
94
|
+
playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
|
|
95
|
+
env-key="mux-data-env-key"
|
|
96
|
+
metadata-video-title="Big Buck Bunny"
|
|
97
|
+
metadata-viewer-user-id="user-id-1234"
|
|
98
|
+
controls
|
|
99
|
+
>
|
|
100
|
+
</mux-player>
|
|
101
|
+
|
|
102
|
+
<script>
|
|
103
|
+
const muxVideo = document.querySelector('mux-player');
|
|
104
|
+
muxVideo.metadata = {
|
|
105
|
+
experiment_name: 'landing_page_v3',
|
|
106
|
+
video_content_type: 'clip',
|
|
107
|
+
video_series: 'season 1',
|
|
108
|
+
};
|
|
109
|
+
</script>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Take a look at the [metadata guide](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata) to view an exhaustive list of available values.
|
|
113
|
+
|
|
114
|
+
### Chromecast
|
|
115
|
+
|
|
116
|
+
Enable the [Google Cast](https://developers.google.com/cast) button in the controlbar by dropping in the `<script>` tag below in the `<head>` of your webpage.
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### prefer-mse
|
|
123
|
+
|
|
124
|
+
By default `<mux-player>` will try to use native playback via the underlying `<video/>` tag whenever possible. However, it can also instead use an in-code player when the browser browser supports [Media Source Extension](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API). This includes MSE in Mac OS Safari.
|
|
125
|
+
|
|
126
|
+
If you prefer to use the in-code MSE-based engine (currently hls.js) whenever possible, then pass in the `prefer-mse` attribute.
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<mux-player
|
|
130
|
+
playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
|
|
131
|
+
metadata-video-title="Big Buck Bunny"
|
|
132
|
+
metadata-viewer-user-id="user-id-1234"
|
|
133
|
+
prefer-mse
|
|
134
|
+
controls
|
|
135
|
+
>
|
|
136
|
+
</mux-player>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Attributes
|
|
140
|
+
|
|
141
|
+
| Attribute | Type | Description | Default |
|
|
142
|
+
| -------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
|
|
143
|
+
| `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
|
|
144
|
+
| `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` |
|
|
145
|
+
| `playback-token` | `string` | The playback token for signing the `src` URL. | N/A |
|
|
146
|
+
| `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A |
|
|
147
|
+
| `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A |
|
|
148
|
+
| `stream-type` | `"on-demand" \| "live" \| "ll-live"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` |
|
|
149
|
+
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
|
|
150
|
+
| `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A |
|
|
151
|
+
| `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A |
|
|
152
|
+
| `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A |
|
|
153
|
+
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
|
|
154
|
+
| `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
|
|
155
|
+
| `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` |
|
|
156
|
+
| `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` |
|
|
157
|
+
| `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
|
|
158
|
+
| `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` |
|
|
159
|
+
| `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` |
|
|
160
|
+
| `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A |
|
|
161
|
+
| `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A |
|
|
162
|
+
| `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
|
|
163
|
+
| `muted` | `boolean` | Toggles the muted state of the player. | Varies |
|
|
164
|
+
| `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false |
|
|
165
|
+
| `playback-rate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
|
|
166
|
+
| `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
|
|
167
|
+
| `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
|
|
168
|
+
| `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A |
|
|
169
|
+
|
|
170
|
+
### Methods
|
|
171
|
+
|
|
172
|
+
| Method | Description |
|
|
173
|
+
| --------- | ----------------------------- |
|
|
174
|
+
| `play()` | Begins playback of the media. |
|
|
175
|
+
| `pause()` | Pauses the media playback. |
|
|
176
|
+
|
|
177
|
+
### Properties
|
|
178
|
+
|
|
179
|
+
| Prop | Description | Default |
|
|
180
|
+
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
181
|
+
| `autoplay` | A `Boolean` that reflects the autoplay HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption. | `false` |
|
|
182
|
+
| `buffered` <sub><sup>Read only</sup></sub> | Returns a `TimeRanges` object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed. | `undefined` |
|
|
183
|
+
| `controls` | Is a Boolean that reflects the controls HTML attribute, indicating whether user interface items for controlling the resource should be displayed. | `false` |
|
|
184
|
+
| `crossOrigin` | A DOMString indicating the CORS setting for this media element. | `null` |
|
|
185
|
+
| `currentTime` | A double-precision floating-point value indicating the current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline. | `0` |
|
|
186
|
+
| `duration` <sub><sup>Read only</sup></sub> | A read-only double-precision floating-point value indicating the total duration of the media in seconds. If no media data is available, the returned value is `NaN`. If the media is of indefinite length (such as streamed live media, a WebRTC call's media, or similar), the value is `+Infinity`. | `NaN` |
|
|
187
|
+
| `ended` <sub><sup>Read only</sup></sub> | Returns a `Boolean` that indicates whether the media element has finished playing. | `false` |
|
|
188
|
+
| `loop` | A `Boolean` that reflects the loop HTML attribute, which indicates whether the media element should start over when it reaches the end. | `false` |
|
|
189
|
+
| `metadata` | The metadata property can be used to set the Mux Data metadata properties in an easy way. Take a look at the [metadata guide](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata) to view an exhaustive list of available values. | `{}` |
|
|
190
|
+
| `muted` | Is a `Boolean` that determines whether audio is muted. `true` if the audio is muted and `false` otherwise. | `false` |
|
|
191
|
+
| `paused` <sub><sup>Read only</sup></sub> | Returns a `Boolean` that indicates whether the media element is paused. | `true` |
|
|
192
|
+
| `playbackRate` | Is a double that indicates the rate at which the media is being played back. | `1` |
|
|
193
|
+
| `playsInline` | A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen. | `false` |
|
|
194
|
+
| `preload` | Is a `DOMString` that reflects the preload HTML attribute, indicating what data should be preloaded, if any. Possible values are: `none`, `metadata`, `auto`. | `undefined` |
|
|
195
|
+
| `src` | Is a `String` that reflects the src HTML attribute, which contains the URL of a media resource to use. | `undefined` |
|
|
196
|
+
| `startTime` | `Number` that specifies where in the media's timeline you want playback to start (in seconds). | `0` |
|
|
197
|
+
| `thumbnailTime` | `Number` offset (in seconds) for the poster image you want to show before loading media. If no `thumbnailTime` is specified, `startTime` will be used by default. NOTE: This feature currently cannot be used with `tokens.thumbnail`. | `0` |
|
|
198
|
+
| `tokens` | The tokens property accepts an object with the following signature `{ playback: string, thumbnail: string, storyboard: string }`. Use it to set all the signing URL tokens in one go. | `{}` |
|
|
199
|
+
| `videoHeight` <sub><sup>Read only</sup></sub> | Returns an unsigned integer value indicating the intrinsic height of the resource in CSS pixels, or 0 if no media is available yet. | `0` |
|
|
200
|
+
| `videoWidth` <sub><sup>Read only</sup></sub> | Returns an unsigned integer value indicating the intrinsic width of the resource in CSS pixels, or 0 if no media is available yet. | `0` |
|
|
201
|
+
| `volume` | Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest). | `1` |
|
|
202
|
+
|
|
203
|
+
### Events
|
|
204
|
+
|
|
205
|
+
`<mux-player>` has a number of events for media loading, playback, and the player itself. Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of `<mux-player>`.
|
|
206
|
+
|
|
207
|
+
| Event | Description |
|
|
208
|
+
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
209
|
+
| `abort` | Fired when the resource was not fully loaded, but not as the result of an error. |
|
|
210
|
+
| `canplay` | Fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. |
|
|
211
|
+
| `canplaythrough` | Fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. |
|
|
212
|
+
| `durationchange` | Fired when the duration property has been updated. |
|
|
213
|
+
| `emptied` | Fired when the media has become empty; for example, when the media has already been loaded (or partially loaded), and the HTMLMediaElement.load() method is called to reload it. |
|
|
214
|
+
| `ended` | Fired when playback stops when end of the media (`<audio>` or `<video>`) is reached or because no further data is available. |
|
|
215
|
+
| `error` | Fired when the resource could not be loaded due to an error. |
|
|
216
|
+
| `loadeddata` | Fired when the first frame of the media has finished loading. |
|
|
217
|
+
| `loadedmetadata` | Fired when the metadata has been loaded. |
|
|
218
|
+
| `loadstart` | Fired when the browser has started to load a resource. |
|
|
219
|
+
| `pause` | Fired when a request to pause play is handled and the activity has entered its paused state, most commonly occurring when the media's `HTMLMediaElement.pause()` method is called. |
|
|
220
|
+
| `play` | Fired when the paused property is changed from true to false, as a result of the `HTMLMediaElement.play()` method, or the `autoplay` attribute. |
|
|
221
|
+
| `playing` | Fired when playback is ready to start after having been paused or delayed due to lack of data. |
|
|
222
|
+
| `progress` | Fired periodically as the browser loads a resource. |
|
|
223
|
+
| `ratechange` | Fired when the playback rate has changed. |
|
|
224
|
+
| `resize` | Fired when one or both of the videoWidth and videoHeight properties have just been updated. |
|
|
225
|
+
| `seeked` | Fired when a seek operation complete. |
|
|
226
|
+
| `seeking` | Fired when a seek operation begin. |
|
|
227
|
+
| `stalled` | Fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. |
|
|
228
|
+
| `suspend` | Fired when the media data loading has been suspended. |
|
|
229
|
+
| `timeupdate` | Fired when the time indicated by the currentTime property has been updated. |
|
|
230
|
+
| `volumechange` | Fired when the volume has changed. |
|
|
231
|
+
| `waiting` | Fired when playback has stopped because of a temporary lack of data. |
|