How to get AWS ID3 Marker in shaka player?

[fakeDev9]

Have you read the Tutorials? Yes

Have you read the FAQ and checked for duplicate open issues? Yes

If the question is related to FairPlay, have you read the tutorial?

No

What version of Shaka Player are you using? 4.10.9

What browser and OS are you using? Chrome on iOS

Please ask your question how to get id3 marker in player

[f1multiviewer]

You can listen for ID3 markers like so:

player.addEventListener("metadata", (event) => {
  console.log(event)
});

See the documentation

[fakeDev9]

@f1multiviewer

i put id3 live stream image but i don't get below event

S { startTime: 68.39066700000001, endTime: 72, metadataType: 'org.id3', payload: { …}, bubbles: false, … } bubbles: false cancelable: false currentTarget: X { Ga: eb, Ke: X, l: 2, h: video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video, Hf: div #video_player_html_active.html_active.shaka - video - container, … } defaultPrevented: false endTime: 72 g: false isTrusted: false metadataType: "org.id3" payload: { key: 'PRIV', description: 'com.elementaltechnologies.timestamp.utc', data: ArrayBuffer(29), mimeType: null, pictureType: null } startTime: 68.39066700000001 target: X $f: Ub { g: null, h: ƒ } A: kl { s: NaN, l: NaN, P: NaN, O: NaN, M: NaN, … } Aa: Xf { A: '', C: '', i: 2, j: 'AUTO', G: false, … } C: Kh { G: { …}, J: Set(0), u: null, m: null, aa: true, … } Fa: null Fh: null G: Tk A: ƒ() C: 0 g: Ck { i: 1722836180.127, A: 6, j: Infinity, s: 6, g: 6, … } h: Lk { g: video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video, l: 6.023000001907349, m: ƒ, u: ƒ, j: ƒ, … } i: video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video j: Hk { g: video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video, C: Ck, u: { …}, l: qd, A: ƒ, … } l: { retryParameters: { …}, rebufferingGoal: 0.01, bufferingGoal: 10, bufferBehind: 30, failureCallback: ƒ, … } m: Ub { g: Tb, h: ƒ } s: Dk { l: Gk, u: true, g: 188.334142, m: 1722836382.218, j: ƒ, … } u: null[[Prototype]]: Object Ga: eb { g: { …} } Gf: ui g: Kh { G: { …}, J: Set(0), u: null, m: null, aa: true, … } h: abr: { enabled: true, useNetworkInformation: true, defaultBandwidthEstimate: 1000000, switchInterval: 8, andwidthUpgradeTarget: 0.85, … } abrFactory: ƒ() ads: { customPlayheadTracker: false, skipPlayDetection: false, supportsMultipleMediaElements: true } autoShowText: 3 cmcd: { enabled: false, sessionId: '', contentId: '', rtpSafetyFactor: 5, useHeaders: false, … } cmsd: { enabled: true, applyMaximumSuggestedBitrate: true, estimatedThroughputWeightRatio: 0.5 } drm: { retryParameters: { …}, servers: { …}, clearKeys: { …}, advanced: { …}, delayLicenseRequestUntilPlayed: false, … } lcevc: { enabled: false, dynamicPerformanceScaling: true, logLevel: 0, drawLogo: false } manifest: { retryParameters: { …}, availabilityWindowOverride: NaN, disableAudio: false, disableVideo: false, disableText: false, … } mediaSource: { codecSwitchingStrategy: 'smooth', forceTransmux: false, insertFakeEncryptionInInit: true, addExtraFeaturesToSourceBuffer: ƒ, modifyCueCallback: ƒ } offline: { usePersistentLicense: true, numberOfParallelDownloads: 5, trackSelectionCallback: ƒ, downloadSizeCallback: ƒ, progressCallback: ƒ } playRangeEnd: Infinity playRangeStart: 0 preferForcedSubs: false preferSpatialAudio : false preferredAudioChannelCount : 2 preferredAudioCodecs : [] preferredAudioLabel : "" preferredAudioLanguage : "" preferredDecodingAttributes : [] preferredTextLanguage : "" preferredTextRole : "" preferredVariantRole : "" preferredVideoCodecs : [] preferredVideoHdrLevel : "AUTO" preferredVideoLabel : "" preferredVideoLayout : "" restrictions : { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity, minPixels: 0, … } streaming : { retryParameters: { …}, rebufferingGoal: 0.01, bufferingGoal: 10, bufferBehind: 30, failureCallback: ƒ, … } textDisplayFactory : ƒ() textDisplayer : { captionsUpdatePeriod: 0.25 } [ [Prototype] ]: Object i : { width: Infinity, height: Infinity } [ [Prototype] ]: Object H : Tv { h: { …}, g: { …}, C: 8, u: Map(0), I: Map(0), … } Ha : true Hf : div #video_player_html_active.html_active.shaka - video - container I : Nj { i: video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video, aa: { …}, A: { …}, H: qn, h: { …}, … } Ia : qd { g: eb } J : xg { Ga: eb, Ke: xg, i: false, m: vg, g: Set(0), … } Jf : Ub { g: Tb, h: ƒ } K : bl { g: { …}, j: false, i: 1, h: Ub } Kb : "" Ke : X { Ga: eb, Ke: X, l: 2, h: video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video, Hf: div #video_player_html_active.html_active.shaka - video - container, … } Kf : Ub { g: null, h: ƒ } L : null Lb : dl { h: video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video, g: Set(1), i: Ub } Le : qd { g: eb } Lf : [] M : gg { g: 1, i: Map(2), h: 1722836198383 } Me : 2 Nb : null Ne : -1 O : An { h: { …}, g: { …}, m: undefined, i: true, l: false, … } P : null S : NaN W : $n g : null h : [] [ [Prototype] ]: Object Xa : ƒ() Xf : "application/x-mpegurl" Y : null Yf : ƒ() Zf : 1000000000 aa : "https://d2yzvmxrufehle.cloudfront.net/v1/master/59e28ad99d415e8986bc15766c5585d319844fe3/24bee02b-d8c2-44af-965f-67045241e169/out/v1/3deaebb55ce6492f85f3912b0439c507/index.m3u8?aws.sessionId=947ab064-2fde-477d-bb86-192a0bad10bc" cg : false ea : Un { h: { …}, g: null } g : abr: { enabled: true, useNetworkInformation: true, defaultBandwidthEstimate: 1000000, switchInterval: 8, bandwidthUpgradeTarget: 0.85, … } abrFactory : ƒ() ads : { customPlayheadTracker: false, skipPlayDetection: false, supportsMultipleMediaElements: true } autoShowText : 3 cmcd : { enabled: false, sessionId: '', contentId: '', rtpSafetyFactor: 5, useHeaders: false, … } cmsd : { enabled: true, applyMaximumSuggestedBitrate: true, estimatedThroughputWeightRatio: 0.5 } drm : { retryParameters: { …}, servers: { …}, clearKeys: { …}, advanced: { …}, delayLicenseRequestUntilPlayed: false, … } lcevc : { enabled: false, dynamicPerformanceScaling: true, logLevel: 0, drawLogo: false } manifest : { retryParameters: { …}, availabilityWindowOverride: NaN, disableAudio: false, disableVideo: false, disableText: false, … } mediaSource : { codecSwitchingStrategy: 'smooth', forceTransmux: false, insertFakeEncryptionInInit: true, addExtraFeaturesToSourceBuffer: ƒ, modifyCueCallback: ƒ } offline : { usePersistentLicense: true, numberOfParallelDownloads: 5, trackSelectionCallback: ƒ, downloadSizeCallback: ƒ, progressCallback: ƒ } playRangeEnd : Infinity playRangeStart : 0 preferForcedSubs : false preferSpatialAudio : false preferredAudioChannelCount : 2 preferredAudioCodecs : [] preferredAudioLabel : "" preferredAudioLanguage : "" preferredDecodingAttributes : [] preferredTextLanguage : "" preferredTextRole : "" preferredVariantRole : "" preferredVideoCodecs : [] preferredVideoHdrLevel : "AUTO" preferredVideoLabel : "" preferredVideoLayout : "" restrictions : { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity, minPixels: 0, … } streaming : { retryParameters: { …}, rebufferingGoal: 0.01, bufferingGoal: 10, bufferBehind: 30, failureCallback: ƒ, … } textDisplayFactory : ƒ() textDisplayer : { captionsUpdatePeriod: 0.25 } [ [Prototype] ]: Object h : video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video ha : { width: Infinity, height: Infinity } i : gapCount: 0 ignoreManifestTimestampsInSegmentsMode : false imageStreams : [] isLowLatency : false minBufferTime : 0 nextUrl : null offlineSessionIds : [] periodCount : 1 presentationTimeline : Ck { i: 1722836180.127, A: 6, j: Infinity, s: 6, g: 6, … } sequenceMode : true serviceDescription : null textStreams : [] type : "HLS" variants : (2)[{ …}, { …}] [ [Prototype] ]: Object j : Ll A : false C : 1 G : true H : false I : { projection: null, hfov: null } J : 0 K : kg { l: 2, j: 100, s: 0.5, m: 2, g: 1, … } L : 1722836197.328 M : Infinity O : 0 g : { oa: Nj, jc: xg, Ye: ƒ, getBandwidthEstimate: ƒ, Ua: ƒ, … } h : { retryParameters: { …}, rebufferingGoal: 0.01, bufferingGoal: 10, bufferBehind: 30, failureCallback: ƒ, … } i : Map(1) { 'video' => { …} } j : { id: 6, language: 'und', disabledUntilTime: 0, primary: false, audio: null, … } l : { presentationTimeline: Ck, variants: Array(2), textStreams: Array(0), imageStreams: Array(0), offlineSessionIds: Array(0), … } m : Kg { g: false, h: Promise, i: ƒ } s : Map(0) { size: 0 } u : null[[Prototype]]: Object je : null l : 2 le : xl { Ga: eb, Ke: xl, g: Set(0), h: Ub, i: ƒ } m : qd { g: eb } oe : qd { g: eb } pb : qd { g: eb } qa : false ra : null re : [] s : Jf A : ƒ(E, K, N) C : 1 G : Ub { g: Tb, h: ƒ } H : qd { g: eb } I : true g : { enabled: true, useNetworkInformation: true, defaultBandwidthEstimate: 1000000, switchInterval: 8, bandwidthUpgradeTarget: 0.85, … } h : ResizeObserver {} i : pd { h: nd, j: nd, g: 7080498, i: 128000, l: 16000 } j : 1722836343399 l : Un { h: { …}, g: null } m : true s : video #my_video_1.video - js.vjs_width.vjs - default -skin.shaka - video u : (2)[{ …}, { …}] [ [Prototype] ]: Object sa : null u : xq { Ga: eb, Ke: xq, j: Xp, i: null, h: jq, … } ue : false ve : "" xa : ƒ() ze : [] [ [Prototype] ]: fb timeStamp : 70272.5 type : "metadata" [ [Prototype] ]: Object

[avelad]

@f1multiviewer 's answer is correct, if that doesn't work please there will be a bug issue so we can investigate the problem