dim icon indicating copy to clipboard operation
dim copied to clipboard

Pre-Roll

Open DesignsWithDavid opened this issue 3 years ago • 2 comments

Prior to playing videos, allow for a custom short clip (a.k.a. pre-roll) to be played. This is similar to how all Amazon and Netflix shows begin with their logo and theme music.

DesignsWithDavid avatar Jan 24 '22 17:01 DesignsWithDavid

This would be a great feature to add in. The main challenges right now is how to transition from the pre-roll to the video seamlessly without the video pausing in any way. Currently even plex has a noticeable video pause when the pre-roll ends and the player attempts to load the next video.

I wonder if we can leverage some mpeg-dash features to automatically handle all of this for us. Maybe theres a way to patch in a Period into the manifest and have dash.js seamlessly load the fragments of the next video as if the two streams are continuous. I am pretty sure we could leverage some libs that are built for injecting ads into a video stream.

Another way we could do this would be concatenating the pre-roll and the video being played at the ffmpeg level, ie we pass two input files to ffmpeg.

One issue that I see with this tho is that we will have to modify the way we track progress to account for pre-rolls. We will also have to change the way we pass timestamps around to account for pre-rolls and we will also have to change the way we pass chapter timestamps to also account for this.

vgarleanu avatar Jan 24 '22 18:01 vgarleanu

I am looked into this a bit more and it turns out that MPEG-DASH supports ad-insertion both on the client- and server-side. Doing this server-side may be preferable, but client-side would be easier (here's a good comparison of the two). Both would allow for insertions that are dependent on the specific user making the request while not altering the video timestamps or resulting in noticeable pausing.

Here is a reference implementation containing several variants of ad insertion in Dash.js.

EDIT: After exploring this reference implementation a little more, it seems that by far the easiest way to do this is with client-side rendering. The reference does this using two different video players where one exclusively plays the main video and the other exclusively plays the advertisement. The content is preloaded and the video players are alternated allowing only one to be visible at a time. This allows the video playback time to be unaltered and the switching delay to be unnoticeable.

DesignsWithDavid avatar Mar 18 '22 18:03 DesignsWithDavid