HTML5で動画配信する場合のダウンロードボタンを消したい。また、ストリーミングMP4を作りたい。

HTML5で動画配信する場合のダウンロードボタンを消したい。また、ストリーミングMP4を作りたい。

以下の記事は過去のサイトに投稿していた内容の再掲載ですが、HTML5でMP4の動画を配信する場合、ブラウザのChromeではダウンロードボタンが出てしまう問題と、動画のエンコード時にストリーミングが可能なデータを作るための説明です。


1.Chromeブラウザでのダウンロードボタンの問題

HTML5による動画ストリーミングの設定に結構ハマってしまった。基本httpプロトコルで動画配信をする場合 video タグが使えるわけだが、Chromeのデフォルトのプレーヤーでは、ムービーダウンロードボタンがついていて元ファイルをダウンロード出来てしまう。ダウンロードさせたくない場合、このボタンをけしたいが、コントローラー全体を消すことは可能だが、ダウンロードボタンのみを消すという記述が見当たらない。

 このためCSSで修正する方法をとった。サイトのCSSに追加したソースは下記。

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

 

これによってボタンは非表示になった。ただし、埋め込みのソースを見れば実際のデータがどこにあるかはわかってしまうので、完全にデータを保護することはできない。簡易的な対策といったところだ。ジャバスクリプトなどを使ってHTMLソースを暗号化すればいいかも知れないが今回はそこまでは必要がなかったので実行していない。

PS,本日この方法で試したが最新のChromeの場合、設定が変わったので有効ではなくなった代わりに Videoタグにて指定ができるようになっている。下記にその設定を付け加えておく。

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

 https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

2.ストリーミングMP4データの作り方

1.サーバの設定(ファイル置き場はLolipop)

まず、サーバに動画のデータが動画であることを教えるのにサーバによって、MIME タイプを追加する必要がある。

下記一例。これらを.htacsessに追記したが、普通のサーバでは不要かもしれない。

AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

2.コーデックの際にストリーミング(正確にはプログレッシブダウンロード)対応のファイルを作る必要がある。

これは私が普段使っているTempeg5にはない機能だったためにフリーソフトの Xmdia Recode を使って再エンコード。

具体的には、通常メタデータと呼ばれる情報がデータの一番最後に書かれるのを最初に配置する事で、すぐに再生出来るファイルにするようだ。

http://forest.watch.impress.co.jp/library/software/xmediarecode/

コーデックの設定は

Snapshot 19 10 22 03 58 13

 

 


印刷  
2019/11月/15日

想像力がすべてを救う

ラジオリンカーンでも話したが、我々は自分自身の為だけに生きているのではない。というより私と他者を分離できると思っているのは幻想にすぎない。 我々は人間だけでなく自然や地球や宇宙ともつながっていて分離できないのだが、それをそう考えるのか自分と他者を切り離して考えるかで幸せの度合いも変わるのだと思っている。

21 hits

2019/11月/14日

I will participate as a video artist at the Jilvester Concert in Tokyo at the…

年末行われる横浜でのジルベスターコンサート。今年も参加が決まり、当日の構成の打ち合わせを先ほど熊本駅で行った。今回も演出担当の大島先生が東京から音大に講義にいらっしゃった今日、時間を作っていただいての打ち合わせ。

12 hits

2019/11月/12日

今日の満月は本当に美しい

今日の満月は本当に美しい。本来なら月明かりの景色でも撮影に行きたいが事情が許さないのでベランダから撮影した。

20 hits

2019/11月/09日

誰かとみる景色は心に残るか?

人間とは面白いもので一人で見た景色と誰かと見た景色では印象が違ったりする。その関係性が景色との関係性に影響するのだろう。 それらは記憶の中で変性し、同じ景色でも印象は違ってくる。

40 hits

2019/11月/09日

USB3.0のカードリーダの接続が勝手に切れる

USB3.0のカードリーダをつないでいるがしばらくすると電源が切れてコードを差し直さないと認識しない症状が発生していたが、回避方法が分かった。 これはWindows側で自動的に電源を切る設定があるための症状で、下記ページなどを参考に設定すると改善できると思う。 http://qa.elecom.co.jp/faq_detail.html?id=5731  

33 hits

2019/10月/22日

HTML5で動画配信する場合のダウンロードボタンを消したい。また、ストリーミングMP4を作りたい。

以下の記事は過去のサイトに投稿していた内容の再掲載ですが、HTML5でMP4の動画を配信する場合、ブラウザのChromeではダウンロードボタンが出てしまう問題と、動画のエンコード時にストリーミングが可能なデータを作るための説明です。

83 hits

2019/10月/21日

占い師のいう事を聞け!

昔、家内で仏画師であり占い師のユミツエワンが友人と一緒にチベット人のお坊さんに占いをしてもらった時の話。 友人は旦那と離婚しようかかどうか悩んでいて、そのお坊さんに色んな話を聞いてもらった。そこで彼女が尋ねた。

81 hits

2019/10月/14日

その昔自分でも焼き物を焼いていた時期があった。

テクノロジーとは対極にあるかもしれない陶芸という趣味。一時期、テクノロジー系の趣味から少し距離を於いていた時期、没頭していたのが陶芸だ。

92 hits

2019/10月/10日

1985年頃聞いていたカセットテープが出てきた。

ちょっと懐かしいのでそのテープに入っている曲がYoutubeでどれだけ聴けるか調べてみよう。

89 hits

2019/10月/06日

We were born by mother-like disorder and father-like order.

Street Art-plex Kumamoto EXTRAVAGANZA 2019 を手伝ってきた。元々この企画の立ち上げをやったのであって、すでに17年?18年?続くイベントととして、定着している。今回はSNSの配信を手伝ったが、写真も少し撮影した。 その中で感じたことを追記しておこう。   「私たちは母なる無秩序と父なる秩序によって生まれた。」 What is important here is that the…

66 hits