Как воспроизводить видео вплотную с помощью video.js - PullRequest
Новая
       18

Как воспроизводить видео вплотную с помощью video.js

0 голосов
/ 26 июня 2019

Я использую video.js для воспроизведения некоторых видео в приложении Vue.js. Цель состоит в том, чтобы иметь возможность воспроизвести одно видео, за которым следуют два небольших видео (обычно рекламы), которые могут со временем меняться. Чтобы облегчить обмен, вместо того, чтобы иметь одно длинное видео с основным контентом, за которым следуют две рекламы, вставленные в один и тот же .mp4, мы хотели бы просто воспроизвести три видео подряд, основное, а затем два Объявления. Однако, насколько это возможно, должно показаться, что все они - одно длинное видео.

В настоящее время я в некоторой степени достигаю этого, выполняя: 

<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;
        }
    });
});

Это делает работу, но опыт оставляет желать лучшего. Видеоплеер мигает черным, и элементы управления приходят и уходят. Это не так легко, как хотелось бы. Помогло включение preload="auto" в тег <video>, но мне интересно, есть ли другие методы, которые я могу использовать, чтобы заставить его работать немного лучше.

...