New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@mux/mux-player-react
Advanced tools
@mux/mux-player-react - npm Package Compare versions
Comparing version 0.1.0-canary.15-3858f9c to 0.1.0-canary.16-391c61e
@@ -1,2 +0,2 @@ | ||
| var $=Object.create;var c=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var b=e=>c(e,"__esModule",{value:!0});var ee=(e,t)=>{b(e);for(var n in t)c(e,n,{get:t[n],enumerable:!0})},te=(e,t,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of Q(t))!B.call(e,a)&&a!=="default"&&c(e,a,{get:()=>t[a],enumerable:!(n=G(t,a))||n.enumerable});return e},u=e=>te(b(c(e!=null?$(X(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);ee(exports,{ControlListTokens:()=>f.ControlListTokens,MediaError:()=>f.MediaError,default:()=>Pe});var i=u(require("react")),f=u(require("@mux/mux-player"));var P={className:"class",classname:"class",htmlFor:"for",crossOrigin:"crossorigin",viewBox:"viewBox",playsInline:"playsinline",autoPlay:"autoplay"},ne=e=>e==null,re=(e,t)=>ne(t)?!1:e in t,ae=e=>e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),oe=(e,t)=>{if(!(typeof t=="boolean"&&!t)){if(re(e,P))return P[e];if(typeof t!=null)return/[A-Z]/.test(e)?ae(e):e}};var se=(e,t)=>typeof e=="boolean"?"":e,E=(e={})=>Object.entries(e).reduce((t,[n,a])=>{let o=oe(n,a);if(!o)return t;let s=se(a,n);return t[o]=s,t},{});var R=u(require("react"));var p=u(require("react")),T=(...e)=>{let t=(0,p.useRef)(null);return(0,p.useEffect)(()=>{e.forEach(n=>{!n||(typeof n=="function"?n(t.current):n.current=t.current)})},[e]),t};var v=u(require("react")),ie=Object.prototype.hasOwnProperty,le=(e,t)=>{if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(Array.isArray(e))return!Array.isArray(t)||e.length!==t.length?!1:e.some((o,s)=>t[s]===o);let n=Object.keys(e),a=Object.keys(t);if(n.length!==a.length)return!1;for(let o=0;o<n.length;o++)if(!ie.call(t,n[o])||!Object.is(e[n[o]],t[n[o]]))return!1;return!0},g=(e,t,n)=>!le(t,e[n]),ue=(e,t,n)=>{e[n]=t},ye=(e,t,n,a=ue,o=g)=>(0,v.useEffect)(()=>{let s=n==null?void 0:n.current;!s||!o(s,t,e)||a(s,t,e)},[n==null?void 0:n.current,t]),y=ye;var de=()=>{try{return"0.1.0-beta.26"}catch{}return"UNKNOWN"},ce=de(),x=()=>ce;var pe=i.default.forwardRef(({children:e,...t},n)=>i.default.createElement("mux-player",E({...t,ref:n}),e)),r=(e,t,n)=>(0,i.useEffect)(()=>{let a=t==null?void 0:t.current;if(!(!a||!n))return a.addEventListener(e,n),()=>{a.removeEventListener(e,n)}},[t==null?void 0:t.current,n]),fe=(e,t)=>{let{onAbort:n,onCanPlay:a,onCanPlayThrough:o,onEmptied:s,onLoadStart:m,onLoadedData:k,onLoadedMetadata:L,onProgress:O,onDurationChange:h,onVolumeChange:M,onRateChange:S,onResize:C,onWaiting:w,onPlay:A,onPlaying:V,onTimeUpdate:N,onPause:I,onSeeking:D,onSeeked:K,onStalled:j,onSuspend:U,onEnded:F,onError:H,onPlayerReady:z,metadata:W,tokens:Z,paused:_,playbackId:q,...J}=t;return y("metadata",W,e),y("tokens",Z,e),y("playbackId",q,e),y("paused",_,e,(l,d)=>{d!=null&&(d?l.pause():l.play())},(l,d,Y)=>l.hasAttribute("autoplay")&&!l.hasPlayed?!1:g(l,d,Y)),r("abort",e,n),r("canplay",e,a),r("canplaythrough",e,o),r("emptied",e,s),r("loadstart",e,m),r("loadeddata",e,k),r("loadedmetadata",e,L),r("progress",e,O),r("durationchange",e,h),r("volumechange",e,M),r("ratechange",e,S),r("resize",e,C),r("waiting",e,w),r("play",e,A),r("playing",e,V),r("timeupdate",e,N),r("pause",e,I),r("seeking",e,D),r("seeked",e,K),r("stalled",e,j),r("suspend",e,U),r("ended",e,F),r("error",e,H),r("playerready",e,z),[J]},me=x(),ge="mux-player-react",be=i.default.forwardRef((e,t)=>{let{forwardSeekOffset:n=10,backwardSeekOffset:a=10}=e,o=(0,R.useRef)(null),s=T(o,t),[m]=fe(o,e);return i.default.createElement(pe,{ref:s,playerSoftwareName:ge,playerSoftwareVersion:me,forwardSeekOffset:n,backwardSeekOffset:a,...m})}),Pe=be; | ||
| var G=Object.create;var c=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var b=e=>c(e,"__esModule",{value:!0});var te=(e,t)=>{b(e);for(var n in t)c(e,n,{get:t[n],enumerable:!0})},ne=(e,t,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of X(t))!ee.call(e,a)&&a!=="default"&&c(e,a,{get:()=>t[a],enumerable:!(n=Q(t,a))||n.enumerable});return e},y=e=>ne(b(c(e!=null?G(B(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);te(exports,{ControlListTokens:()=>m.ControlListTokens,MediaError:()=>m.MediaError,default:()=>Ee});var i=y(require("react")),m=y(require("@mux/mux-player"));var P={className:"class",classname:"class",htmlFor:"for",crossOrigin:"crossorigin",viewBox:"viewBox",playsInline:"playsinline",autoPlay:"autoplay"},re=e=>e==null,ae=(e,t)=>re(t)?!1:e in t,oe=e=>e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),se=(e,t)=>{if(!(typeof t=="boolean"&&!t)){if(ae(e,P))return P[e];if(typeof t!=null)return/[A-Z]/.test(e)?oe(e):e}};var ie=(e,t)=>typeof e=="boolean"?"":e,E=(e={})=>Object.entries(e).reduce((t,[n,a])=>{let o=se(n,a);if(!o)return t;let s=ie(a,n);return t[o]=s,t},{});var x=y(require("react"));var p=y(require("react")),T=(...e)=>{let t=(0,p.useRef)(null);return(0,p.useEffect)(()=>{e.forEach(n=>{!n||(typeof n=="function"?n(t.current):n.current=t.current)})},[e]),t};var R=y(require("react")),le=Object.prototype.hasOwnProperty,ue=(e,t)=>{if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(Array.isArray(e))return!Array.isArray(t)||e.length!==t.length?!1:e.some((o,s)=>t[s]===o);let n=Object.keys(e),a=Object.keys(t);if(n.length!==a.length)return!1;for(let o=0;o<n.length;o++)if(!le.call(t,n[o])||!Object.is(e[n[o]],t[n[o]]))return!1;return!0},g=(e,t,n)=>!ue(t,e[n]),ye=(e,t,n)=>{e[n]=t},de=(e,t,n,a=ye,o=g)=>(0,R.useEffect)(()=>{let s=n==null?void 0:n.current;!s||!o(s,t,e)||a(s,t,e)},[n==null?void 0:n.current,t]),u=de;var ce=()=>{try{return"0.1.0-beta.26"}catch{}return"UNKNOWN"},pe=ce(),v=()=>pe;var me=i.default.forwardRef(({children:e,...t},n)=>i.default.createElement("mux-player",E({...t,ref:n}),e)),r=(e,t,n)=>(0,i.useEffect)(()=>{let a=t==null?void 0:t.current;if(!(!a||!n))return a.addEventListener(e,n),()=>{a.removeEventListener(e,n)}},[t==null?void 0:t.current,n]),fe=(e,t)=>{let{onAbort:n,onCanPlay:a,onCanPlayThrough:o,onEmptied:s,onLoadStart:f,onLoadedData:k,onLoadedMetadata:L,onProgress:h,onDurationChange:O,onVolumeChange:M,onRateChange:S,onResize:C,onWaiting:w,onPlay:A,onPlaying:V,onTimeUpdate:N,onPause:I,onSeeking:D,onSeeked:K,onStalled:j,onSuspend:U,onEnded:F,onError:H,onPlayerReady:z,metadata:W,tokens:Z,paused:_,playbackId:q,playbackRates:J,...Y}=t;return u("playbackRates",J,e),u("metadata",W,e),u("tokens",Z,e),u("playbackId",q,e),u("paused",_,e,(l,d)=>{d!=null&&(d?l.pause():l.play())},(l,d,$)=>l.hasAttribute("autoplay")&&!l.hasPlayed?!1:g(l,d,$)),r("abort",e,n),r("canplay",e,a),r("canplaythrough",e,o),r("emptied",e,s),r("loadstart",e,f),r("loadeddata",e,k),r("loadedmetadata",e,L),r("progress",e,h),r("durationchange",e,O),r("volumechange",e,M),r("ratechange",e,S),r("resize",e,C),r("waiting",e,w),r("play",e,A),r("playing",e,V),r("timeupdate",e,N),r("pause",e,I),r("seeking",e,D),r("seeked",e,K),r("stalled",e,j),r("suspend",e,U),r("ended",e,F),r("error",e,H),r("playerready",e,z),[Y]},ge=v(),be="mux-player-react",Pe=i.default.forwardRef((e,t)=>{let{forwardSeekOffset:n=10,backwardSeekOffset:a=10}=e,o=(0,x.useRef)(null),s=T(o,t),[f]=fe(o,e);return i.default.createElement(me,{ref:s,playerSoftwareName:be,playerSoftwareVersion:ge,forwardSeekOffset:n,backwardSeekOffset:a,...f})}),Ee=Pe; | ||
| //# sourceMappingURL=index.js.map |
@@ -54,2 +54,4 @@ import React from 'react'; | ||
| tertiaryColor?: string; | ||
| playbackRates?: number[]; | ||
| defaultShowRemainingTime?: boolean; | ||
| thumbnailTime?: number; | ||
@@ -56,0 +58,0 @@ tokens?: Tokens; |
@@ -54,2 +54,4 @@ import React from 'react'; | ||
| tertiaryColor?: string; | ||
| playbackRates?: number[]; | ||
| defaultShowRemainingTime?: boolean; | ||
| thumbnailTime?: number; | ||
@@ -56,0 +58,0 @@ tokens?: Tokens; |
| { | ||
| "name": "@mux/mux-player-react", | ||
| "version": "0.1.0-canary.15-3858f9c", | ||
| "version": "0.1.0-canary.16-391c61e", | ||
| "description": "An open source Mux player for React that Just Works™", | ||
@@ -47,10 +47,9 @@ "main": "dist/index.js", | ||
| "dependencies": { | ||
| "@mux/mux-audio": "0.6.3-canary.15-3858f9c", | ||
| "@mux/mux-audio-react": "0.4.2-canary.16-3858f9c", | ||
| "@mux/mux-elements-codemod": "1.1.2-canary.16-3858f9c", | ||
| "@mux/mux-player": "0.1.0-canary.15-3858f9c", | ||
| "@mux/mux-uploader-react": "0.1.0-canary.15-3858f9c", | ||
| "@mux/mux-video": "0.8.5-canary.12-3858f9c", | ||
| "@mux/mux-video-react": "0.5.2-canary.16-3858f9c", | ||
| "@mux/playback-core": "0.9.1-canary.16-3858f9c", | ||
| "@mux/mux-audio-react": "0.4.2-canary.17-391c61e", | ||
| "@mux/mux-elements-codemod": "1.1.2-canary.17-391c61e", | ||
| "@mux/mux-player": "0.1.0-canary.16-391c61e", | ||
| "@mux/mux-uploader-react": "0.1.0-canary.16-391c61e", | ||
| "@mux/mux-video": "0.8.5-canary.13-391c61e", | ||
| "@mux/mux-video-react": "0.5.2-canary.17-391c61e", | ||
| "@mux/playback-core": "0.9.1-canary.17-391c61e", | ||
| "prop-types": "^15.7.2" | ||
@@ -57,0 +56,0 @@ }, |
111
README.md
@@ -106,2 +106,50 @@ <p align="center"> | ||
| ### CSS Parts | ||
| Mux Player uses a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) | ||
| to encapsulate its styles and behaviors. | ||
| As a result, it's not possible to target its internals with the usual CSS selectors. | ||
| Instead, some components expose **parts** that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) | ||
| , or `::part()`. | ||
| ```html | ||
| <!-- Global style in HTML or added using preferred React styles convention/library --> | ||
| <style> | ||
| mux-player::part(center play button) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| ``` | ||
| ```jsx | ||
| <MuxPlayer playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"></MuxPlayer> | ||
| ``` | ||
| Supported **parts**: | ||
| `seek-live`, `layer`, `media-layer`, `poster-layer`, `vertical-layer`, `centered-layer`, | ||
| `top`, `center`, `bottom`, `play`, `button`, `seek-backward`, `seek-forward`, `mute`, | ||
| `captions`, `airplay`, `pip`, `cast`, `fullscreen`, `playbackrate`, `volume`, `range`, `time`, `display` | ||
| CSS parts allow you to style each part individually with a selector like `::part(center play button)` | ||
| or target multiple elements if the part is assigned to multiple elements internally, usage `::part(button)`. | ||
| Every CSS property can be declared in the selector, this makes it a very powerfull API. | ||
| If you need a simple API to hide a few single control elements have a look at the [`controlslist`](#controlslist) attribute. | ||
| ### controlslist | ||
| Offers a way to hide the controls elements/buttons that are being shown by the player. | ||
| The `controlslist` attribute accepts a blocklist as a space separated string. | ||
| Supported **tokens**: | ||
| `notop`, `nobottom`, `nocenter`, `nocenterplay`, `nocenterseekbackward`, `nocenterseekforward`, `noplay`, | ||
| `noseekbackward`, `noseekforward`, `nomute`, `nocaptions`, `noairplay`, `nopip`, `nocast`, `nofullscreen`, | ||
| `noplaybackrate`, `novolumerange`, `notimerange`, `notimedisplay`, `noremoteplayback`, `noseeklive`, `noduration` | ||
| ```jsx | ||
| <MuxPlayer | ||
| playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe" | ||
| controlslist="nocenter nocaptions noremoteplayback" | ||
| ></MuxPlayer> | ||
| ``` | ||
| ### Tokens | ||
@@ -149,32 +197,35 @@ | ||
| | Prop | Type | Description | Default | | ||
| | ------------------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | ||
| | `playbackId` | `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 | | ||
| | `envKey` | `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` | | ||
| | `streamType` | `"on-demand" \| "live" \| "ll-live" \|"live:dvr" \| "ll-live:dvr"` | 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"` | | ||
| | `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` | | ||
| | `metadata` | `object`\* | An object for configuring any metadata you'd like to send to Mux Data. For more, see the [Metadata section](#metadata), below. | N/A | | ||
| | `tokens` | `object`\* | An object for configuring any tokens for your assets if you're using [Signed URLs](https://docs.mux.com/guides/video/secure-video-playback). For more, see the [Tokens section](#tokens), below. | N/A | | ||
| | `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` | | ||
| | `startTime` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` | | ||
| | `thumbnailTime` | `number` (seconds) | Offset 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` | | ||
| | `preferMse` | `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 [`preferMse`](#preferMse) | `false` | | ||
| | `defaultHiddenCaptions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` | | ||
| | `forwardSeekOffset` | `number` (seconds) | Offset applied to the forward seek button | `10` | | ||
| | `backwardSeekOffset` | `number` (seconds) | Offset applied to the backward seek button | `10` | | ||
| | `primaryColor` | (Any valid CSS color style) | The primary color used by the player | N/A | | ||
| | `secondaryColor` | (Any valid CSS color style) | The secondary color used by the player | N/A | | ||
| | `currentTime` | `number` (seconds) | Sets the current time of the media | N/A | | ||
| | `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies | | ||
| | `muted` | `boolean` | Toggles the muted state of the player. | Varies | | ||
| | `paused` | `boolean` | Toggles the paused state of the player | N/A | | ||
| | `autoPlay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | N/A | | ||
| | `playbackRate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` | | ||
| | `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` | | ||
| | `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player. | `false` | | ||
| | `playsInline` | `boolean` | Set to assert that media should be played inline. Useful for mobile playback cases. | `false` | | ||
| | `crossOrigin` | `string` | Establishes various CORS policies. For more details, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin) | N/A | | ||
| | `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived | | ||
| | `beaconCollectionDomain` | `string` (Domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A | | ||
| | `customDomain` | `string` (Domain name) | Assigns a custom domain to be used for Mux Video. Will use the standard `mux.com` domain with your playback-id for poster, video, and thumbnail URLs by default. | N/A | | ||
| | Prop | Type | Description | Default | | ||
| | -------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | ||
| | `playbackId` | `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 | | ||
| | `envKey` | `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` | | ||
| | `streamType` | `"on-demand" \| "live" \| "ll-live" \|"live:dvr" \| "ll-live:dvr"` | 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"` | | ||
| | `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` | | ||
| | `metadata` | `object`\* | An object for configuring any metadata you'd like to send to Mux Data. For more, see the [Metadata section](#metadata), below. | N/A | | ||
| | `tokens` | `object`\* | An object for configuring any tokens for your assets if you're using [Signed URLs](https://docs.mux.com/guides/video/secure-video-playback). For more, see the [Tokens section](#tokens), below. | N/A | | ||
| | `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` | | ||
| | `startTime` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` | | ||
| | `thumbnailTime` | `number` (seconds) | Offset 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` | | ||
| | `preferMse` | `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 [`preferMse`](#preferMse) | `false` | | ||
| | `defaultHiddenCaptions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` | | ||
| | `defaultShowRemainingTime` | `boolean` | Show remaining playback time (instead of current playback time) by default | `false` | | ||
| | `forwardSeekOffset` | `number` (seconds) | Offset applied to the forward seek button | `10` | | ||
| | `backwardSeekOffset` | `number` (seconds) | Offset applied to the backward seek button | `10` | | ||
| | `primaryColor` | (Any valid CSS color style) | The primary color used by the player | N/A | | ||
| | `secondaryColor` | (Any valid CSS color style) | The secondary color used by the player | N/A | | ||
| | `currentTime` | `number` (seconds) | Sets the current time of the media | N/A | | ||
| | `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies | | ||
| | `muted` | `boolean` | Toggles the muted state of the player. | Varies | | ||
| | `paused` | `boolean` | Toggles the paused state of the player | N/A | | ||
| | `autoPlay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | N/A | | ||
| | `playbackRate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` | | ||
| | `playbackRates` | `number[]` | The array of numbers that will be used by the playback rate button while toggling through rates. | `1` | | ||
| | `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` | | ||
| | `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player. | `false` | | ||
| | `playsInline` | `boolean` | Set to assert that media should be played inline. Useful for mobile playback cases. | `false` | | ||
| | `crossOrigin` | `string` | Establishes various CORS policies. For more details, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin) | N/A | | ||
| | `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived | | ||
| | `beaconCollectionDomain` | `string` (Domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A | | ||
| | `customDomain` | `string` (Domain name) | Assigns a custom domain to be used for Mux Video. Will use the standard `mux.com` domain with your playback-id for poster, video, and thumbnail URLs by default. | N/A | | ||
| | `controlslist` | `string` | Offers a way to hide the controls elements/buttons that are being shown by the player. For more, see the section on [`controlslist`](#controlslist) | N/A | | ||
@@ -181,0 +232,0 @@ ### Callbacks |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by6.24%
67645
- Dependency count
- decreased by-8.33%
11
- Lines of code
- increased by1.72%
236
- Number of lines in readme file
- increased by28.02%
233
Dependency changes
+ Added@mux/mux-audio-react@0.4.2-canary.17-391c61e(transitive)
+ Added@mux/mux-elements-codemod@1.1.2-canary.17-391c61e(transitive)
+ Added@mux/mux-player@0.1.0-canary.16-391c61e(transitive)
+ Added@mux/mux-uploader@0.1.0-canary.16-391c61e(transitive)
+ Added@mux/mux-uploader-react@0.1.0-canary.16-391c61e(transitive)
+ Added@mux/mux-video@0.8.5-canary.13-391c61e(transitive)
+ Added@mux/mux-video-react@0.5.2-canary.17-391c61e(transitive)
+ Added@mux/playback-core@0.9.1-canary.17-391c61e(transitive)
- Removed@mux/mux-audio@0.6.3-canary.15-3858f9c(transitive)
- Removed@mux/mux-audio-react@0.4.2-canary.16-3858f9c(transitive)
- Removed@mux/mux-elements-codemod@1.1.2-canary.16-3858f9c(transitive)
- Removed@mux/mux-player@0.1.0-canary.15-3858f9c(transitive)
- Removed@mux/mux-uploader@0.1.0-canary.15-3858f9c(transitive)
- Removed@mux/mux-uploader-react@0.1.0-canary.15-3858f9c(transitive)
- Removed@mux/mux-video@0.8.5-canary.12-3858f9c(transitive)
- Removed@mux/mux-video-react@0.5.2-canary.16-3858f9c(transitive)
- Removed@mux/playback-core@0.9.1-canary.16-3858f9c(transitive)