trigger PLAYBACK_WAITING event when 'waiting' event is raised on video element

Author: bbert

build/typings/index.d.ts

@@ -256,6 +256,7 @@ declare namespace dashjs {
         PLAYBACK_SEEKING: 'playbackSeeking';
         PLAYBACK_STARTED: 'playbackStarted';
         PLAYBACK_TIME_UPDATED: 'playbackTimeUpdated';
+        PLAYBACK_WAITING: 'playbackWaiting';
         PROTECTION_CREATED: 'public_protectioncreated';
         PROTECTION_DESTROYED: 'public_protectiondestroyed';
         TRACK_CHANGE_RENDERED: 'trackChangeRendered';
@@ -462,6 +463,11 @@ declare namespace dashjs {
         timeToEnd: number;
     }
 
+    export interface PlaybackWaitingEvent extends Event {
+        type: MediaPlayerEvents['PLAYBACK_WAITING'];
+        playingTime: number | null;
+    }
+
     export interface ProtectionCreatedEvent extends Event {
         type: MediaPlayerEvents['PROTECTION_CREATED'];
         controller: object;

index.d.ts

@@ -256,6 +256,7 @@ declare namespace dashjs {
         PLAYBACK_SEEKING: 'playbackSeeking';
         PLAYBACK_STARTED: 'playbackStarted';
         PLAYBACK_TIME_UPDATED: 'playbackTimeUpdated';
+        PLAYBACK_WAITING: 'playbackWaiting';
         PROTECTION_CREATED: 'public_protectioncreated';
         PROTECTION_DESTROYED: 'public_protectiondestroyed';
         TRACK_CHANGE_RENDERED: 'trackChangeRendered';
@@ -462,6 +463,11 @@ declare namespace dashjs {
         timeToEnd: number;
     }
 
+    export interface PlaybackWaitingEvent extends Event {
+        type: MediaPlayerEvents['PLAYBACK_WAITING'];
+        playingTime: number | null;
+    }
+
     export interface ProtectionCreatedEvent extends Event {
         type: MediaPlayerEvents['PROTECTION_CREATED'];
         controller: object;

samples/getting-started-basic-embed/listening-to-events.html

@@ -127,6 +127,7 @@
             <option>PLAYBACK_SEEKING</option>
             <option>PLAYBACK_STARTED</option>
             <option>PLAYBACK_TIME_UPDATED</option>
+            <option>PLAYBACK_WAITING</option>
             <option>STREAM_INITIALIZED</option>
             <option>TEXT_TRACK_ADDED</option>
             <option>TEXT_TRACKS_ADDED</option>

src/streaming/MediaPlayerEvents.js

@@ -46,12 +46,14 @@ class MediaPlayerEvents extends EventsBase {
          * Check delay property in payload to determine time before playback will start.
          */
         this.AST_IN_FUTURE = 'astInFuture';
+
         /**
          * Triggered when the video element's buffer state changes to stalled.
          * Check mediaType in payload to determine type (Video, Audio, FragmentedText).
          * @event MediaPlayerEvents#BUFFER_EMPTY
          */
         this.BUFFER_EMPTY = 'bufferStalled';
+
         /**
          * Triggered when the video element's buffer state changes to loaded.
          * Check mediaType in payload to determine type (Video, Audio, FragmentedText).
@@ -76,52 +78,62 @@ class MediaPlayerEvents extends EventsBase {
          * @event MediaPlayerEvents#FRAGMENT_LOADING_COMPLETED
          */
         this.FRAGMENT_LOADING_COMPLETED = 'fragmentLoadingCompleted';
+
         /**
          * Triggered when a fragment download has started.
          * @event MediaPlayerEvents#FRAGMENT_LOADING_STARTED
          */
         this.FRAGMENT_LOADING_STARTED = 'fragmentLoadingStarted';
+
         /**
          * Triggered when a fragment download is abandoned due to detection of slow download base on the ABR abandon rule..
          * @event MediaPlayerEvents#FRAGMENT_LOADING_ABANDONED
          */
         this.FRAGMENT_LOADING_ABANDONED = 'fragmentLoadingAbandoned';
+
         /**
          * Triggered when {@link module:Debug} log method is called.
          * @event MediaPlayerEvents#LOG
          */
         this.LOG = 'log';
+
         //TODO refactor with internal event
         /**
          * Triggered when the manifest load is complete
          * @event MediaPlayerEvents#MANIFEST_LOADED
          */
         this.MANIFEST_LOADED = 'manifestLoaded';
+
         /**
          * Triggered anytime there is a change to the overall metrics.
          * @event MediaPlayerEvents#METRICS_CHANGED
          */
         this.METRICS_CHANGED = 'metricsChanged';
+
         /**
          * Triggered when an individual metric is added, updated or cleared.
          * @event MediaPlayerEvents#METRIC_CHANGED
          */
         this.METRIC_CHANGED = 'metricChanged';
+
         /**
          * Triggered every time a new metric is added.
          * @event MediaPlayerEvents#METRIC_ADDED
          */
         this.METRIC_ADDED = 'metricAdded';
+
         /**
          * Triggered every time a metric is updated.
          * @event MediaPlayerEvents#METRIC_UPDATED
          */
         this.METRIC_UPDATED = 'metricUpdated';
+
         /**
          * Triggered at the stream end of a period.
          * @event MediaPlayerEvents#PERIOD_SWITCH_COMPLETED
          */
         this.PERIOD_SWITCH_COMPLETED = 'periodSwitchCompleted';
+
         /**
          * Triggered when a new period starts.
          * @event MediaPlayerEvents#PERIOD_SWITCH_STARTED
@@ -169,6 +181,7 @@ class MediaPlayerEvents extends EventsBase {
          * @event MediaPlayerEvents#TEXT_TRACKS_ADDED
          */
         this.TEXT_TRACKS_ADDED = 'allTextTracksAdded';
+
         /**
          * Triggered when a text track is added to the video element's TextTrackList
          * @event MediaPlayerEvents#TEXT_TRACK_ADDED
@@ -201,46 +214,54 @@ class MediaPlayerEvents extends EventsBase {
          * @event MediaPlayerEvents#PLAYBACK_ERROR
          */
         this.PLAYBACK_ERROR = 'playbackError';
+
         /**
          * Sent when playback is not allowed (for example if user gesture is needed).
          * @event MediaPlayerEvents#PLAYBACK_NOT_ALLOWED
          */
         this.PLAYBACK_NOT_ALLOWED = 'playbackNotAllowed';
+
         /**
          * The media's metadata has finished loading; all attributes now
          * contain as much useful information as they're going to.
          * @event MediaPlayerEvents#PLAYBACK_METADATA_LOADED
          */
         this.PLAYBACK_METADATA_LOADED = 'playbackMetaDataLoaded';
+
         /**
          * Sent when playback is paused.
          * @event MediaPlayerEvents#PLAYBACK_PAUSED
          */
         this.PLAYBACK_PAUSED = 'playbackPaused';
+
         /**
          * Sent when the media begins to play (either for the first time, after having been paused,
          * or after ending and then restarting).
          *
          * @event MediaPlayerEvents#PLAYBACK_PLAYING
          */
         this.PLAYBACK_PLAYING = 'playbackPlaying';
+
         /**
          * Sent periodically to inform interested parties of progress downloading
          * the media. Information about the current amount of the media that has
          * been downloaded is available in the media element's buffered attribute.
          * @event MediaPlayerEvents#PLAYBACK_PROGRESS
          */
         this.PLAYBACK_PROGRESS = 'playbackProgress';
+
         /**
          * Sent when the playback speed changes.
          * @event MediaPlayerEvents#PLAYBACK_RATE_CHANGED
          */
         this.PLAYBACK_RATE_CHANGED = 'playbackRateChanged';
+
         /**
          * Sent when a seek operation completes.
          * @event MediaPlayerEvents#PLAYBACK_SEEKED
          */
         this.PLAYBACK_SEEKED = 'playbackSeeked';
+
         /**
          * Sent when a seek operation begins.
          * @event MediaPlayerEvents#PLAYBACK_SEEKING
@@ -260,11 +281,20 @@ class MediaPlayerEvents extends EventsBase {
          * @event MediaPlayerEvents#PLAYBACK_STARTED
          */
         this.PLAYBACK_STARTED = 'playbackStarted';
+
         /**
          * The time indicated by the element's currentTime attribute has changed.
          * @event MediaPlayerEvents#PLAYBACK_TIME_UPDATED
          */
         this.PLAYBACK_TIME_UPDATED = 'playbackTimeUpdated';
+
+        /**
+         * Sent when the media playback has stopped because of a temporary lack of data.
+         *
+         * @event MediaPlayerEvents#PLAYBACK_WAITING
+         */
+        this.PLAYBACK_WAITING = 'playbackWaiting';
+
         /**
          * Manifest validity changed - As a result of an MPD validity expiration event.
          * @event MediaPlayerEvents#MANIFEST_VALIDITY_CHANGED

src/streaming/controllers/PlaybackController.js

@@ -381,6 +381,13 @@ function PlaybackController() {
         });
     }
 
+    function onPlaybackWaiting() {
+        log('Native video element event: waiting');
+        eventBus.trigger(Events.PLAYBACK_WAITING, {
+            playingTime: getTime()
+        });
+    }
+
     function onPlaybackPlaying() {
         log('Native video element event: playing');
         eventBus.trigger(Events.PLAYBACK_PLAYING, {
@@ -557,6 +564,7 @@ function PlaybackController() {
     function addAllListeners() {
         videoModel.addEventListener('canplay', onCanPlay);
         videoModel.addEventListener('play', onPlaybackStart);
+        videoModel.addEventListener('waiting', onPlaybackWaiting);
         videoModel.addEventListener('playing', onPlaybackPlaying);
         videoModel.addEventListener('pause', onPlaybackPaused);
         videoModel.addEventListener('error', onPlaybackError);
@@ -572,6 +580,7 @@ function PlaybackController() {
     function removeAllListeners() {
         videoModel.removeEventListener('canplay', onCanPlay);
         videoModel.removeEventListener('play', onPlaybackStart);
+        videoModel.removeEventListener('waiting', onPlaybackWaiting);
         videoModel.removeEventListener('playing', onPlaybackPlaying);
         videoModel.removeEventListener('pause', onPlaybackPaused);
         videoModel.removeEventListener('error', onPlaybackError);