Showing commercials

[Zuldek1994822]

Currently, I am creating a separate player to display advertising...

At the time when it is necessary to show advertising. I pause the main player, and put the player with advertising on top...

I just switched over and started learning dash technology.
Perhaps the ability to display advertising without creating additional players has already been implemented.
Please help me, send me a link to the documentation on how to enable advertising in the player? Load another manifest and enable it at a certain time...

I wasted a lot of time trying to find something similar on the topic...

[dsilhavy]

I suggest to check the ad-insertion guidelines of DASH-IF : https://dashif.org/guidelines/iop-v5/#part-5-ad-insertion

[Zuldek1994822]

		this.dsh = dashjs.MediaPlayer().create();
		this.dsh.initialize(this.v, (u=`/video/1/manifest.mpd`), true);

		this.v_adv = eCr('video', {style:'display:none', controlslist:'nodownload', after: this.v});
		this.dsh.on('urn:scte:scte35:2013:xml', scteEvent, this);
		(adv = dashjs.MediaPlayer().create()).initialize(this.v_adv, '/video/2/manifest.mpd', false);

		function scteEvent(e) {
			console.log('sdf');
		}
		
		start.onclick = d => {

			this.v.style.display = 'none';
			this.v_adv.style.display = 'block';

			this.v.pause();
			this.v = this.v_adv;
			(this.dsh = adv).play();
		
		}

Look at my code please.

It turned out that the second video was added and launched.

But I don't understand what the scteEvent function is for.

I'm probably doing something wrong.

Please tell me.

[Zuldek1994822]

This is how I achieve smooth progress

(pr = _ => {
    progress.style.width = (this.pr.clientWidth / 100 * (this.v.currentTime / this.dsh.duration() * 100);	
    requestAnimationFrame(pr)
})();

this.v.currentTime - is it possible to get it via this.dsh.currentTime()? You wouldn't have to do that
this.v = this.v_adv;

[dsilhavy]

But I don't understand what the scteEvent function is for.

For client-side ad-insertion the start and the end of an ad break can be signalled via SCTE35 markers. The function scteEvent registers for SCTE35 events that are signaled in the manifest or the media segments. That way the application knows when to start and when to stop an ad.

this.v.currentTime - is it possible to get it via this.dsh.currentTime()?

There is a function mediaplayer.getVideoElement() to access the video element directly. The function player.time() returns the current time as defined here: https://cdn.dashjs.org/latest/jsdoc/module-MediaPlayer.html#time

[Zuldek1994822]

		this.dsh = dashjs.MediaPlayer().create();
		this.dsh.initialize(this.v, (u='/video/1/manifest.mpd'), true);
		this.dsh.on('urn:scte:scte35:2013:xml', scteEvent, this);
		this.adv = dashjs.MediaPlayer().create();
		function scteEvent(dsh, adv) {
			let v = dsh.getVideoElement();
			v.style.display = 'none';
			dsh.pause();

			let v_adv = adv.getVideoElement();
			v_adv.style.display = 'block';
			(data.dsh = v_adv).play();
			this.update();	
		}
		
		//At 3 seconds, create an element, wait for canPlay and call scteEvent
		this.dsh.on("playbackTimeUpdated", e => {

			if(this.t != Math.round(e.time) && (this.t = Math.round(e.time)) && this.t % 3 == 0 && !this.v_adv  ) {

				this.v_adv = eCr('video', {style:'display:none', controlslist:'nodownload', after: this.v});
				this.adv.initialize(this.v_adv, '/video/2/manifest.mpd', false);

				this.adv.on("canPlay", _ => scteEvent(this.dsh, this.adv));		
				
			}
	    });

Please look, I'm clearly doing something wrong...

I call this.update() to re-register all listeners during the ad and at the end. Perhaps I'm doing it wrong?

[dsilhavy]

Sorry, I don't have the time to debug your code. Make sure that your manifest and/or your media segments contain SCTE35 events. Otherwise, the scteEvent function is never triggered.

If you trigger the scteEvent function manually, there is no need to re-register the listeners again. Just make sure that both player instances are initialized, and you registered for the SCTE events once. Whenever an SCTE event occurs dash.js will dispatch it to your application.

Btw: You can also initialize the player at the beginning, attach the video element and provide the URL to the MPD once playback should be started as shown here: https://reference.dashif.org/dash.js/latest/samples/getting-started/manual-load-with-custom-settings.html

[Zuldek1994822]

this.dsh.on(dashjs.MediaPlayer.events["MANIFEST_LOADED"], e => {
	(this.Quality = e.data.Period.AdaptationSet[0].Representation).push({frameRate:'auto', auto:true, lg:lg.auto_true})
});

I get an array of available video quality along with FrameRate. A FrameRate value for each stream is also provided to inform the user of the frame rate in a particular enabled state.

I'm probably doing this also incorrectly. Is it possible to request an array of all periods that contains
<AdaptationSet id="0" contentType="video" ****

Which will contain information about frame size, index and frameRate...?

[dsilhavy]

You can use the MANIFEST_LOADED event as you described above and then iterate over all periods.

Another way to access the manifest is calling player.getDashAdapter().getMpd() and then using the manifest property of this object