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

[Zuldek1994822]

https://reference.dashif.org/dash.js/v3.0.2/samples/ad-insertion/index.html

In this example, there is an example. Which one can I use for my needs?

I am making a request via javascript to my server. Ok, we know that there is an advertisement for this user that needs to be embedded in the current playback.

From the example on the link, what should I look at, is this particular example there?

I will spend forever trying to show ads in one video block and nothing will work out for me...

There is a lot of unrelated water in the documentation, I broke my eyes(...

[dsilhavy]

@Zuldek1994822 There is no structure in your posts, this is not a WhatsApp chat with a friend. Spaming this thread every few minutes, is not a good way to ask questions. Organize your thoughts and ask your questions in a mannered way. I am sure people are willing to help then.

[Zuldek1994822]

This is my mpd manifest

<?xml version='1.0' encoding='utf-8'?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011 http://standards.iso.org/ittf/PubliclyAvailableStandards/MPEG-DASH_schema_files/DASH-MPD.xsd" profiles="urn:mpeg:dash:profile:isoff-live:2011" type="static" mediaPresentationDuration="PT57.1S" maxSegmentDuration="PT9.0S" minBufferTime="PT20.8S">
	<ProgramInformation>
	</ProgramInformation>
	<ServiceDescription id="0">
	</ServiceDescription>
	<Period id="0" start="PT0.0S">
		<AdaptationSet id="0" contentType="video" startWithSAP="1" segmentAlignment="true" bitstreamSwitching="true" frameRate="23/1" maxWidth="1934" maxHeight="1080" par="120:67">
			<Representation id="1" mimeType="video/webm" codecs="vp09.00.11.08" bandwidth="60000" width="258" height="144" sar="2880:2881">
				<SegmentTemplate timescale="1000" initialization="init-$RepresentationID$.webm" media="sg-$RepresentationID$-$Number%05d$.webm" startNumber="1">
					<SegmentTimeline>
						<S t="7" d="10434" />
						<S d="10435" r="2" />
						<S d="10434" />
						<S d="4870" />
					</SegmentTimeline>
				</SegmentTemplate>
			</Representation>
		</AdaptationSet>
		<AdaptationSet id="1" contentType="audio" startWithSAP="1" segmentAlignment="true" bitstreamSwitching="true">
			<Representation id="0" mimeType="audio/webm" codecs="opus" bandwidth="128000" audioSamplingRate="48000">
				<AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2" />
				<SegmentTemplate timescale="1000" initialization="init-$RepresentationID$.webm" media="sg-$RepresentationID$-$Number%05d$.webm" startNumber="1">
					<SegmentTimeline>
						<S t="0" d="9001" />
						<S d="9000" r="4" />
						<S d="3128" />
					</SegmentTimeline>
				</SegmentTemplate>
			</Representation>
		</AdaptationSet>
	</Period>
</MPD>

A simple code in a couple of lines. Please help me.
What do I need to change in the manifest, and what will be the code?

In which, when clicking on the 'Start of advertising' button, the commercial will load and start. The most important thing is that you don't have to re-hang the 'laybackTimeUpdated' event

<style>.gl {width: 400px} #start_adv, #start {font-size:16px; border:1px solid #000; cursor: pointer; padding:10px; margin:10px 0}</style>
<script src='https://cdn.dashjs.org/latest/dash.all.min.js' rel='preload'></script>
<div class='gl'>
    <video id='videoPlayer' style='width: 100%'></video>
    <div id='start'>Start play</div>
    <div id='start_adv'>Start of advertising</div>
</div>
<script>
  window.addEventListener('DOMContentLoaded', _ => {
    var player = dashjs.MediaPlayer().create();
    player.initialize(document.querySelector("#videoPlayer"), '/uploads/video/917/manifest.mpd', true);

    function start_adv() {
         console.log("How to run ads in the video block so that you don't have to register a new one 'playbackTimeUpdated'");
    }

    document.querySelector("#start").onclick = _ => player.play();
    document.querySelector("#start_adv").onclick = _ => start_adv();

     player.on("playbackTimeUpdated", e => console.log(e.time));
  });
</script>

For all the attempts that I have made, it turned out to be done only with a live broadcast (manifesto). How do I do the same thing but with a static one?

Thank you very much in advance.

[dsilhavy]

Yes, the third parameter sets autoplay to false. You can also use setAutoPlay(false)

[Zuldek1994822]

If 2 players have been created, is it possible to find out which one is currently playing? In order not to create additional variables and not to add different classes and so on....

I do not understand in which cases it makes sense to resort to
this[type].getVideoElement()

When there are several video elements in one player and each of them is encoded by a different codec?

[dsilhavy]

The two players don't know about each other they act independently. So you need to manage them in your app. You also need to use two different video elements, one for each player. There is only one video element per player. Please check the example I linked above: https://reference.dashif.org/dash.js/v3.0.2/samples/ad-insertion/js/scte.js

[Zuldek1994822]

s it possible to make 2 video tags?
The main thing, the second one for displaying ads?
Should I use the same player control panel?

So that both tags have the same volume level?
So that you don't have to change the volume of the player when changing the playback volume for one player, also change the volume of the player for advertising?

[dsilhavy]

Yes, two video elements as pointed out multiple times above. Everything else you need to implement in your app, including the volume handling. You can grab the current volume before switching from one player to another. Then adjust the volume in the player that you are switching to.