Как добавить кнопку загрузки в видеоплеер с Plyr JS? - PullRequest
Новая
       31

Как добавить кнопку загрузки в видеоплеер с Plyr JS?

0 голосов
/ 05 декабря 2018

Я использую Plyr JS и хочу предоставить опцию download для каждого video.

Вот что я пытался сделать доступным download option:

несмотря на то, что я предоставил: controlsList="nodownload"

<video controls crossorigin playsinline controlsList="nodownload" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
     <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
</video>

Вопрос: Как мне сделать опцию download дляпоявляются с использованием Plyr.io только плагина?

Вот мое демо: https://codepen.io/msolimans/pen/xQEjmX

Ответы [ 3 ]

0 голосов
/ 08 декабря 2018

Вы уже пробовали авторское решение : https://github.com/sampotts/plyr/issues/193#issuecomment-432629429

Вы можете включить его в настройках управления, добавив загрузку.Он автоматически укажет на текущий источник и откроется в новом окне.Вы также можете указать пользовательский URL-адрес в параметре urls, в частности, задав свойство urls.download - например, 

const player = new Plyr('#player', {
  urls: {
    download: 'https://example.com/path/to/download',
  },
});

Пользовательский URL-адрес можно настроить на лету, если вы также измените источник, установив конфигурацию: 

player.config.urls.download = 'https://example.com/path/to/download';
0 голосов
/ 08 декабря 2018

Вы можете настроить все элементы управления Plyr с помощью Plyr JS. Вот полное описание из официального источника.

Элементы управления

Это разметка, которая отображается дляПлир контролирует.Вы можете использовать элементы управления по умолчанию или предоставить индивидуальную версию разметки в соответствии с вашими потребностями.Вы можете передать следующие опции опции:

  • Array опций (это строит элементы управления по умолчанию на основе вашего выбора)
  • Element с элементами управления
  • String, содержащий требуемый HTML
  • false (или пустую строку или массив), чтобы отключить все элементы управления
  • Function, которые будут выполнены и должны вернуть один из перечисленных выше

DEMO: Проигрыватель Plyr с пользовательскими элементами управления (кнопка загрузки включена) на CodePen.io

В фрагменте StackOverflow кнопка загрузки не работает , потому что она находится в песочнице.Пожалуйста, ознакомьтесь с демонстрацией на CodePen.io (ссылка выше).

Пример с Array опций: 

var controls =
[
    'play-large', // The large play button in the center
    'restart', // Restart playback
    'rewind', // Rewind by the seek time (default 10 seconds)
    'play', // Play/pause playback
    'fast-forward', // Fast forward by the seek time (default 10 seconds)
    'progress', // The progress bar and scrubber for playback and buffering
    'current-time', // The current time of playback
    'duration', // The full duration of the media
    'mute', // Toggle mute
    'volume', // Volume control
    'captions', // Toggle captions
    'settings', // Settings menu
    'pip', // Picture-in-picture (currently Safari only)
    'airplay', // Airplay (currently Safari only)
    'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
    'fullscreen' // Toggle fullscreen
];

var player = new Plyr('#player', { controls });
0 голосов
/ 05 декабря 2018

добавить ссылку с тегом "скачать" 

<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download> download </a>
...