muxinc · luwes · Jun 18, 2025 · May 7, 2025 · May 7, 2025 · May 7, 2025
@@ -19,6 +19,7 @@
     "@mux/mux-uploader-react": ">=1.0.0-beta.0",
     "@mux/mux-video": ">=0.3.0",
     "@mux/mux-video-react": ">=0.3.0",
+    "media-chrome": "^4.9.0",
     "next": "^14.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

@@ -0,0 +1,75 @@
+import Head from 'next/head';
+import Script from 'next/script';
+import { useState } from 'react';
+import MuxNewsPlayer from '@mux/mux-player-react/news';
+
+function MuxNewsPlayerPage() {
+
+  const relatedVideos = [
+    {
+      imageUrl: "https://image.mux.com/DVBhwqkhxkOiLRjUAYJS6mCBJSuC00tB4iWjJmEofJoo/thumbnail.jpg",
+      title: "Test video title 1",
+      playbackId: "DVBhwqkhxkOiLRjUAYJS6mCBJSuC00tB4iWjJmEofJoo",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+    {
+      imageUrl: "https://image.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA/thumbnail.jpg",
+      title: "Test video title 2",
+      playbackId: "VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonly&ciu_szs=300x250%2C728x90&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+    {
+      imageUrl: "https://image.mux.com/gZh02tKCI015W6k2XdYSh4srGnksYvsoT1uHsYOlv4Blo/thumbnail.jpg",
+      title: "Test video title 3",
+      playbackId: "gZh02tKCI015W6k2XdYSh4srGnksYvsoT1uHsYOlv4Blo",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonlybumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+  ];
+
+  const [sdkReady, setSdkReady] = useState(false);
+
+  return (
+    <>
+      <Head>
+        <title>&lt;Playlist/&gt; Demo 3</title>
+      </Head>
+
+      <Script
+        src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
+        onReady={() => {
+          setSdkReady(true);
+          console.log("Google IMA SDK loaded");
+        }}
+        onError={() => {
+          setSdkReady(true);
+          console.log("Google IMA SDK failed to load");
+        }}
+        strategy="afterInteractive"
+      />
+
+      {sdkReady && 
+        <MuxNewsPlayer
+          allowAdBlocker={true}
+          videoList={relatedVideos}
+          onAdRequest={() => console.log('Ad Request')}
+          onAdResponse={() => console.log('Ad Response')}
+          onAdImpression={() => console.log('Ad Impression')}
+          onAdBreakStart={() => console.log('Ad Break Start')}
+          onAdPlay={() => console.log('Ad Play')}
+          onAdPlaying={() => console.log('Ad Playing')}
+          onAdPause={() => console.log('Ad Pause')}
+          onAdFirstQuartile={() => console.log('Ad First Quartile')}
+          onAdMidpoint={() => console.log('Ad Midpoint')}
+          onAdThirdQuartile={() => console.log('Ad Third Quartile')}
+          onAdClick={() => console.log('Ad Click')}
+          onAdSkip={() => console.log('Ad Skip')}
+          onAdClose={() => console.log('Ad Close')}
+          onAdEnded={() => console.log('Ad Ended')}
+          onAdBreakEnd={() => console.log('Ad Break End')}
+          onAdError={() => console.log('Ad Error')}
+        />}
+    </>
+  );
+}
+
+export default MuxNewsPlayerPage;
@@ -0,0 +1,69 @@
+import Script from 'next/script';
+import Head from 'next/head';
+import { useState } from 'react';
+import MuxPlayer from '@mux/mux-player-react/ads';
+import NewsTheme from '@mux/mux-player-react/themes/news';
+
+function MuxPlayerAdsPage() {
+  const [sdkReady, setSdkReady] = useState(false);
+
+  return (
+    <>
+      <Head>
+        <title>&lt;MuxPlayer/&gt; (ads) Demo</title>
+      </Head>
+
+      <Script
+        src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
+        onReady={() => {
+          setSdkReady(true);
+          console.log("Google IMA SDK loaded");
+        }}
+        onError={() => {
+          setSdkReady(true);
+          console.log("Google IMA SDK failed to load");
+        }}
+        strategy="afterInteractive"
+      />
+
+      {/*
+        single preroll skippable
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+
+        VMAP - Pre-roll Single Ad, Mid-roll Standard Pod with 3 ads, Post-roll Single Ad
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
+      */}
+
+      {sdkReady && <MuxPlayer
+        theme={NewsTheme}
+        streamType="on-demand"
+        playbackId="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+        allowAdBlocker={true}
+        onAdRequest={() => console.log('Ad Request')}
+        onAdResponse={() => console.log('Ad Response')}
+        onAdImpression={() => console.log('Ad Impression')}
+        onAdBreakStart={() => console.log('Ad Break Start')}
+        onAdPlay={() => console.log('Ad Play')}
+        onAdPlaying={() => console.log('Ad Playing')}
+        onAdPause={() => console.log('Ad Pause')}
+        onAdFirstQuartile={() => console.log('Ad First Quartile')}
+        onAdMidpoint={() => console.log('Ad Midpoint')}
+        onAdThirdQuartile={() => console.log('Ad Third Quartile')}
+        onAdClick={() => console.log('Ad Click')}
+        onAdSkip={() => console.log('Ad Skip')}
+        onAdClose={() => console.log('Ad Close')}
+        onAdEnded={() => console.log('Ad Ended')}
+        onAdBreakEnd={() => console.log('Ad Break End')}
+        onAdError={() => console.log('Ad Error')}
+        metadata={{
+          video_id: "video-id-12345",
+          video_title: "Elephants Dream",
+          viewer_user_id: "user-id-6789",
+        }}
+      />}
+    </>
+  );
+}
+
+export default MuxPlayerAdsPage;
@@ -34,9 +34,6 @@ function MuxPlayerPage() {
         onCuePointChange={({ target }) => {
           setActiveCuePoint((target as MuxPlayerElement).activeCuePoint);
         }}
-        onCuePointsChange={({ target }) => {
-          setActiveCuePoint((target as MuxPlayerElement).activeCuePoint);
-        }}
       />
       <div>
         <b>Active CuePoint:</b>

@@ -0,0 +1,22 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from 'next/head';
+import MuxPlayer from "@mux/mux-player-react";
+
+function MuxPlayerPage() {
+  return (
+    <>
+      <Head>
+        <title>&lt;MuxPlayer/&gt; (error) Demo</title>
+      </Head>
+
+      <MuxPlayer
+        playbackId="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2"
+        onError={(error) => {
+          console.error('MuxPlayer onError', error);
+        }}
+      />
+    </>
+  );
+}
+
+export default MuxPlayerPage;
@@ -7,6 +7,9 @@ function HomePage() {
         <li><Link href="/MuxVideo" className="video">&lt;MuxVideo&gt;</Link></li>
         <li><Link href="/MuxAudio"className="audio">&lt;MuxAudio&gt;</Link></li>
         <li><Link href='/MuxPlayer?playbackId="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"' className="player">&lt;MuxPlayer&gt;</Link></li>
+        <li><Link href="/MuxPlayerAds" className="player"><>&lt;MuxPlayer&gt;<br />(ads)</></Link></li>
+        <li><Link href="/MuxNewsPlayer" className="player"><>&lt;MuxNewsPlayer&gt;<br />(ads + playlist)</></Link></li>
+        <li><Link href='/MuxPlayerError' className="player">&lt;MuxPlayer&gt; (error)</Link></li>
         <li><Link href="/MuxPlayerPosterSlot" className="player"><>&lt;MuxPlayer&gt;<br/>(poster slot)</></Link></li>
         <li><Link href="/MuxPlayerTheme" className="player"><>&lt;MuxPlayer&gt;<br/>(theme)</></Link></li>
         <li><Link href="/MuxPlayerCuePoints" className="player"><>&lt;MuxPlayer&gt;<br/>(CuePoints)</></Link></li>
@@ -24,6 +27,7 @@ function HomePage() {
         <li><Link href="/mux-audio" className="audio"><>&lt;mux-audio&gt;<br/>(Web Component)</></Link></li>
         <li><Link href="/mux-player" className="player"><>&lt;mux-player&gt;<br/>(Web Component)</></Link></li>
         <li><Link href="/mux-video-react" className="video"><>&lt;MuxVideo&gt;<br/>(React Web Component)</></Link></li>
+        <li><Link href="/mux-video-ads-react" className="video"><>&lt;MuxVideo&gt; (ads)<br />(React Web Component)</></Link></li>
         <li><Link href="/app-router" className="react"><>App Router</></Link></li>
       </ul>
     </nav>

@@ -0,0 +1,119 @@
+import Head from 'next/head';
+import Script from 'next/script';
+import { useRef, useState, useEffect } from 'react';
+import MuxVideoAds from '@mux/mux-video/ads/react';
+
+function MuxVideoPage() {
+  const mediaElRef = useRef(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [sdkReady, setSdkReady] = useState(false);
+  const [eventLogs, setEventLogs] = useState<string[]>([]);
+
+  // Function to log events to the textarea
+  const logEvent = (event: string) => {
+    const timestamp = new Date().toISOString().substr(11, 12);
+    setEventLogs(prev => [...prev, `${timestamp} - ${event}`]);
+  };
+
+  // Auto-scroll textarea to bottom when logs update if scrolled
+  useEffect(() => {
+    if (textareaRef.current) {
+      const isScrolledToEnd = textareaRef.current.scrollTop >= textareaRef.current.scrollHeight - textareaRef.current.offsetHeight - 50;
+      if (isScrolledToEnd) {
+        textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+      }
+    }
+  }, [eventLogs]);
+
+  // Set up event listeners when video element is available
+  useEffect(() => {
+    const videoElement = mediaElRef.current;
+    if (!videoElement || !sdkReady) return;
+
+    const { Events } = (videoElement.constructor as typeof MuxVideoElement);
+
+    // Create event handler functions mapped by event name
+    const eventHandlers = Events.reduce((handlers, eventName) => {
+      handlers[eventName] = () => logEvent(eventName);
+      return handlers;
+    }, {} as Record<string, () => void>);
+
+    // Add event listeners
+    Events.forEach(eventName => {
+      videoElement.addEventListener(eventName, eventHandlers[eventName]);
+    });
+
+    return () => {
+      if (!videoElement) return;
+      // Remove event listeners using the same handler references
+      Events.forEach(eventName => {
+        videoElement.removeEventListener(eventName, eventHandlers[eventName]);
+      });
+    };
+  }, [sdkReady]);
+
+  return (
+    <>
+      <Head>
+        <title>&lt;MuxVideoAds/&gt; Demo</title>
+      </Head>
+
+      <Script
+        src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
+        onReady={() => {
+          setSdkReady(true);
+          logEvent("Google IMA SDK loaded");
+        }}
+        onError={() => {
+          setSdkReady(true);
+          logEvent("Google IMA SDK failed to load");
+        }}
+        strategy="afterInteractive"
+      />
+
+      {/*
+        single preroll skippable
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+
+        single postroll
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpostonly&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator="
+
+        VMAP - Pre-roll Single Ad, Mid-roll Standard Pod with 3 ads, Post-roll Single Ad
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
+      */}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '800px', margin: '0 auto' }}>
+        {sdkReady && <MuxVideoAds
+          ref={mediaElRef}
+          playbackId="VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA"
+          controls
+          playsInline={true}
+          preferPlayback="mse"
+          allowAdBlocker={true}
+          adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+        />}
+
+        <div>
+          <h3>Event Log</h3>
+          <textarea
+            ref={textareaRef}
+            readOnly
+            value={eventLogs.join('\n')}
+            style={{
+              width: '100%',
+              height: '300px',
+              fontFamily: 'monospace',
+              fontSize: '14px',
+              padding: '8px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              overflowY: 'auto'
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default MuxVideoPage;
@@ -110,6 +110,7 @@ mux-video:not([audio]),
 video {
   aspect-ratio: 16 / 9;
   background: #000;
+  overflow: hidden;
 }
 
 .component-page {

@@ -15,7 +15,7 @@
     "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",