0

I am using video.js to play some videos inside a Vue.js app. The goal is to be able to play a single video followed by two smaller videos (usually ads) that may change over time. In order to make things easier to swap out, rather than having one long video with the primary content followed by two ads all baked into the same .mp4, we would like to simply play three videos back to back, the main one then the two ads. However, as much as possible, it should seem like they are all one long video.

I am currently achieving this to some extent by doing this:

<video id="my-video" preload="auto" class="video-js vjs-big-play-centered"
    controls poster="http://server.com/main.png">
    <source src="http://server.com/main.mp4" type="video/mp4">
</video>

window.videojs('my-video', function() {
    self.vjsVideo = this;
    let mode = 0;

    this.on('ended', () => {
        if (mode === 0) {
            // after main is done, play ad 1
            self.vjsVideo.src('http://server.com/ad1.mp4');
            self.vjsVideo.poster('img/ad1.png');
            self.vjsVideo.play();
            mode = 1;
        }
        else if (mode === 1) {
            // after ad 1 is done, play ad 2
            self.vjsVideo.src('http://server.com/ad2.mp4');
            self.vjsVideo.poster('img/ad2.png');
            self.vjsVideo.play();
            mode = 2;
        }
        else if (mode === 2) {
            // after ad 2 is done, go back to main content, but do not auto-play
            self.vjsVideo.src('http://server.com/main.mp4');
            self.vjsVideo.poster('http://server.com/main.png');
            mode = 0;
        }
    });
});

This gets the job done but the experience leaves a bit to be desired. The video player flashes black and the controls come and go. It's not as seamless as I would like. Including preload="auto" on the <video> tag helped but I'm wondering if there are other techniques I can use the make it work a bit better.

d512
  • 32,267
  • 28
  • 81
  • 107
  • possible solution: https://www.npmjs.com/package/videojs-playlist – Offbeatmammal Jun 25 '19 at 22:25
  • Yeah I found that library. Getting it to loop back to the beginning of the playlist worked but I don't want it to actually start playing through the playlist again. I wasn't able to get it to pause at the first video. The code above does that. – d512 Jun 26 '19 at 04:24
  • does https://github.com/brightcove/videojs-playlist/blob/HEAD/docs/api.md#playerplaylistrepeatboolean-val---boolean help? – Offbeatmammal Jun 27 '19 at 00:02
  • @Offbeatmammal I'm currently asking the maintainer of `videojs-playlist` about how to implement this. I'll update when I have more info. – d512 Jun 27 '19 at 21:28
  • Having multiple player (https://stackoverflow.com/a/55336072/334402) is a common approach to smooth the experience in case that helps your case. – Mick Jun 28 '19 at 16:31
  • @Mick Yeah, I tried that but it didn't respond well when the user went into full screen mode. – d512 Jun 28 '19 at 20:14

0 Answers0