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

 

 


印刷  
2020/7月/31日

球磨川沿いの被災者でもある溝口さんと電話にて

先程球磨川沿いの被災者でもある溝口さんと電話にて、土曜日の取材の件を相談致しました。

21 hits

2020/7月/30日

学生であるという意識と社会

本日は大学の情報演習の時間を使って人吉の状況レポートの授業を短時間ではあるが行った。

19 hits

2020/7月/30日

球磨村被害状況

坂本村に入った方の話として、今回は熊本地震のときよりも復旧の速度がどうしても遅くなっているのではないかとのこと。

30 hits

2020/7月/26日

令和2年7月豪雨災害での球磨郡相良村の状況

熊本県球磨郡相良村柳瀬近辺でボランティアとしてお手伝いされている桑原様と、その民家の奥様の話を聞くことが出来ました。 音声による番組に成っています。 球磨郡相良村の状況

51 hits

2020/7月/26日

球磨郡球磨村渡地区の被災状況

昨日人吉地区の被害状況の確認に行ってきましたが、その際撮影したビデオ画像からの書き出し画像とGoogleストリートビューの過去の同じ場所の画像を比較してみました。 Googleさん無断転用ごめんなさい。

80 hits

2020/7月/26日

2020年「令和2年7月豪雨災害」関連無料画像配布開始

先に県南を中心に大きな被害が出た令和2年7月豪雨災害の記録写真を緊急公開いたします。現在県内各地の写真取材と収集を行っています。写真そのもののご利用に関しては特に制限を設けていませんが、利用者の皆さんの倫理観に基づいてのご利用をお願いいたします。

67 hits

2020/7月/22日

ピアニストの方のためのノートパソコン

現在、仕事の合間にピアニストの方のためのノートパソコンをセットアップ中。これまでほとんどパソコンは使っていなかったとのことだが、今の時代音楽家にもPCは必須。

52 hits

2020/7月/16日

The human brain's signal processing is a hybrid structure of digital and analog.

It's equally important in everything.

85 hits

2020/7月/16日

行政関係者を横軸でつなぐ

本日はとある行政関係者のみなさんとまちづくりに関しての意見交換会。

82 hits

2020/7月/05日

ICTオペレータボランティア

現在、球磨川の氾濫が続いていますが、これらを確認できる国土交通省の九州地方整備局河川国道事務所のサイト相変わらず災害時になるとアクセスが集中してサーバが止まります。

147 hits