How to add play button to next video in video.js with video.js-playlist plugin?

Question

JavaScript

I've tried everything I can - nothing helps. We need to add a button that will play the next video in the playlist. Here is the html:

<div class="lesson-video__player">
        <video id="my-video" class="video-js vjs-hls-quality-selector" poster="img/poster.jpg" data-setup='{}'>
               <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
                <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                <p class="vjs-no-js">
                       To view this video please enable JavaScript, and consider upgrading to a
                       web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">
                            supports HTML5 video
                        </a>
                  </p>
        </video>
</div>

javascript:

videojs('my-video', {
    controls: true,
    autoplay: false,
    preload: 'auto',
    playbackRates: [
        0.25,
        0.5,
        1,
        1.5,
        2,
    ],
    plugins: {
        hotkeys: {
            seekStep: 5,
        },
        hlsQualitySelector: {
            displayCurrentQuality: true,
        },
    },

    html5: {
        hlsjsConfig: {
            debug: true
        }
    }
    });

    videojs('my-video').playlist([
    {sources: [{
        src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
        type: 'video/mp4'
    }],
    poster: 'http://media.w3.org/2010/05/sintel/poster.png'
    },

    {
    sources: [{
      src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
      type: 'video/mp4'
    }],
    poster: 'http://media.w3.org/2010/05/bunny/poster.png'
    }, 
  
    {
    sources: [{
      src: 'http://vjs.zencdn.net/v/oceans.mp4',
      type: 'video/mp4'
    }],
    poster: 'http://www.videojs.com/img/poster.jpg'
    }, 
  
    {
    sources: [{
      src: 'http://media.w3.org/2010/05/bunny/movie.mp4',
      type: 'video/mp4'
    }],
    poster: 'http://media.w3.org/2010/05/bunny/poster.png'
    }, 
  
    {
    sources: [{
      src: 'http://media.w3.org/2010/05/video/movie_300.mp4',
      type: 'video/mp4'
    }],
    poster: 'http://media.w3.org/2010/05/video/poster.png'
}]);

videojs('my-video').playlist.autoadvance(0);

Thanks in advance)

Answer 1

Everything is in the documentation for the plugin .