@Osman228
Веб-разработчик

Как добавить кнопку перелистывания на следующее видео в video.js с плагином video.js-playlist?

Перепробовал всё-что можно - ничего не помогает. Нужно добавить кнопку, которая будет включать следующее видео в плейлисте. Вот 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);

Заранее спасибо)
  • Вопрос задан
  • 285 просмотров
Пригласить эксперта
Ответы на вопрос 1
FFxSquall
@FFxSquall
Могу писать код, могу не писать
Всё есть в документации к плагину
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы