diff --git a/src/record/observer.ts b/src/record/observer.ts index 30db7f83..c3563973 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -482,17 +482,22 @@ function initMediaInteractionObserver( blockClass: blockClass, mirror: Mirror, ): listenerHandler { - const handler = (type: 'play' | 'pause') => (event: Event) => { + const handler = (type: MediaInteractions ) => (event: Event) => { const target = getEventTarget(event); if (!target || isBlocked(target as Node, blockClass)) { return; } mediaInteractionCb({ - type: type === 'play' ? MediaInteractions.Play : MediaInteractions.Pause, + type, id: mirror.getId(target as INode), + currentTime: (target as HTMLMediaElement).currentTime }); }; - const handlers = [on('play', handler('play')), on('pause', handler('pause'))]; + const handlers = [ + on('play', handler(MediaInteractions.Play)), + on('pause', handler(MediaInteractions.Pause)), + on('seeked', handler(MediaInteractions.Seeked)) + ]; return () => { handlers.forEach((h) => h()); }; diff --git a/src/replay/index.ts b/src/replay/index.ts index cbcc8fd8..7efca491 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -906,17 +906,18 @@ export class Replayer { } const mediaEl = (target as Node) as HTMLMediaElement; try { + if (d.currentTime) { + mediaEl.currentTime = d.currentTime; + } if (d.type === MediaInteractions.Pause) { mediaEl.pause(); } if (d.type === MediaInteractions.Play) { - if (mediaEl.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) { - mediaEl.play(); - } else { - mediaEl.addEventListener('canplay', () => { - mediaEl.play(); - }); - } + // remove listener for 'canplay' event because play() is async and returns a promise + // i.e. media will evntualy start to play when data is loaded + // 'canplay' event fires even when currentTime attribute changes which may lead to + // unexpeted behavior + mediaEl.play(); } } catch (error) { if (this.config.showWarning) { diff --git a/src/types.ts b/src/types.ts index 0a040e3b..88a8fe4e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -474,11 +474,13 @@ export type inputCallback = (v: inputValue & { id: number }) => void; export const enum MediaInteractions { Play, Pause, + Seeked, } export type mediaInteractionParam = { type: MediaInteractions; id: number; + currentTime?: number }; export type mediaInteractionCallback = (p: mediaInteractionParam) => void; diff --git a/typings/types.d.ts b/typings/types.d.ts index a71df5b9..735071b1 100644 --- a/typings/types.d.ts +++ b/typings/types.d.ts @@ -334,11 +334,13 @@ export declare type inputCallback = (v: inputValue & { }) => void; export declare const enum MediaInteractions { Play = 0, - Pause = 1 + Pause = 1, + Seeked = 2 } export declare type mediaInteractionParam = { type: MediaInteractions; id: number; + currentTime?: number; }; export declare type mediaInteractionCallback = (p: mediaInteractionParam) => void; export declare type DocumentDimension = {