unified-video-framework
Version:
Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more
92 lines • 4.7 kB
JavaScript
import React, { useState } from 'react';
import { WebPlayerView } from '../WebPlayerView.js';
export const GoogleAdsExample = () => {
const [adEvents, setAdEvents] = useState([]);
const logAdEvent = (event) => {
console.log(`[Ad Event] ${event}`);
setAdEvents(prev => [...prev, `${new Date().toLocaleTimeString()}: ${event}`]);
};
return (React.createElement("div", { style: { height: '100vh', display: 'flex', flexDirection: 'column' } },
React.createElement("div", { style: { flex: 1, position: 'relative' } },
React.createElement(WebPlayerView, { url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", type: "mp4", autoPlay: false, controls: true, googleAds: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
midrollTimes: [30, 60, 120],
companionAdSlots: [
{
containerId: 'companion-ad-300x250',
width: 300,
height: 250,
},
{
containerId: 'companion-ad-728x90',
width: 728,
height: 90,
},
],
onAdStart: () => {
logAdEvent('Ad Started');
},
onAdEnd: () => {
logAdEvent('Ad Ended - Resuming Content');
},
onAdError: (error) => {
logAdEvent(`Ad Error: ${error?.getMessage?.() || error}`);
},
onAllAdsComplete: () => {
logAdEvent('All Ads Completed');
},
}, chapters: {
enabled: true,
showChapterMarkers: true,
customStyles: {
progressMarkers: {
ad: '#FFD700',
},
},
}, metadata: {
title: 'Big Buck Bunny with Google Ads',
description: 'Demo video with pre-roll, mid-roll, and post-roll ads',
}, onReady: (player) => {
console.log('Player ready with Google Ads integration');
}, onError: (error) => {
console.error('Player error:', error);
} })),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'center',
gap: '20px',
padding: '20px',
backgroundColor: '#f5f5f5',
} },
React.createElement("div", { id: "companion-ad-300x250", style: {
width: '300px',
height: '250px',
border: '1px solid #ddd',
backgroundColor: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#999',
} }, "300x250 Companion Ad"),
React.createElement("div", { id: "companion-ad-728x90", style: {
width: '728px',
height: '90px',
border: '1px solid #ddd',
backgroundColor: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#999',
} }, "728x90 Companion Ad")),
React.createElement("div", { style: {
padding: '20px',
backgroundColor: '#f9f9f9',
borderTop: '1px solid #ddd',
maxHeight: '200px',
overflowY: 'auto',
} },
React.createElement("h3", { style: { margin: '0 0 10px 0', fontSize: '16px' } }, "Ad Events Log:"),
adEvents.length === 0 ? (React.createElement("p", { style: { color: '#999', margin: 0 } }, "No ad events yet. Play the video to see ads.")) : (React.createElement("ul", { style: { margin: 0, padding: '0 0 0 20px' } }, adEvents.map((event, index) => (React.createElement("li", { key: index, style: { fontSize: '14px', marginBottom: '5px' } }, event))))))));
};
export default GoogleAdsExample;
//# sourceMappingURL=google-ads-example.js.map