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

 

 


印刷  
カテゴリフィルター
並び順
2021/5月/15日

商品と作品の違い 著作権無料の配布サイトPixabayに投稿した桜の写真

わー今回世界的な素材写真配布サイトPixabayに登録した桜の花の写真のダウンロード率が異常に高い。見た人の95%がダウンロードしているというのはこれまでにない確率だ。

44 hits

2021/5月/13日

集団の業と如何に向かい合うのか?「宗教2世 親に束縛された人生からの脱出」を見ての感想。

昨日たまたまNHKで放送されていた「宗教2世 親に束縛された人生からの脱出」という番組を少しだけ見ることができた。

101 hits

2021/5月/07日

結果論の罠にはまる

色んな人の相談を受けて思うのだが、概ね結果主義の罠に落ちている場合も多い。

82 hits

2021/5月/06日

EaseUS Todo PCTrans Technician で多数のパソコン環境移築をやってみた。

所属する大学の職員用PCの買い替えをお手伝いすることになって、EaseUS Todo PCTrans による環境移築を行ってる。

100 hits

2021/5月/02日

限界は限界を意識したときに生まれるから、その限界を超えるためには何が必要なのか考える。

世の中はGWらしいが、ありがたいことにすべて仕事で埋まってしまっていて、またもや明日、明後日は撮影の仕事で苓北町に行く。

80 hits

2021/4月/25日

怒りのコントロール

ユミツエワン(妻)が母親と電話していて、「連休は1日実家に泊まろうか?」と言ったら「あさちゃんと喧嘩したの?」と、心配された・・・家内の母にまで「あさちゃん」と呼ばれていることは別にしても、そう言われたユミツエワンは「ちがうちがう。あさちゃんは怒らないから。」と答えたようだ。

114 hits

2021/4月/25日

デープフェイク

現在 Facebook のプロフィール写真で続けているコラージュの元アイデアがこの写真で、iPhoneのアプリで顔の挿げ替えをやっている。

123 hits

2021/4月/16日

撮影時に差が出るスピードライトについて

デジカメを使っていて様々な撮影時に有効なのがスピードライト、フラッシュとかストロボなんていい方もする。これらの使い方で、プロかアマチュアかが線引される場合もある。

202 hits

2021/4月/12日

生きにくい人生をリセットしたい。

普通に暮らしている人にはわかりにくい生きにくさを持った人々。私の周りには沢山いる。「ただ生きる」ということが難しいという事、なかなか周りには理解されにくい。

247 hits

2021/4月/07日

劇場版エヴァンゲリオンシリーズは庵野秀明監督のリハビリのようなもの?

昨夜、シン・エヴァンゲリオンを観てきた。もともとそれほど好きということでもないけど、それでも一つの時代を作ったと言える作品は観ておかないと。

268 hits