web-dev-qa-db-ja.com

Plyr JSを使用してビデオプレーヤーにダウンロードボタンを追加する方法

私は _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

javascripthtmlhtml5-videoplyr.js
5
EaBengaluru

「ダウンロード」タグの付いたリンクを追加する

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

Plyr JSを使用して、すべてのPlyrコントロールをカスタマイズできます。 ここに完全な説明があります公式ソースから。

コントロール

これは、Plyrコントロール用にレンダリングされるマークアップです。デフォルトのコントロールを使用するか、必要に応じてカスタマイズしたバージョンのマークアップを提供できます。以下をコントロールオプションに渡すことができます。

  • オプションのArray（これにより、選択に基づいてデフォルトのコントロールが作成されます）
  • Elementとコントロール
  • String希望するHTMLを含む
  • すべてのコントロールを無効にするfalse（または空の文字列または配列）
  • Function実行され、上記のいずれかを返します

デモ：CodePen.ioの カスタムコントロールを備えたPlyrプレーヤー（ダウンロードボタンを含む）

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

著者の解決策を試しましたか？ https://github.com/sampotts/plyr/issues/193#issuecomment-432629429 =

ダウンロードを追加することで、コントロールオプションでオンにすることができます。自動的に現在のソースをポイントし、新しいウィンドウで開きます。 urlsオプションでカスタムurlを指定することもできます。具体的には、urls.downloadプロパティを設定します。

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

Configを設定することで、ソースを変更するときにもカスタムURLをその場で設定できます。

player.config.urls.download = 'https://example.com/path/to/download';
1
hgb123