Skip to content

Commit a43edd5

Browse files
ignasio-muxignasio-mux
authored
feat: add max-auto-resolution attribute for automatic resolution capping (muxinc#1243)
This PR closes muxinc#182 Introduces a new `max-auto-resolution` attribute to mux-player and mux-video that enables automatic resolution capping based on total pixels to match Mux Video pricing tiers. This attribute provides developers with control over the default resolution selection during playback initialization, ensuring video quality stays within specified limits to prevent unexpected costs.
1 parent 126eefa commit a43edd5

File tree

13 files changed

+165
-2
lines changed

13 files changed

+165
-2
lines changed

‎examples/nextjs-with-typescript/pages/MuxPlayer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,7 @@ function MuxPlayerPage({ location }: Props) {
281281
// startLevel: 2,
282282
// debug: true,
283283
// }}
284+
maxAutoResolution="720p"
284285
title={state.title}
285286
videoTitle={state.videoTitle}
286287
startTime={state.startTime}

‎examples/nextjs-with-typescript/pages/mux-player.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ function MuxPlayerWCPage() {
3030
playback-id={playbackId}
3131
forward-seek-offset={10}
3232
backward-seek-offset={10}
33+
max-auto-resolution="720p"
3334
// onPlayerReady={() => console.log("ready!")}
3435
{...debugObj}
3536
{...mutedObj}

‎packages/mux-player-react/REFERENCE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
| `preferPlayback` | `"mse" \| "native"` | Specify if Mux Player should try to use Media Source Extension or native playback (if available). If no value is provided, Mux Player will choose based on what's deemed optimal for content and playback environment. | Varies |
4646
| `maxResolution` | `"720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the maximum resolution you want delivered for this video. | N/A |
4747
| `minResolution` | `"480p" \| "540p" \| "720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the minimum resolution you want delivered for this video. | N/A |
48+
| `maxAutoResolution` | `string` (`"720p"`, `"1080p"`, `"1440p"`, or `"2160p"`) | Cap the default resolution selection based on total pixels (width × height) to match Mux Video pricing tiers. Values align with [Mux Video resolution-based pricing](https://www.mux.com/docs/pricing/video#resolution-based-pricing). If there's an exact match, it will be used. Otherwise, selects the highest quality rendition that doesn't exceed the cap. Only accepts: `"720p"`, `"1080p"`, `"1440p"`, or `"2160p"`. Other values are ignored. | N/A |
4849
| `renditionOrder` | `"desc"` | Change the order in which renditions are provided in the src playlist. Can impact initial segment loads. Currently only support `"desc"` for descending order | N/A |
4950
| `programStartTime` | `number` | Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the beginning of the media stream. | N/A |
5051
| `programEndTime` | `number` | Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the end of the media stream. | N/A |

‎packages/mux-player-react/src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type {
66
MaxResolutionValue,
77
MinResolutionValue,
88
RenditionOrderValue,
9+
MaxAutoResolutionValue,
910
} from '@mux/playback-core';
1011
import type MuxPlayerElement from '@mux/mux-player';
1112
import type { Tokens, EventMap as MuxPlayerElementEventMap } from '@mux/mux-player';
@@ -88,6 +89,7 @@ export type MuxPlayerProps = {
8889
backwardSeekOffset?: number;
8990
maxResolution?: MaxResolutionValue;
9091
minResolution?: MinResolutionValue;
92+
maxAutoResolution?: MaxAutoResolutionValue;
9193
renditionOrder?: RenditionOrderValue;
9294
programStartTime?: number;
9395
programEndTime?: number;

‎packages/mux-player/REFERENCE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
| `prefer-playback` | `"mse" \| "native"` | Specify if Mux Player should try to use Media Source Extension or native playback (if available). If no value is provided, Mux Player will choose based on what's deemed optimal for content and playback environment. | Varies |
2121
| `max-resolution` | `"720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the maximum resolution you want delivered for this video. | N/A |
2222
| `min-resolution` | `"480p" \| "540p" \| "720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the minimum resolution you want delivered for this video. | N/A |
23+
| `max-auto-resolution` | `string` (`"720p"`, `"1080p"`, `"1440p"`, or `"2160p"`) | Cap the default resolution selection based on total pixels (width × height) to match Mux Video pricing tiers. Values align with [Mux Video resolution-based pricing](https://www.mux.com/docs/pricing/video#resolution-based-pricing). If there's an exact match, it will be used. Otherwise, selects the highest quality rendition that doesn't exceed the cap. Only accepts: `"720p"`, `"1080p"`, `"1440p"`, or `"2160p"`. Other values are ignored. | N/A |
2324
| `rendition-order` | `"desc"` | Change the order in which renditions are provided in the src playlist. Can impact initial segment loads. Currently only support `"desc"` for descending order | N/A |
2425
| `program-start-time` | `number` | Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the beginning of the media stream. | N/A |
2526
| `program-end-time` | `number` | Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the end of the media stream. | N/A |

‎packages/mux-player/src/base.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import type {
2424
MaxResolutionValue,
2525
MinResolutionValue,
2626
RenditionOrderValue,
27+
MaxAutoResolutionValue,
2728
Chapter,
2829
CuePoint,
2930
Tokens,
@@ -153,6 +154,7 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
153154
beaconCollectionDomain: el.beaconCollectionDomain,
154155
maxResolution: el.maxResolution,
155156
minResolution: el.minResolution,
157+
maxAutoResolution: el.maxAutoResolution,
156158
programStartTime: el.programStartTime,
157159
programEndTime: el.programEndTime,
158160
assetStartTime: el.assetStartTime,
@@ -1347,6 +1349,18 @@ class MuxPlayerElement extends VideoApiElement implements IMuxPlayerElement {
13471349
}
13481350
}
13491351

1352+
get maxAutoResolution() {
1353+
return (this.getAttribute(MuxVideoAttributes.MAX_AUTO_RESOLUTION) as MaxAutoResolutionValue) ?? undefined;
1354+
}
1355+
1356+
set maxAutoResolution(val: MaxAutoResolutionValue | undefined) {
1357+
if (val == undefined) {
1358+
this.removeAttribute(MuxVideoAttributes.MAX_AUTO_RESOLUTION);
1359+
} else {
1360+
this.setAttribute(MuxVideoAttributes.MAX_AUTO_RESOLUTION, val);
1361+
}
1362+
}
1363+
13501364
get renditionOrder() {
13511365
return (this.getAttribute(MuxVideoAttributes.RENDITION_ORDER) as RenditionOrderValue) ?? undefined;
13521366
}

‎packages/mux-player/src/template.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ export const content = (props: MuxTemplateProps) => html`
140140
drm-token="${props.tokens?.drm ?? false}"
141141
exportparts="video"
142142
disable-pseudo-ended="${props.disablePseudoEnded ?? false}"
143+
max-auto-resolution="${props.maxAutoResolution ?? false}"
143144
>
144145
${props.storyboard
145146
? html`<track label="thumbnails" default kind="metadata" src="${props.storyboard}" />`

‎packages/mux-player/src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
MaxResolutionValue,
66
MinResolutionValue,
77
RenditionOrderValue,
8+
MaxAutoResolutionValue,
89
StreamTypes,
910
ValueOf,
1011
} from '@mux/playback-core';
@@ -45,6 +46,7 @@ export type MuxTemplateProps = Partial<MuxPlayerProps> & {
4546
inLiveWindow: boolean;
4647
maxResolution?: MaxResolutionValue;
4748
minResolution?: MinResolutionValue;
49+
maxAutoResolution?: MaxAutoResolutionValue;
4850
renditionOrder?: RenditionOrderValue;
4951
extraSourceParams?: Record<string, any>;
5052
tokens: {

‎packages/mux-video/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ Now you are free to use this web component in your HTML, just as you would with
8787

8888
- `max-resolution`: This can be used to cap or expand the maximum resolution of the video delivered. When using signed URLs this attribute will not work and instead you will need to include the `max_resolution` parameter in your signed token.
8989
- `min-resolution`: This can be used to to cap or expand the minimum resolution of the video delivered. When using signed URLs this attribute will not work and instead you will need to include the `min_resolution` parameter in your signed token.
90+
- `max-auto-resolution`: Cap the default resolution selection based on total pixels (width × height) to match Mux Video pricing tiers. Values align with [Mux Video resolution-based pricing](https://www.mux.com/docs/pricing/video#resolution-based-pricing). Accepts: `"720p"`, `"1080p"`, `"1440p"`, or `"2160p"`. If there's an exact match, it will be used. Otherwise, selects the highest quality rendition that doesn't exceed the cap. Other values are ignored.
9091
- `rendition-order`: Set to `"desc"` to make the renditions of the video delivered be sorted in descending resolution order, which can impact the initial resolution loaded. When using signed URLs this attribute will not work and instead you will need to include the `rendition_order` parameter in your signed token.
9192
- `program-start-time`: Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the beginning of the media stream.
9293
- `program-end-time`: Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the end of the media stream.

‎packages/mux-video/src/base.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import type {
3737
MaxResolutionValue,
3838
MinResolutionValue,
3939
RenditionOrderValue,
40+
MaxAutoResolutionValue,
4041
Chapter,
4142
CuePoint,
4243
Tokens,
@@ -62,6 +63,7 @@ export const Attributes = {
6263
ENV_KEY: 'env-key',
6364
MAX_RESOLUTION: 'max-resolution',
6465
MIN_RESOLUTION: 'min-resolution',
66+
MAX_AUTO_RESOLUTION: 'max-auto-resolution',
6567
RENDITION_ORDER: 'rendition-order',
6668
PROGRAM_START_TIME: 'program-start-time',
6769
PROGRAM_END_TIME: 'program-end-time',
@@ -413,6 +415,18 @@ export class MuxVideoBaseElement extends CustomVideoElement implements IMuxVideo
413415
}
414416
}
415417

418+
get maxAutoResolution() {
419+
return (this.getAttribute(Attributes.MAX_AUTO_RESOLUTION) as MaxAutoResolutionValue) ?? undefined;
420+
}
421+
422+
set maxAutoResolution(val: MaxAutoResolutionValue | undefined) {
423+
if (val == undefined) {
424+
this.removeAttribute(Attributes.MAX_AUTO_RESOLUTION);
425+
} else {
426+
this.setAttribute(Attributes.MAX_AUTO_RESOLUTION, val);
427+
}
428+
}
429+
416430
get renditionOrder() {
417431
return (this.getAttribute(Attributes.RENDITION_ORDER) as RenditionOrderValue) ?? undefined;
418432
}

0 commit comments

Comments
 (0)