html5：コントロールビデオにダウンロードボタンを追加

Question

クロム55+のようなコントロールビデオにダウンロードボタンを追加することは可能ですか？

可能であれば、どうすれば追加できますか？

Answer 1

要約すると、ビデオのjavascript APIに基づいて、自分でビデオコントロールパネルを作成する必要があります。いくつかのライブラリを使用すると、ビデオコントロールをカスタマイズするときに、あなたがダウンロードボタンを実装するために<a>要素のdownload属性を使用することができますなどなどPlayer.jsとして、

良いスタートになることがあります。

以下

<a href="/sampleVideo.mp4" download><span class="icon-download"></span></a> 

は、いくつかの詳細な説明であります：

---

は<video>のcontrol属性について、あなたはそのUIをカスタマイズすることはできません。

属性が存在する場合、またはスクリプトがメディア要素のために無効にされている場合、ユーザーエージェント必要があります。残念ながら、HTML5 specificationで、「ダウンロードボタンは、」controlの「機能が含まれなければならない」のリストにありませんユーザインタフェースをユーザに公開する。このユーザーインターフェイスには、再生を開始したり、再生を一時停止したり、コンテンツ内の任意の位置に移動したり（コンテンツが任意のシークをサポートしている場合）、音量を変更したり、クローズドキャプションや埋め込み署名付きトラックの表示を変更したり、オーディオ記述を追跡したりオンにしたりすることができます。また、ユーザーに適した方法でメディアコンテンツを表示することもできます（フルスクリーンビデオや独立したサイズ変更可能なウィンドウなど）。他のコントロールを利用することもできます。

私の実験では、Chrome 58とOpera 44にはビデオコントロールにダウンロードボタンがありますが、SafariとFirefoxではそうではありません。

しかし、ビデオのDOM APIを使用して独自のコントロールパネル（開始、一時停止、再開、ミュートなど）を作成することはできます。 Player.jsは良い例です。ネイティブJavaScript APIに基づいてできることを示しています。