Merge branch 'master' into VIDEO-20614-poster-true

Author: tsi

.github/workflows/e2e_pr.yml

@@ -12,6 +12,10 @@ jobs:
     name: install
     runs-on: ubuntu-latest
     steps:
+      - name: Set timestamp
+        id: timestamp
+        run: echo "TIMESTAMP=$(date +%Y%m%d_%H%M%S_%3N)" >> $GITHUB_ENV
+
       - name: Checkout
         uses: actions/checkout@v4
         with:
@@ -45,9 +49,9 @@ jobs:
         uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
-         name: playwright-report
-         path: playwright-report/
-         retention-days: 30
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 
       - name: Pushes to reports repository
         if: always()
@@ -60,8 +64,8 @@ jobs:
           destination-repository-name: 'cloudinary-video-player-reports'
           user-email: ''
           target-branch: main
-          target-directory: 'playwright-report_${{ github.run_id }}'
+          target-directory: 'playwright-report_ts_${{ env.TIMESTAMP }}'
 
       - name: Write URL in summary
         if: always()
-        run: echo "### Test results https://cloudinary.github.io/cloudinary-video-player-reports/playwright-report_${{ github.run_id }}" >> $GITHUB_STEP_SUMMARY
+        run: echo "### Test results https://cloudinary.github.io/cloudinary-video-player-reports/playwright-report_ts_${{ env.TIMESTAMP }}" >> $GITHUB_STEP_SUMMARY

CHANGELOG.md

@@ -1,3 +1,21 @@
+## [3.6.5](https://github.com/cloudinary/cloudinary-video-player/compare/v3.6.4...v3.6.5) (2026-01-14)
+
+
+### Bug Fixes
+
+* **VIDEO-20638:** improved URL and search-queries handling  ([#967](https://github.com/cloudinary/cloudinary-video-player/issues/967)) ([66cfc40](https://github.com/cloudinary/cloudinary-video-player/commit/66cfc405f6aa2d25be3c843dd9a40cffd7b61900))
+
+
+
+## [3.6.4](https://github.com/cloudinary/cloudinary-video-player/compare/v3.6.3...v3.6.4) (2026-01-08)
+
+
+### Bug Fixes
+
+* **VIDEO-20100:** analytics improvements ([#959](https://github.com/cloudinary/cloudinary-video-player/issues/959)) ([e4571d2](https://github.com/cloudinary/cloudinary-video-player/commit/e4571d2597fb17b7bf509e6df04c249f7d1556d9))
+
+
+
 ## [3.6.3](https://github.com/cloudinary/cloudinary-video-player/compare/v3.6.2...v3.6.3) (2025-12-30)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudinary-video-player",
-  "version": "3.6.3",
+  "version": "3.6.5",
   "description": "Cloudinary Video Player",
   "author": "Cloudinary",
   "license": "MIT",

package.json

@@ -3,6 +3,7 @@ import 'assets/styles/components/title-bar.scss';
 import componentUtils from '../component-utils';
 import { utf8ToBase64 } from '../../utils/utf8Base64';
 import { getCloudinaryUrlPrefix } from 'plugins/cloudinary/common';
+import { appendQueryParams } from '../../utils/querystring';
 
 // support VJS5 & VJS6 at the same time
 const dom = videojs.dom || videojs;
@@ -47,7 +48,10 @@ class TitleBar extends Component {
 
     const urlPrefix = getCloudinaryUrlPrefix(config);
     const deliveryType = source.getInitOptions().type || 'upload';
-    const metadataUrl = `${urlPrefix}/_applet_/video_service/video_metadata/${deliveryType}/${utf8ToBase64(publicId)}.json`;
+    const metadataUrl = appendQueryParams(
+      `${urlPrefix}/_applet_/video_service/video_metadata/${deliveryType}/${utf8ToBase64(publicId)}.json`,
+      source.queryParams()
+    );
 
     fetch(metadataUrl, {
       headers: {

src/components/title-bar/title-bar.js

@@ -9,27 +9,36 @@ const EVENT_DEFAULTS = {
   }
 };
 
+// Always-enabled events that the player will fire
 const DEFAULT_EVENTS = [
-  PLAYER_EVENT.PERCENTS_PLAYED,
+  PLAYER_EVENT.PLAYER_LOAD,
+  PLAYER_EVENT.VIDEO_LOAD,
+  PLAYER_EVENT.START,
   PLAYER_EVENT.PAUSE_NO_SEEK,
   PLAYER_EVENT.SEEK,
   PLAYER_EVENT.MUTE,
   PLAYER_EVENT.UNMUTE,
-  PLAYER_EVENT.QUALITY_CHANGED
+  PLAYER_EVENT.QUALITY_CHANGED,
+  PLAYER_EVENT.PERCENTS_PLAYED
 ];
 
 const DEFAULT_OPTIONS = {
   events: DEFAULT_EVENTS
 };
 
-// Emits the following additional events:
-// percentsplayed, timeplayed, pausenoseek, seek, mute, unmute
+// Emits custom Cloudinary player events:
+// playerload, videoload, start, percentsplayed, timeplayed, pausenoseek, seek, mute, unmute, qualitychanged
 class ExtendedEvents extends EventEmitter {
 
   constructor(player, initOptions = {}) {
     super();
     this.player = player;
+    
+    // Merge events arrays instead of replacing them
     const options = videojs.obj.merge(DEFAULT_OPTIONS, initOptions);
+    if (initOptions.events) {
+      options.events = [...DEFAULT_EVENTS, ...initOptions.events];
+    }
 
     let _muteData = { lastState: undefined };
     let _seekStart = 0;
@@ -39,6 +48,7 @@ class ExtendedEvents extends EventEmitter {
     let _timesTracked = [];
     let _currentSource = null;
     let _ended = false;
+    let _startTracked = false;
 
     const volumechange = (event) => {
       if (this.player.muted() && _muteData.lastState !== 'muted') {
@@ -114,9 +124,18 @@ class ExtendedEvents extends EventEmitter {
     };
 
     const loadedmetadata = () => {
-      if (this.player.currentSource().src !== _currentSource) {
+      const src = this.player.currentSource().src;
+      if (src !== _currentSource) {
         resetPerVideoState();
-        _currentSource = this.player.currentSource().src;
+        _currentSource = src;
+        this.emit(PLAYER_EVENT.VIDEO_LOAD, null, { src });
+      }
+    };
+
+    const playing = () => {
+      if (!_startTracked) {
+        _startTracked = true;
+        this.emit(PLAYER_EVENT.START);
       }
     };
 
@@ -157,12 +176,14 @@ class ExtendedEvents extends EventEmitter {
       _muteData = { lastState: undefined };
       _seekStart = _seekEnd = 0;
       _seeking = false;
+      _startTracked = false;
       resetPerVideoState();
     };
 
     const resetPerVideoState = () => {
       _percentsTracked = [];
       _timesTracked = [];
+      _startTracked = false;
     };
 
     const ended = () => {
@@ -172,6 +193,12 @@ class ExtendedEvents extends EventEmitter {
     this.events = normalizeEventsParam(options.events, EVENT_DEFAULTS);
     resetState();
 
+    // Always fire playerload event immediately
+    this.emit(PLAYER_EVENT.PLAYER_LOAD, null, { url: window.location.href });
+
+    // Always listen for start event
+    this.player.on(PLAYER_EVENT.PLAYING, playing.bind(this));
+
     this.player.on(PLAYER_EVENT.PLAY, replay.bind(this));
     this.player.on(PLAYER_EVENT.ENDED, ended.bind(this));
     if (this.events.percentsplayed || this.events.timeplayed ||

src/extended-events.js

@@ -1,6 +1,5 @@
 import videojs from 'video.js';
-import { sliceProperties } from 'utils/slicing';
-import { normalizeEventsParam, default as ExtendedEvents } from 'extended-events';
+import { normalizeEventsParam } from 'extended-events';
 import { PLAYER_EVENT } from '../../utils/consts';
 
 const DEFAULT_EVENTS = [
@@ -38,36 +37,24 @@ class AnalyticsPlugin {
     this.options = videojs.obj.merge(DEFAULT_OPTIONS, initOptions);
     this.events = normalizeEventsParam(this.options.events, EVENT_DEFAULTS);
 
-    const extendedEvents = sliceProperties(this.events, PLAYER_EVENT.PERCENTS_PLAYED, PLAYER_EVENT.TIME_PLAYED, PLAYER_EVENT.PAUSE, PLAYER_EVENT.SEEK);
-
-    if (extendedEvents.pause) {
-      delete extendedEvents.pause;
-      extendedEvents.pausenoseek = {};
-    }
-
-    this._extendedEvents = new ExtendedEvents(player, { events: extendedEvents });
-
-    this._currentSource = null;
     this._startTracked = null;
     this._endTracked = null;
 
     this.resetState();
   }
 
   init() {
-    const playerLoad = () => {
-      this.track({ action: 'Player Load', label: window.location.href, nonInteraction: true });
+    const playerLoad = (event, data) => {
+      const label = data?.url || window.location.href;
+      this.track({ action: 'Player Load', label, nonInteraction: true });
     };
 
     const play = () => {
       this.track({ action: 'Play' });
     };
 
     const start = () => {
-      if (this._startTracked) {
-        this.track({ action: 'Start' });
-        this._startTracked = true;
-      }
+      this.track({ action: 'Start' });
     };
 
     const pause = () => {
@@ -174,34 +161,36 @@ class AnalyticsPlugin {
     }
 
     if (this.events.start) {
-      this.player.on(PLAYER_EVENT.PLAYING, start.bind(this));
+      this.player.on(PLAYER_EVENT.START, start.bind(this));
     }
 
     if (this.events.fullscreenchange) {
       this.player.on(PLAYER_EVENT.FULL_SCREEN_CHANGE, fullscreenchange.bind(this));
     }
 
     if (this.events.percentsplayed) {
-      this._extendedEvents.on(PLAYER_EVENT.PERCENTS_PLAYED, percentsPlayed.bind(this));
+      this.player.on(PLAYER_EVENT.PERCENTS_PLAYED, percentsPlayed.bind(this));
     }
 
     if (this.events.timeplayed) {
-      this._extendedEvents.on(PLAYER_EVENT.TIME_PLAYED, timePlayed.bind(this));
+      this.player.on(PLAYER_EVENT.TIME_PLAYED, timePlayed.bind(this));
     }
 
     if (this.events.pause) {
-      this._extendedEvents.on(PLAYER_EVENT.PAUSE_NO_SEEK, pause.bind(this));
+      this.player.on(PLAYER_EVENT.PAUSE_NO_SEEK, pause.bind(this));
     }
 
     if (this.events.seek) {
-      this._extendedEvents.on(PLAYER_EVENT.SEEK, seek.bind(this));
+      this.player.on(PLAYER_EVENT.SEEK, seek.bind(this));
     }
 
     if (this.events.playerload) {
-      playerLoad();
+      this.player.on(PLAYER_EVENT.PLAYER_LOAD, playerLoad.bind(this));
     }
 
-    this.player.on(PLAYER_EVENT.LOADED_METADATA, this.loadedmetadata.bind(this));
+    if (this.events.videoload) {
+      this.player.on(PLAYER_EVENT.VIDEO_LOAD, this.videoload.bind(this));
+    }
   }
 
   track({ action, label, value = null, nonInteraction = false }) {
@@ -219,24 +208,10 @@ class AnalyticsPlugin {
   }
 
   resetState() {
-    this._currentSource = '';
     this._startTracked = false;
     this._endTracked = false;
   }
 
-  loadedmetadata() {
-    const src = this.player.currentSource().src;
-
-    if (src !== this._currentSource) {
-      this.resetState();
-      this._currentSource = src;
-
-      if (this.events.videoload) {
-        this.videoload();
-      }
-    }
-  }
-
 }
 
 export default function(opts = {}) {

src/mixins/eventable.js

@@ -3,6 +3,7 @@ import videojs from 'video.js';
 import './chapters.scss';
 import { getCloudinaryUrlPrefix } from '../cloudinary/common';
 import { utf8ToBase64 } from '../../utils/utf8Base64';
+import { appendQueryParams } from '../../utils/querystring';
 
 /**
  * Chapters plugin.
@@ -68,10 +69,11 @@ const ChaptersPlugin = (function () {
       return null;
     }
 
-    const { type: deliveryType } = this.player.cloudinary.source().resourceConfig();
+    const source = this.player.cloudinary.source();
+    const { type: deliveryType } = source.resourceConfig();
     const urlPrefix = getCloudinaryUrlPrefix(this.player.cloudinary.cloudinaryConfig());
     const fullUrl = `${urlPrefix}/_applet_/video_service/chapters/${deliveryType}/${utf8ToBase64(currentPublicId)}.vtt`;
-    return `${fullUrl}?t=${Date.now()}`;
+    return appendQueryParams(fullUrl, source.queryParams());
   };
 
   /**