videojs · cjpillsbury · Nov 4, 2025 · Nov 4, 2025
diff --git a/examples/html-demo/src/main.ts b/examples/html-demo/src/main.ts
@@ -3,18 +3,18 @@ import '@videojs/html/skins/minimal';
 
 document.body.innerHTML = /* html */ `
   <div style="display: flex; flex-direction: column; justify-content: center; min-height: 100vh; gap: 2rem; padding: 1rem; ">
-    <media-provider>
+    <video-provider>
       <media-skin-frosted style="border-radius: 2rem; width: 100%; max-width: 960px; margin: 2rem auto; aspect-ratio: 16/9">
-        <video 
+        <video
           slot="media"
           src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
           poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
           playsinline
         ></video>
       </media-skin-frosted>
-    </media-provider>
+    </video-provider>
 
-    <media-provider>
+    <video-provider>
       <media-skin-minimal style="border-radius: 0.75rem; width: 100%; max-width: 960px; margin: 2rem auto; aspect-ratio: 16/9">
         <video
           slot="media"
@@ -23,6 +23,6 @@ document.body.innerHTML = /* html */ `
           playsinline
         ></video>
       </media-skin-minimal>
-    </media-provider>
+    </video-provider>
   </div>
 `;
diff --git a/examples/html-eject-frosted/src/main.ts b/examples/html-eject-frosted/src/main.ts
@@ -1,7 +1,7 @@
 import './frosted.css';
 import '@videojs/html/icons';
-// be sure to import media-provider first
-import '@videojs/html/define/media-provider';
+// be sure to import video-provider first
+import '@videojs/html/define/video-provider';
 import '@videojs/html/define/media-container';
 import '@videojs/html/define/media-play-button';
 import '@videojs/html/define/media-mute-button';

diff --git a/examples/html-eject-minimal/index.html b/examples/html-eject-minimal/index.html
@@ -29,7 +29,7 @@
         padding: 1rem;
       "
     >
-      <media-provider style="display: block">
+      <video-provider style="display: block">
         <media-container
           style="
             display: block;
@@ -143,7 +143,7 @@
             </div>
           </div>
         </media-container>
-      </media-provider>
+      </video-provider>
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/examples/html-eject-minimal/src/main.ts b/examples/html-eject-minimal/src/main.ts
@@ -1,7 +1,7 @@
 import './minimal.css';
 import '@videojs/html/icons';
-// be sure to import media-provider first
-import '@videojs/html/define/media-provider';
+// be sure to import video-provider first
+import '@videojs/html/define/video-provider';
 import '@videojs/html/define/media-container';
 import '@videojs/html/define/media-play-button';
 import '@videojs/html/define/media-mute-button';

diff --git a/examples/next-demo/app/page.tsx b/examples/next-demo/app/page.tsx
@@ -1,24 +1,24 @@
-import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react';
+import { FrostedSkin, MinimalSkin, Video, VideoProvider } from '@videojs/react';
 import '@videojs/react/skins/frosted.css';
 import '@videojs/react/skins/minimal.css';
 
 export default function Home() {
   return (
     <main className="p-4">
       <h1 className="text-4xl font-extrabold py-2">Frosted Skin</h1>
-      <MediaProvider>
+      <VideoProvider>
         <FrostedSkin>
           {/* @ts-expect-error -- types are incorrect */}
           <Video src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" playsInline />
         </FrostedSkin>
-      </MediaProvider>
+      </VideoProvider>
       <h1 className="text-4xl font-extrabold py-2">Minimal Skin</h1>
-      <MediaProvider>
+      <VideoProvider>
         <MinimalSkin>
           {/* @ts-expect-error -- types are incorrect */}
           <Video src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" playsInline />
         </MinimalSkin>
-      </MediaProvider>
+      </VideoProvider>
     </main>
   );
 }
diff --git a/examples/react-demo/src/App.tsx b/examples/react-demo/src/App.tsx
@@ -1,14 +1,14 @@
 import type { ChangeEventHandler } from 'react';
 
-import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react';
+import { FrostedSkin, MinimalSkin, Video, VideoProvider } from '@videojs/react';
 import { FullscreenEnterAltIcon, FullscreenExitAltIcon } from '@videojs/react/icons';
 import clsx from 'clsx';
 
 // import FrostedSkin from './skins/frosted/FrostedSkin';
 // import MinimalSkin from './skins/toasted/MinimalSkin';
 
 // NOTE: Commented out imports are for testing locally/externally defined skins.
-// import { MediaProvider, Video } from '@videojs/react';
+// import { VideoProvider, Video } from '@videojs/react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useFullscreen } from './hooks/useFullscreen';
 import '@videojs/react/skins/frosted.css';
@@ -182,12 +182,12 @@ export default function App(): JSX.Element {
       )}
       >
         <div className="w-full max-w-5xl mx-auto p-6">
-          <MediaProvider key={key}>
+          <VideoProvider key={key}>
             <Skin className={skinClassName}>
               {/* @ts-expect-error -- types are incorrect */}
               <Video src={mediaSource} poster={poster} playsInline />
             </Skin>
-          </MediaProvider>
+          </VideoProvider>
         </div>
       </main>
     </div>

diff --git a/examples/react-eject-frosted/src/main.tsx b/examples/react-eject-frosted/src/main.tsx
@@ -1,12 +1,12 @@
-import { MediaProvider, Video } from '@videojs/react';
+import { Video, VideoProvider } from '@videojs/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import FrostedSkin from './FrostedSkin';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <MediaProvider>
+    <VideoProvider>
       <FrostedSkin>
         <Video
           // @ts-expect-error -- types are incorrect
@@ -15,6 +15,6 @@ createRoot(document.getElementById('root')!).render(
           playsInline
         />
       </FrostedSkin>
-    </MediaProvider>
+    </VideoProvider>
   </StrictMode>,
 );
diff --git a/examples/react-eject-minimal/src/main.tsx b/examples/react-eject-minimal/src/main.tsx
@@ -1,12 +1,12 @@
-import { MediaProvider, Video } from '@videojs/react';
+import { Video, VideoProvider } from '@videojs/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import MinimalSkin from './MinimalSkin';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <MediaProvider>
+    <VideoProvider>
       <MinimalSkin>
         <Video
           // @ts-expect-error -- types are incorrect
@@ -15,6 +15,6 @@ createRoot(document.getElementById('root')!).render(
           playsInline
         />
       </MinimalSkin>
-    </MediaProvider>
+    </VideoProvider>
   </StrictMode>,
 );
diff --git a/packages/html/src/define/index.ts b/packages/html/src/define/index.ts
@@ -1,5 +1,5 @@
 import './media-container';
-import './media-provider';
+import './video-provider';
 import './media-play-button';
 import './media-mute-button';
 import './media-volume-slider';

diff --git a/packages/html/src/define/media-provider.ts b/packages/html/src/define/media-provider.ts
diff --git a/packages/html/src/define/video-provider.ts b/packages/html/src/define/video-provider.ts
@@ -0,0 +1,4 @@
+import { VideoProviderElement } from '@/media/video-provider';
+import { defineCustomElement } from '@/utils/custom-element';
+
+defineCustomElement('video-provider', VideoProviderElement);
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
@@ -9,5 +9,5 @@ export { TimeSliderElement } from './elements/time-slider';
 export { TooltipElement } from './elements/tooltip';
 export { VolumeSliderElement } from './elements/volume-slider';
 export { MediaContainerElement } from './media/media-container';
-export { MediaProviderElement } from './media/media-provider';
 export { MediaSkinElement } from './media/media-skin';
+export { VideoProviderElement } from './media/video-provider';
diff --git a/packages/html/src/media/media-provider.ts → packages/html/src/media/video-provider.ts b/packages/html/src/media/media-provider.ts → packages/html/src/media/video-provider.ts
@@ -6,7 +6,7 @@ import { createMediaStore } from '@videojs/core/store';
 
 const ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);
 
-export class MediaProviderElement extends ProviderHTMLElement {
+export class VideoProviderElement extends ProviderHTMLElement {
   contexts = {
     mediaStore: (): MediaStore => {
       return createMediaStore();

diff --git a/packages/html/src/skins/frosted/index.ts b/packages/html/src/skins/frosted/index.ts
@@ -2,7 +2,7 @@ import { MediaSkinElement } from '@/media/media-skin';
 import { defineCustomElement } from '@/utils/custom-element';
 import styles from './styles.css';
 import '@/define/media-container';
-import '@/define/media-provider';
+import '@/define/video-provider';
 import '@/define/media-play-button';
 import '@/define/media-mute-button';
 import '@/define/media-volume-slider';
@@ -56,7 +56,7 @@ export function getTemplateHTML() {
             </media-time-slider-track>
             <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
           </media-time-slider>
-          <media-tooltip 
+          <media-tooltip
             id="time-slider-tooltip"
             class="surface popup-animation"
             popover="manual"
@@ -76,9 +76,9 @@ export function getTemplateHTML() {
           <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
           <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
         </media-mute-button>
-        <media-popover 
-          id="volume-slider-popover" 
-          class="surface popup-animation" 
+        <media-popover
+          id="volume-slider-popover"
+          class="surface popup-animation"
           popover="manual"
           open-on-hover
           delay="200"
@@ -99,7 +99,7 @@ export function getTemplateHTML() {
           <media-fullscreen-enter-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
           <media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
         </media-fullscreen-button>
-        <media-tooltip 
+        <media-tooltip
           id="fullscreen-tooltip"
           class="surface popup-animation"
           popover="manual"

diff --git a/packages/html/src/skins/minimal/index.ts b/packages/html/src/skins/minimal/index.ts
@@ -2,7 +2,7 @@ import { MediaSkinElement } from '@/media/media-skin';
 import { defineCustomElement } from '@/utils/custom-element';
 import styles from './styles.css';
 import '@/define/media-container';
-import '@/define/media-provider';
+import '@/define/video-provider';
 import '@/define/media-play-button';
 import '@/define/media-mute-button';
 import '@/define/media-volume-slider';
@@ -63,7 +63,7 @@ export function getTemplateHTML() {
           </media-time-slider-track>
           <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
         </media-time-slider>
-        <media-tooltip 
+        <media-tooltip
           id="time-slider-tooltip"
           class="popup-animation"
           popover="manual"
@@ -81,8 +81,8 @@ export function getTemplateHTML() {
             <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
             <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
           </media-mute-button>
-          <media-popover 
-            id="volume-slider-popover" 
+          <media-popover
+            id="volume-slider-popover"
             class="popup-animation"
             popover="manual"
             open-on-hover
@@ -104,8 +104,8 @@ export function getTemplateHTML() {
             <media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
             <media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
           </media-fullscreen-button>
-          <media-tooltip 
-            id="fullscreen-tooltip" 
+          <media-tooltip
+            id="fullscreen-tooltip"
             class="popup-animation"
             popover="manual"
             delay="500"

diff --git a/packages/react/src/components/SimpleVideo.tsx b/packages/react/src/components/SimpleVideo.tsx
@@ -20,16 +20,16 @@ export type SimpleVideoProps = PropsWithChildren<
  * without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the
  * regular Video component instead.
  *
- * This component connects to MediaProvider for play/pause state but sets the src directly on the
+ * This component connects to VideoProvider for play/pause state but sets the src directly on the
  * video element without going through HLS.js or other playback engines.
  *
  * @example
  * ```tsx
- * <MediaProvider>
+ * <VideoProvider>
  *   <MediaSkin>
  *     <SimpleVideo src="video.mp4" />
  *   </MediaSkin>
- * </MediaProvider>
+ * </VideoProvider>
  * ```
  */
 export const SimpleVideo: React.ForwardRefExoticComponent<

diff --git a/packages/react/src/components/Video.tsx b/packages/react/src/components/Video.tsx
@@ -69,7 +69,7 @@ const DefaultVideoComponent: ElementType<
 
 /**
  * @description This is a "thin wrapper" around the media component whose primary responsibility is to wire up the element
- * to the <MediaProvider/>'s MediaStore for the media state.
+ * to the <VideoProvider/>'s MediaStore for the media state.
  * @param props - Identical to both a <video/>'s props and the <Player/> props, with one addition that may be familiar to
  * MUI users: a `component` prop that allows you to use something other than the <video/> element under the hood.
  * @returns A media react component (e.g. <video/>), wired up as the media element.

diff --git a/packages/react/src/store/context.ts b/packages/react/src/store/context.ts
@@ -6,7 +6,7 @@ import { createContext } from 'react';
  * used "under the hood" for media ui state updates, state change requests, and the hooks and providers that integrate with this context.
  * It is unlikely that you will/should be using `MediaContext` directly.
  *
- * @see {@link MediaProvider}
+ * @see {@link VideoProvider}
  * @see {@link useMediaDispatch}
  * @see {@link useMediaSelector}
  */

diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
@@ -8,8 +8,8 @@ export {
   useMediaStore,
 } from './hooks';
 export {
-  MediaProvider,
-} from './media-provider';
+  VideoProvider,
+} from './video-provider';
 
 export type MediaStore = any;
 export type MediaState = any;

diff --git a/packages/react/src/store/media-provider.tsx → packages/react/src/store/video-provider.tsx b/packages/react/src/store/media-provider.tsx → packages/react/src/store/video-provider.tsx
@@ -6,7 +6,7 @@ import { createMediaStore } from '@videojs/core/store';
 import { useMemo } from 'react';
 import { MediaContext } from './context';
 
-export function MediaProvider({ children }: { children: ReactNode }): JSX.Element {
+export function VideoProvider({ children }: { children: ReactNode }): JSX.Element {
   const value = useMemo(() => createMediaStore(), []);
 
   // useEffect(() => {

diff --git a/site/src/components/HomePageDemo/Base.tsx b/site/src/components/HomePageDemo/Base.tsx
@@ -7,28 +7,28 @@ import ClientCode from '../Code/ClientCode';
 function generateHTMLCode(skin: Skin): string {
   const skinTag = `${skin}-skin`;
 
-  return `<media-provider>
+  return `<video-provider>
   <${skinTag}>
     <video src="https://example.com/video.mp4"></video>
   </${skinTag}>
-</media-provider>`;
+</video-provider>`;
 }
 
 function generateReactCode(skin: Skin): string {
   const skinComponent = skin === 'frosted' ? 'FrostedSkin' : 'MinimalSkin';
   const skinImport = skin === 'frosted' ? 'frosted' : 'minimal';
 
   return `// npm install @videojs/react@next
-import { MediaProvider, ${skinComponent}, Video } from '@videojs/react';
+import { VideoProvider, ${skinComponent}, Video } from '@videojs/react';
 import '@videojs/react/skins/${skinImport}.css';
 
 export const VideoPlayer = () => {
   return (
-    <MediaProvider>
+    <VideoProvider>
       <${skinComponent}>
         <Video src="https://example.com/video.mp4" />
       </${skinComponent}>
-    </MediaProvider>
+    </VideoProvider>
   );
 };`;
 }