Adds metadata event to Video Game Objects and a starting texture Fix #…

…6475

src/gameobjects/events/VIDEO_METADATA_EVENT.js

@@ -0,0 +1,21 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The Video Game Object Metadata Event.
+ *
+ * This event is dispatched when a Video has access to the metadata.
+ *
+ * Listen for it from a Video Game Object instance using `Video.on('metadata', listener)`.
+ *
+ * @event Phaser.GameObjects.Events#VIDEO_METADATA
+ * @type {string}
+ * @since 3.80.0
+ *
+ * @param {Phaser.GameObjects.Video} video - The Video Game Object which fired the event.
+ * @param {DOMException|string} event - The native DOM event the browser raised during playback.
+ */
+module.exports = 'metadata';

src/gameobjects/events/index.js

@@ -18,6 +18,7 @@ module.exports = {
     VIDEO_ERROR: require('./VIDEO_ERROR_EVENT'),
     VIDEO_LOCKED: require('./VIDEO_LOCKED_EVENT'),
     VIDEO_LOOP: require('./VIDEO_LOOP_EVENT'),
+    VIDEO_METADATA: require('./VIDEO_METADATA_EVENT'),
     VIDEO_PLAY: require('./VIDEO_PLAY_EVENT'),
     VIDEO_PLAYING: require('./VIDEO_PLAYING_EVENT'),
     VIDEO_SEEKED: require('./VIDEO_SEEKED_EVENT'),

src/gameobjects/video/Video.js

@@ -389,6 +389,16 @@ var Video = new Class({
          */
         this._loadCallbackHandler = this.loadErrorHandler.bind(this);
 
+        /**
+         * The locally bound callback handler specifically for the loadedmetadata event.
+         *
+         * @name Phaser.GameObjects.Video#_metadataCallbackHandler
+         * @type {function}
+         * @private
+         * @since 3.80.0
+         */
+        this._metadataCallbackHandler = this.metadataHandler.bind(this);
+
         /**
          * The internal crop data object, as used by `setCrop` and passed to the `Frame.setCropUVs` method.
          *
@@ -777,15 +787,19 @@ var Video = new Class({
             video.src = url;
         }
 
-        this.addLoadEventHandlers();
-
         this.retry = 0;
         this.video = video;
 
         this._playCalled = false;
 
         video.load();
 
+        this.addLoadEventHandlers();
+
+        var texture = this.scene.sys.textures.get(this._key);
+
+        this.setTexture(texture);
+
         return this;
     },
 
@@ -1004,6 +1018,7 @@ var Video = new Class({
         {
             video.addEventListener('error', this._loadCallbackHandler);
             video.addEventListener('abort', this._loadCallbackHandler);
+            video.addEventListener('loadedmetadata', this._metadataCallbackHandler);
         }
     },
 
@@ -1454,6 +1469,32 @@ var Video = new Class({
         this.emit(Events.VIDEO_ERROR, this, event);
     },
 
+    /**
+     * This internal method is called automatically when the video metadata is available.
+     *
+     * @method Phaser.GameObjects.Video#metadataHandler
+     * @fires Phaser.GameObjects.Events#VIDEO_METADATA
+     * @since 3.80.0
+     *
+     * @param {Event} event - The loadedmetadata Event.
+     */
+    metadataHandler: function (event)
+    {
+        var video = this.video;
+
+        if (this.scaleX !== 1)
+        {
+            this.scaleX = this.displayWidth / video.videoWidth;
+        }
+
+        if (this.scaleY !== 1)
+        {
+            this.scaleY = this.displayHeight / video.videoHeight;
+        }
+
+        this.emit(Events.VIDEO_METADATA, this, event);
+    },
+
     /**
      * This internal method is called automatically if the video stalls, for whatever reason.
      *