HTML5で<video>タグを使用して動画を埋め込むとChromeでコントロールバーにダウンロードボタンが表示されるようになった

ck20160626043914_tp_v

タイトルの通りです。
今の段階ではクロームのみ表示されているようです。
下の動画の通り右下にダウンロードボタンが表示されています。

ちなみに動画はNHKが提供している素材を使用させていただきました!
素晴らしい!!

NHKクリエイティブ・ライブラリーは、NHKアーカイブスの番組や番組素材から切り出した映像や音声を、視聴者のみなさんの表現・創作活動に利用していただくための「創作用素材」として、インターネットを通じて提供する無料のサービスです。

ダウンロードされたくない

そもそも<video>タグで表示した動画はソースを見ると簡単にダウンロード出来るのですが、中にはできるだけダウンロードされにくくしたいという要望もあります。
(画面を直接キャプチャーする方法がある以上完全に動画のコピーを防ぐ方法のは無理そうです。)

以下の記事では動画を読み込んだ後にソースを削除したり、右クリックを禁止するなどして、ソースから動画をダウンロードされにくくする方法について議論されています。

## 前提 - HTML5のvideoタグで動画を閲覧できるようにした上で、閲覧したユーザーがローカルへ動画をダウンロードすることを難しくしたい。 - HLSやRTMPといったストリーミングプロトコルを使わずに、sourceタグにmp...

ただそもそも動画のコントロールバーにダウンロードボタンが表示されてしまうと、ソースを見に行く必要すら無くなるのでなんとかダウンロードボタンのみを消すことはできないかと試行錯誤していましたが、私の技術ではコントロールバーをカスタマイズする方法はわかりませんでした^^;

解決策

プロパティ一つでダウンロードボタンのみを消すことができれば良いのですが、無理そうなのでコントロールバーそのものを非表示にする方法でダウンロードボタンを消すことができます。

ただ、場合によってはコントロールバーを消すとユーザーが困るので独自のコントロールバーを実装する必要があります。
方法は以下記事を参考にさせていただきました。

こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと...

とはいえ今後ダウンロードボタンが消える可能性もあるので現状クロームだけのために対応するのもあまり得策ではないような気もします。

というかどのタイミングからダウンロードボタンが表示されるようになったのか。
更新情報など調べて、わかれば追記したいと思います。

ここまで読んでいただいた方、ありがとうございました!!

シェアする

  • このエントリーをはてなブックマークに追加

コメント

  1. Ujiki.oO より:

    貴重な記事に感謝します。ダウンロードボタンを消すパラメータ、特殊METAタグなどの情報が判明することを期待しています。