видео js плагины отображается несколько раз на панели управления - PullRequest
Новая
       196

видео js плагины отображается несколько раз на панели управления

0 голосов
/ 07 августа 2020

Мне пришлось отображать видео на моем Angular веб-сайте, и я использовал проигрыватель видео js для отображения. Видео имеет несколько переключателей скорости передачи данных, поэтому я использовал плагин video js -hls-quality-selector, а для панели поиска я использовал кнопки video js -seek-buttons. все работает правильно на настольном компьютере, но когда я открываю плеер на мобильном устройстве, он показывает 2-кратную полосу поиска и 2-кратный селектор качества на панели управления.

Ниже приведен код, который я использовал

Код TypeScript: 

import videojs from 'video.js';
import 'videojs-seek-buttons';
import 'videojs-contrib-quality-levels';
import videojsqualityselector from 'videojs-hls-quality-selector';


videoJSPlayer: videojs.Player;

this.videoJSPlayer = videojs('content_video', {
      aspectRatio: '16:9',
      fluid: true,
      controlBar: {
        'pictureInPictureToggle': false
      },
      html5: {
        hls: {
          overrideNative: true,
        }
      },
      sources: [{
        src: this.vSource,
        type: 'application/x-mpegURL'
      }],
      poster: this.vThumb
});

this.videoJSPlayer.seekButtons({
      forward: 30,
      back: 10
});

this.videoJSPlayer.hlsQualitySelector = videojsqualityselector;
this.videoJSPlayer.hlsQualitySelector({
      displayCurrentQuality: true,
});

HTML код: 

<video id="content_video" class="video-js vjs-default-skin" controls preload="none"
        data-setup='{ "aspectRatio":"640:267", "playbackRates": [0.5, 1, 1.5, 2]}'>
</video>

Я приложил скриншот для справки:

введите описание изображения здесь

1 Ответ

0 голосов
/ 08 августа 2020

Я не уверен на 100%, что это проблема, но предполагаю, что это потому, что по умолчанию video. js автоматически инициализирует любой video элемент с параметром data-setup.

По умолчанию, когда ваша веб-страница завершает загрузку, Video. js будет сканировать мультимедийные элементы, которые имеют атрибут data-setup. Атрибут data-setup используется для передачи параметров в Video. js. https://docs.videojs.com/tutorial-setup.html

Я предполагаю, что плагин кнопок поиска перехватывает какое-то событие, которое происходит при инициализации видеоплеера, и добавляет кнопки. Поскольку вы затем инициализируете его в коде, они добавляются дважды. Скорее всего, вам просто нужно удалить атрибут data-setup и переместить любую конфигурацию, которую вы хотите сохранить, в javascript.

...