EMP player can play server-side stitched ads in HLS without DRM.

It also support VAST, “Video Ad Serving Template,” is a script that gives video players information about which ad to play, how the ad should show up, how long it should last, and whether users are able to skip it.

This is done with Yospace SDK which is inluded in the emp-yospace.js module.

To use Ad-insertion add these script to you index page or import with ES6

<script src="js/emp-player-all.min.js"></script>
<script src="emp/js/emp-hls-mse.js"></script> // To be able to play HLS with Chrome, Edge, IE11 and Firefox 
<script src="emp/js/emp-yospace.js"></script>

If you don't need support for MPEG-DASH and Chromecast (for the moment Chromecast don't support Ad-insertion)

Then use these modules:

<script src="video-js/video.js"></script>
<script src="js/emp-player.js"></script>
<!-- Techs -->
<script src="emp/js/emp-hls.js"></script>
<script src="emp/js/emp-hls-mse.js"></script>
<script src="emp/js/emp-yospace.js"></script>

You play Ad-streams as you normally do, See Getting Started

Assets with Ad's will receive a VMAP XML document (VIDEO MULTIPLE AD PLAYLIST ) instead of a manifest file (m3u8).

You can also play externa Yospace Streams:
A Yospace stream is a VMAP XML document.

<video id="my-player" class="video-js" controls autoplay>
     <source src="[YospaceStream url]" type="application/yospace">
</video>

or

    demoPlayer = new empPlayer('#video', options);
    demoPlayer.src({ src: '[YospaceStream url]', type: 'application/yospace' });

Restrictions for Ad's

Yospace sdk handle restrictions for Ad's

• canSeekTo
• canStart
• canStop
• canPause
• canSeek
• canSkip
• canMute
• canChangeFullScreen
• canClickThrough

During Ad break you can not seek or ship if the restriction say so.

AD markers are added to the timeline in the control bar.

Theses marker can be styled or removed by override emp-player.css

.emp-ad-marker {
    position: absolute;
    display: block;
    width: 0;
    height: 0.3em;
    background-color: rgba(51, 122, 183, 0.75);
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}

.emp-ad-marker.emp-ad-past {
    background-color: rgba(51, 122, 183, 0.25);
}