myetv-player 1.4.0 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "myetv-player",
-  "version": "1.4.0",
-  "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, and streaming protocols (HLS/DASH)",
+  "version": "1.6.0",
+  "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, Cloudflare Stream and streaming protocols (HLS/DASH)",
   "main": "dist/myetv-player.js",
   "files": [
     "dist/",
@@ -59,3 +59,5 @@
 }
 
 
+
+

package/plugins/google-adsense-ads/README.md

@@ -1 +1,231 @@
+# Google AdSense Plugin for MYETV Video Player
 
+A plugin that integrates Google AdSense display ads into the MYETV Video Player. This plugin shows responsive AdSense banners as overlay ads when the video is paused.
+
+## Important Notes
+
+- This plugin uses **AdSense Display Ads** (not AdSense for Video)
+- Ads appear as **overlay banners** on top of the video player
+- **NOT recommended for use inside iframes** - may violate AdSense policies
+- For true video ads (pre-roll, mid-roll), use the Google IMA Plugin instead
+
+## Features
+
+- ✅ Responsive AdSense display ads
+- ✅ Automatic ad display on video pause
+- ✅ Auto-hide when video resumes
+- ✅ Customizable ad formats
+- ✅ Close button for user control
+- ✅ Full-width responsive support
+- ✅ Debug mode for troubleshooting
+
+## Installation
+
+### 1. Include AdSense Script
+
+Add the Google AdSense script to your HTML page:
+
+```html
+<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXX"
+     crossorigin="anonymous"></script>
+```
+
+Replace `ca-pub-XXXXXXXXXX` with your AdSense Publisher ID.
+
+### 2. Include the Plugin
+
+```html
+<script src="path/to/g-adsense-ads-plugin.js"></script>
+```
+
+### 3. Initialize the Plugin
+
+```javascript
+const player = new VideoPlayer('#video', {
+    // ... other player options
+});
+
+// Initialize AdSense plugin
+const adsensePlugin = new AdSenseVideoPlugin(player, {
+    publisherId: 'ca-pub-XXXXXXXXXX',
+    adSlot: '1234567890',  // Optional
+    adFormat: 'auto',      // Optional
+    fullWidth: true,       // Optional
+    debug: false           // Optional
+});
+
+// Setup the plugin
+adsensePlugin.setup();
+```
+
+## Configuration Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `publisherId` | String | `''` | **Required**. Your AdSense Publisher ID (e.g., `ca-pub-XXXXXXXXXX`) |
+| `adSlot` | String | `''` | Optional. Specific ad slot ID from AdSense |
+| `adFormat` | String | `'auto'` | Ad format: `'auto'`, `'rectangle'`, `'horizontal'`, `'vertical'` |
+| `fullWidth` | Boolean | `true` | Enable full-width responsive ads |
+| `debug` | Boolean | `false` | Enable debug logging to console |
+
+## How to Get Your Publisher ID
+
+1. Sign in to your [Google AdSense account](https://www.google.com/adsense)
+2. Go to **Ads** → **Overview**
+3. Click **By ad unit** -> **Display ads**
+4. Create a new ad unit or use an existing one
+5. Your Publisher ID is in the format: `ca-pub-XXXXXXXXXX`
+6. Optional: Copy the Ad Slot ID (the number after `data-ad-slot`)
+
+## Usage Examples
+
+### Basic Usage (Auto Format)
+
+```javascript
+const adsensePlugin = new AdSenseVideoPlugin(player, {
+    publisherId: 'ca-pub-1234567890'
+});
+
+adsensePlugin.setup();
+```
+
+### With Specific Ad Slot
+
+```javascript
+const adsensePlugin = new AdSenseVideoPlugin(player, {
+    publisherId: 'ca-pub-1234567890',
+    adSlot: '9876543210',
+    debug: true
+});
+
+adsensePlugin.setup();
+```
+
+### Custom Ad Format
+
+```javascript
+const adsensePlugin = new AdSenseVideoPlugin(player, {
+    publisherId: 'ca-pub-1234567890',
+    adFormat: 'rectangle',  // Force rectangle format
+    fullWidth: false
+});
+
+adsensePlugin.setup();
+```
+
+## Public Methods
+
+### `setup()`
+Initializes the plugin and creates the ad container.
+
+```javascript
+adsensePlugin.setup();
+```
+
+### `showAd()`
+Manually show the ad overlay.
+
+```javascript
+adsensePlugin.showAd();
+```
+
+### `hideAd()`
+Manually hide the ad overlay and resume video playback.
+
+```javascript
+adsensePlugin.hideAd();
+```
+
+### `dispose()`
+Clean up and remove the plugin.
+
+```javascript
+adsensePlugin.dispose();
+```
+
+## Automatic Behavior
+
+The plugin automatically:
+- Shows ads when video is **paused**
+- Hides ads when video **resumes playing**
+- Shows ads when video **ends**
+- Provides a **Close Ad** button for users
+
+## Events
+
+The plugin triggers custom events on the player:
+
+| Event | Description |
+|-------|-------------|
+| `adstarted` | Fired when ad is displayed |
+| `adcomplete` | Fired when ad is hidden |
+
+Listen to events:
+
+```javascript
+player.on('adstarted', () => {
+    console.log('Ad is now showing');
+});
+
+player.on('adcomplete', () => {
+    console.log('Ad was closed');
+});
+```
+
+## AdSense Policy Compliance
+
+**Important**: This plugin is designed for use on **main pages only**, not inside iframes. Using AdSense ads inside iframes may violate Google's policies unless you have explicit permission.
+
+### Allowed Usage:
+- ✅ Player on main page (same domain)
+- ✅ Player embedded directly in page content
+- ✅ Single player per page recommended
+
+### Not Allowed:
+- ❌ Player inside cross-domain iframe
+- ❌ Multiple instances trying to bypass 3-ad limit
+- ❌ Ads loaded via iframe on different domain
+
+For iframe-based implementations or true video advertising, consider using **Google IMA SDK** with **AdSense for Video** (requires 2M+ monthly impressions) or **Google Ad Manager**.
+
+## Troubleshooting
+
+### Ads not showing?
+
+1. **Check Publisher ID**: Ensure your `publisherId` is correct and starts with `ca-pub-`
+2. **AdSense Script**: Verify the AdSense script is loaded in your HTML
+3. **Enable Debug**: Set `debug: true` to see console logs
+4. **Ad Blockers**: Disable ad blockers for testing
+5. **Policy Compliance**: Ensure your site complies with AdSense policies
+
+### Console Errors?
+
+Enable debug mode:
+
+```javascript
+const adsensePlugin = new AdSenseVideoPlugin(player, {
+    publisherId: 'ca-pub-XXXXXXXXXX',
+    debug: true  // Enable debug logging
+});
+```
+
+## Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## License
+
+Created by [MYETV.tv](https://www.myetv.tv) & [Oskar Cosimo](https://oskarcosimo.com)
+
+## Related Plugins
+
+- **Google IMA Plugin** - For true video ads (pre-roll, mid-roll, post-roll)
+- See `g-ima-ads-plugin.js` for video advertising with VAST/VPAID support
+
+## Support
+
+For issues or questions:
+- GitHub Issues: https://github.com/OskarCosimo/myetv-video-player-opensource/

package/plugins/google-adsense-ads/g-adsense-ads-plugin.js

@@ -1,4 +1,4 @@
-/* Google AdSense Plugin for MYETV Video Player
+/* Google AdSense Plugin for MYETV Video Player
  * Integrates Google AdSense for Video
  * Created by https://www.myetv.tv https://oskarcosimo.com
  */
@@ -37,6 +37,7 @@
 
             this.createAdContainer();
             this.loadAdSenseScript();
+            this.attachVideoEvents();
 
             if (this.options.debug) {
                 console.log('🎬 AdSense Video Plugin initialized');
@@ -70,12 +71,38 @@
             }
 
             ins.setAttribute('data-ad-format', this.options.adFormat);
-
             if (this.options.fullWidth) {
                 ins.setAttribute('data-full-width-responsive', 'true');
             }
 
+            // Create Close button
+            const closeBtn = document.createElement('button');
+            closeBtn.textContent = '✕ Close Ad';
+            closeBtn.style.cssText = `
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                padding: 8px 16px;
+                background: rgba(0, 0, 0, 0.7);
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                z-index: 1000;
+                font-size: 14px;
+                font-family: Arial, sans-serif;
+            `;
+
+            closeBtn.addEventListener('click', () => {
+                this.hideAd();
+                // Resume video only if not ended
+                if (!this.player.video.ended) {
+                    this.player.video.play();
+                }
+            });
+
             this.adContainer.appendChild(ins);
+            this.adContainer.appendChild(closeBtn);
             this.player.container.appendChild(this.adContainer);
         }
 
@@ -110,19 +137,54 @@
                 if (this.options.debug) {
                     console.log('🎬 AdSense ad initialized');
                 }
+
+                // Show ad immediately if video is paused or not started
+                if (this.player.video.paused) {
+                    this.showAd();
+                }
             } catch (error) {
                 console.error('🎬 AdSense initialization error:', error);
             }
         }
 
+        /**
+         * Attach video events
+         */
+        attachVideoEvents() {
+            // Show ad when video is paused
+            this.player.video.addEventListener('pause', () => {
+                this.showAd();
+            });
+
+            // Show ad when video ends
+            this.player.video.addEventListener('ended', () => {
+                this.showAd();
+            });
+
+            // Hide ad when video starts playing
+            this.player.video.addEventListener('play', () => {
+                this.hideAd();
+            });
+
+            // Show ad on load if no autoplay
+            this.player.video.addEventListener('loadedmetadata', () => {
+                if (this.player.video.paused && this.isAdLoaded) {
+                    this.showAd();
+                }
+            });
+        }
+
         /**
          * Show ad
          */
         showAd() {
-            if (this.isAdLoaded) {
+            if (this.isAdLoaded && this.adContainer) {
                 this.adContainer.style.display = 'block';
-                this.player.video.pause();
                 this.player.triggerEvent('adstarted');
+
+                if (this.options.debug) {
+                    console.log('🎬 Ad shown');
+                }
             }
         }
 
@@ -130,9 +192,14 @@
          * Hide ad
          */
         hideAd() {
-            this.adContainer.style.display = 'none';
-            this.player.video.play();
-            this.player.triggerEvent('adcomplete');
+            if (this.adContainer) {
+                this.adContainer.style.display = 'none';
+                this.player.triggerEvent('adcomplete');
+
+                if (this.options.debug) {
+                    console.log('🎬 Ad hidden');
+                }
+            }
         }
 
         /**
@@ -155,4 +222,4 @@
     }
 
 })();
-/* GLOBAL_END */
+/* GLOBAL_END */

package/plugins/google-ima-ads/README.md

@@ -1 +1,259 @@
+# Google IMA Plugin for MYETV Video Player
 
+A plugin that integrates the **Google Interactive Media Ads (IMA) SDK** with the MYETV Video Player.  
+It enables true video advertising (pre-roll, mid-roll, post-roll, VMAP, VAST, VPAID) using a standard HTML5 player.
+
+## Important Notes
+
+- This plugin uses **Google IMA SDK**, not standard AdSense display units.
+- You must provide a valid **VAST/VMAP ad tag URL** or an `adsResponse`.
+- For AdSense for Video, Google Ad Manager, or other ad networks, you still need a compatible ad tag.
+- The plugin overlays ads on top of the video element using an IMA-managed ad container.
+
+## Features
+
+- ✅ Full integration with **Google IMA HTML5 SDK**
+- ✅ Supports **VAST**, **VMAP**, and **VPAID**
+- ✅ Uses `AdDisplayContainer`, `AdsLoader`, and `AdsManager`
+- ✅ Automatic ad request on first play
+- ✅ Handles ad lifecycle events (start, complete, error, skipped, etc.)
+- ✅ Responsive ad resizing on window resize
+- ✅ Customizable locale, labels, and rendering settings
+- ✅ Debug logging
+
+## Installation
+
+### 1. Include the IMA SDK
+
+Add the Google IMA SDK script to your HTML page:
+
+```html
+<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+```
+
+### 2. Include the Plugin
+
+```html
+<script src="path/to/g-ima-ads-plugin.js"></script>
+```
+
+### 3. Initialize the MYETV Video Player
+
+```html
+<video id="my-video" controls>
+    <source src="video.mp4" type="video/mp4">
+</video>
+
+<script>
+const player = new VideoPlayer('#my-video', {
+    // ... other player options
+});
+</script>
+```
+
+### 4. Initialize the Google IMA Plugin
+
+```javascript
+const imaPlugin = new GoogleIMAPlugin(player, {
+    adTagUrl: 'https://your-ad-server.example.com/vast-tag',
+    locale: 'en',
+    showCountdown: true,
+    showControls: true,
+    autoPlayAdBreaks: true,
+    vpaidMode: 'ENABLED',
+    vastLoadTimeout: 5000,
+    numRedirects: 4,
+    debug: false
+});
+
+// Setup the plugin
+imaPlugin.setup();
+```
+
+## Configuration Options
+
+All options are passed as the second argument to `new GoogleIMAPlugin(player, options)`.
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `adTagUrl` | String | `''` | VAST / VMAP ad tag URL (required unless `adsResponse` is provided) |
+| `adsResponse` | String / Object | `null` | Pre-fetched VAST XML / JSON response instead of `adTagUrl` |
+| `locale` | String | `'it'` | IMA UI locale (e.g. `en`, `it`, `fr`) |
+| `showCountdown` | Boolean | `true` | Whether to show IMA countdown / UI elements |
+| `showControls` | Boolean | `true` | Whether to allow ad controls (play/pause, etc.) |
+| `autoPlayAdBreaks` | Boolean | `true` | Automatically play ad breaks when they are ready |
+| `disableCustomPlaybackForIOS10Plus` | Boolean | `false` | IMA custom playback compatibility flag for iOS 10+ |
+| `vastLoadTimeout` | Number | `5000` | VAST load timeout in milliseconds |
+| `debug` | Boolean | `false` | Enable console debug logging |
+| `vpaidMode` | String | `'ENABLED'` | `'ENABLED'`, `'INSECURE'`, or `'DISABLED'` for VPAID support |
+| `adLabel` | String | `'ADS'` | Ad label text (e.g. "Ad", "Advertisement") |
+| `adLabelNofN` | String | `'di'` | Separator for "Ad X of Y" text (e.g. "of") |
+| `nonLinearWidth` | Number / `null` | `null` | Custom non-linear ad width (fallback: video width) |
+| `nonLinearHeight` | Number / `null` | `null` | Custom non-linear ad height (fallback: video height / 3) |
+| `numRedirects` | Number | `4` | Maximum number of allowed VAST redirects |
+| `adsRenderingSettings` | Object | `{}` | Custom `AdsRenderingSettings` options merged into defaults |
+
+## How It Works
+
+Internally, the plugin:
+
+1. Creates an **ad container** overlay (`div`) on top of the player container.
+2. Creates an `AdDisplayContainer` with the video element and the ad container.
+3. Creates an `AdsLoader` and listens for:
+   - `ADS_MANAGER_LOADED`
+   - `AD_ERROR`
+4. On `ADS_MANAGER_LOADED`, it creates an `AdsManager` with `AdsRenderingSettings`.
+5. Starts the ads by calling:
+   - `adsManager.init(width, height, ViewMode.NORMAL)`
+   - `adsManager.start()`
+6. Listens to ad events (STARTED, COMPLETE, ALL_ADS_COMPLETED, SKIPPED, PAUSED, RESUMED, etc.) and forwards custom events to the player.
+
+## Automatic Behavior
+
+By default, the plugin:
+
+- Requests ads on **first video play** if `adTagUrl` or `adsResponse` is provided.
+- Shows the ad container when ads start.
+- Hides the ad container when all ads complete or on ad error.
+- Resumes content playback on ad error.
+- Resizes ads on **window resize** to match the video size.
+
+## Public Methods
+
+### `setup()`
+
+Initializes the plugin, creates the ad container, and prepares IMA.
+
+```javascript
+imaPlugin.setup();
+```
+
+### `requestAds()`
+
+Explicitly request ads (already called automatically on first play, if configured).
+
+```javascript
+imaPlugin.requestAds();
+```
+
+### `dispose()`
+
+Destroy ads manager, ads loader, and remove the ad container.
+
+```javascript
+imaPlugin.dispose();
+```
+
+## Events
+
+The plugin fires custom events on the MYETV player to help you react to ad lifecycle:
+
+| Event | Description |
+|-------|-------------|
+| `adstarted` | Fired when an ad starts playing |
+| `adcomplete` | Fired when a single ad completes |
+| `allAdscomplete` | Fired when all ads in the pod / VMAP are finished |
+| `adpaused` | Fired when an ad is paused |
+| `adresumed` | Fired when an ad resumes |
+| `adskipped` | Fired when an ad is skipped |
+| `aderror` | Fired when an ad error occurs (also resumes content) |
+
+Example:
+
+```javascript
+player.on('adstarted', () => {
+    console.log('IMA ad started');
+});
+
+player.on('allAdscomplete', () => {
+    console.log('All IMA ads completed');
+});
+
+player.on('aderror', (e) => {
+    console.error('Ad error:', e);
+});
+```
+
+## Ad Tag Requirements
+
+You can use:
+
+- **Google Ad Manager** VAST / VMAP tags
+- **AdSense for Video** tags (if your account is approved)
+- Third-party ad networks that provide **VAST/VMAP** URLs compatible with IMA
+
+Example VAST tag URL (Google Ad Manager style):
+
+```
+https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/123456789/video_ad_unit&env=vp&gdfp_req=1&output=vast&unviewed_position_start=1
+```
+
+Set it in the plugin:
+
+```javascript
+const imaPlugin = new GoogleIMAPlugin(player, {
+    adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?...',
+    locale: 'en'
+});
+
+imaPlugin.setup();
+```
+
+## Iframe & Policy Considerations
+
+- Google IMA is **designed** to work with iframes and manages its own internal ad iframes.
+- However, general Google ads policy still applies:
+  - Use **friendly iframes** (same domain) whenever possible.
+  - Avoid using external iframes to circumvent ad limits or policies.
+- For strict policy details, always refer to the latest Google IMA and AdSense/Ad Manager documentation.
+
+## Troubleshooting
+
+### No ads are playing
+
+Check:
+
+1. `adTagUrl` is a valid VAST/VMAP URL and returns a proper response.
+2. IMA SDK script is loaded:
+   ```html
+   <script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+   ```
+3. Autoplay policies: some browsers block autoplay without user interaction.
+4. If `debug: true` is enabled, watch the browser console for:
+   - Initialization logs
+   - Ad errors / warnings
+
+### AdError events
+
+Listen for `aderror`:
+
+```javascript
+player.on('aderror', (event) => {
+    console.error('IMA ad error:', event.error);
+});
+```
+
+The plugin will automatically destroy the `AdsManager` and resume content playback on error.
+
+## Browser Support
+
+- Chrome / Edge (latest)
+- Firefox (latest)
+- Safari (desktop & iOS)
+- Android Chrome
+- Other modern browsers supporting HTML5 video and JavaScript
+
+## License
+
+Created by [MYETV.tv](https://www.myetv.tv) & [Oskar Cosimo](https://oskarcosimo.com)
+
+## Related Plugins
+
+- **Google AdSense Plugin** - Overlay display ads using standard AdSense units.
+- See `g-adsense-ads-plugin.js` for banner-style overlays.
+
+## Support
+
+For issues or questions:
+
+- GitHub Issues: https://github.com/OskarCosimo/myetv-video-player-opensource

package/plugins/google-ima-ads/g-ima-ads-plugin.js

@@ -1,4 +1,4 @@
-/* Google IMA Plugin for MYETV Video Player
+/* Google IMA Plugin for MYETV Video Player
  * Integrates Google Interactive Media Ads SDK
  * Supports VAST, VMAP, VPAID
  * Created by https://www.myetv.tv https://oskarcosimo.com
@@ -30,7 +30,7 @@
                 vastLoadTimeout: options.vastLoadTimeout || 5000,
                 debug: options.debug || false,
                 vpaidMode: options.vpaidMode || 'ENABLED', // ENABLED, INSECURE, DISABLED
-                adLabel: options.adLabel || 'Pubblicità',
+                adLabel: options.adLabel || 'ADS',
                 adLabelNofN: options.adLabelNofN || 'di',
                 nonLinearWidth: options.nonLinearWidth || null,
                 nonLinearHeight: options.nonLinearHeight || null,