Блог

Я использую plyr для воспроизведения видео на YouTube. Я хотел бы скрыть data-plyr-provider определение из html-файла. Это всегда будет YouTube.

В настоящее время я использую этот код

 <div class="container">
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="somegoogleid"></div>
</div>
<script src='https://web.con/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
  

То, что я хочу скрыть, это код в красном поле

Я думал, что могу изменить plyr.min.js , который я использую, и жестко закодировать строку YouTube, но при просмотре кода я не могу этого сделать. Я имею в виду, что я не могу найти нужное место.

Единственная ссылка data-plyr-provider в .js, которую я нашел, — это эта строка

attributes: { embed: { provider: "data-plyr-provider", id: "data-plyr-embed-id" } },

Может кто-нибудь помочь? Где изменить код или есть ли какой-либо другой способ скрыть plyr.min.js

Я не уверен, что мне действительно нужно записывать это здесь, но нет официального способа передать атрибуты непосредственно в Plyr конструктор.

Итак, что вы можете сделать самостоятельно, затем измените строки следующим образом: на plyr.js внутри src/js/plyr.js закройте строки: #201, #205 и добавьте:

 this.provider = 'youtube'; // on line #202
  

Таким образом, вы можете создавать Plyr из источника «div».

iframe останется таким, какой он есть. Если вы предоставите iframe, он будет работать как есть.

В конце концов:

npm run build

Создайте свою собственную сборку, а затем используйте plyr.min.js из вашей папки dist со следующим:

 <div id="player" data-plyr-id="https://www.youtube.com/watch?v=SF0w2B6DNUE"></div>
  

 const player = new Plyr('#player');

// Expose player so it can be used from the console
window.player = player;
  

Вот так. Неофициальный способ создания спецификации plyr для youtube онлайн с помощью div creator =)

Обновление # 1:

Непосредственно перед внесением изменений, пожалуйста, проверьте последнюю производственную сборку. Это может сломаться, когда вы просто делаете это в главной ветке =)

Обновление # 2: Итак, поскольку вы сказали мне, что не знаете, как это сделать, я попытаюсь объяснить.

Итак, первым делом, пожалуйста, посетите https://github.com/sampotts/plyr

Скопируйте ссылку с изображения:

После этого;

• Откройте терминал и укажите путь к вашему коду.
• Тип git clone https://github.com/sampotts/plyr.git
• Подождите, пока он не завершится, и введите cd plyr
• Установите зависимости с помощью npm i
• откройте текущий каталог с помощью какой-либо IDE (может быть vscode, sublime или любым другим, который вы используете для кодирования.) ( code . откроет его с помощью VSCode)

После этого откройте файл со следующей картинки:

Перейдите к строке # 202, и вы увидите следующее:

Здесь, если вы посмотрите, вы увидите, что эта часть кода на самом деле предназначена для type div в любом случае. Как вы можете видеть, вы получаете поставщика из строки # 201:

this.provider = this.media.getAttribute(this.config.attributes.embed.provider)

Итак, прокомментируйте эту строку (# 201) и добавьте следующее в строку # 202

this.provider = 'youtube';

А также не забудьте прокомментировать строку # 204, которая дает нам конечный результат:

После этих изменений (я полагаю, вы node установили)

• Сохраните внесенные изменения.
• Снова откройте терминал.
• проверьте последнюю производственную сборку с помощью git checkout v3.6.2
• добавьте изменения в git через git add .
• создайте коммит с помощью git commit -m "provider set to youtube only"
• затем создайте код с помощью npm run build

После этих шагов у вас будет встроенный код из ваших файлов js и css из dist папки.

Пожалуйста, сделайте резервную копию ваших js-файлов, прежде чем выполнять следующие действия:

• Скопируйте необходимые файлы из dist/ папки на свой сервер. (plyr.min.js и plyr.css)
• После всего, что вы сделали,

Вы должны иметь возможность использовать все сверху.

Я надеюсь, что вы могли бы, наконец, использовать его =)

Обновление # 3:

Давайте также добавим грязный способ сделать это от @Steve

@Radek, если вы пойдете по этому пути, вы должны пройти все шаги, если у вас есть время, но если вы ищете что-то быстрое и грязное, вы можете выполнить поиск plyr.min.js для

this.provider=this.media.getAttribute(this.config.attributes.embed.provider),this.media.removeAttribute(this.config.attributes.embed.provider)

и заменить его на

this.provider='youtube'