HTML5で<video>タグを使用して動画を埋め込むとChromeでコントロールバーにダウンロードボタンが表示されるようになった
<video>タグで動画をWebサイトに表示させる場合に気をつけることなどを紹介します。
目次
コントロールバー
コントロールバーは「controls=”true”」で表示され、falseで非表示になります。
trueにしていると、動画が再生されていない間はコントロールバーがずっと表示されていて、再生中はマウスオーバー時のみコントロールバーが表示されます。
コントロールバーを非表示にしている場合、動画をクリックしても再生されませんので、別途Javascriptなどで再生の処理を設定する必要があります。
また、メインビジュアルのように動画を自動再生する場合は、コントロールボタンなしで運用するのも良いと思います。
ios、iphoneでvideoタグの注意点
iPhoneの場合、playsinlineをつけないと動画再生時に全画面表示になるので注意。
自動再生の場合もplaysilineをつけた上でmuteをつけないと動かないので注意してください。
後、poster画像を設定しなければ再生前は何も要素がないような状態になります。
記事内にvideoタグをいれるオススメの設定
16：9の動画を掲載することが多い場合は、予めクラスを用意しておくことで動画読み込み前に高さを確保できるのでページスクロール中にロードが終わり表示がガクガクすることもなくなります。
ダウンロードボタンについて
今の段階ではクロームのみ表示されているようです。
下の動画の通り右下にダウンロードボタンが表示されています。
ちなみに動画はNHKが提供している素材を使用させていただきました！
素晴らしい！！
http://www1.nhk.or.jp/creative/material/
ダウンロードされたくない
そもそも<video>タグで表示した動画はソースを見ると簡単にダウンロード出来るのですが、中にはできるだけダウンロードされにくくしたいという要望もあります。
（画面を直接キャプチャーする方法がある以上完全に動画のコピーを防ぐ方法のは無理そうです。）
以下の記事では動画を読み込んだ後にソースを削除したり、右クリックを禁止するなどして、ソースから動画をダウンロードされにくくする方法について議論されています。
http://qiita.com/suhirotaka/items/283c045e6dd49654e30a
ただそもそも動画のコントロールバーにダウンロードボタンが表示されてしまうと、ソースを見に行く必要すら無くなるのでなんとかダウンロードボタンのみを消すことはできないかと試行錯誤していましたが、私の技術ではコントロールバーをカスタマイズする方法はわかりませんでした＾＾；
解決策
プロパティ一つでダウンロードボタンのみを消すことができれば良いのですが、無理そうなのでコントロールバーそのものを非表示にする方法でダウンロードボタンを消すことができます。
ただ、場合によってはコントロールバーを消すとユーザーが困るので独自のコントロールバーを実装する必要があります。
方法は以下記事を参考にさせていただきました。
https://liginc.co.jp/web/js/jquery/82904
とはいえ今後ダウンロードボタンが消える可能性もあるので現状クロームだけのために対応するのもあまり得策ではないような気もします。
というかどのタイミングからダウンロードボタンが表示されるようになったのか。
更新情報など調べて、わかれば追記したいと思います。
ここまで読んでいただいた方、ありがとうございました！！