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/12月/31日

エレクトレットコンデンサーマイクとプラグインパワー

 その昔、テレビコマーシャルの音楽制作の仕事もやっていたわけでして、その意味ではサウンド関連も専門の一つですが、最近は動画関連の仕事や中継系の仕事も増えてきています。

110 hits

2020/12月/19日

連続してFIND/47のPhoto of the week を受賞しました。

ありがたいことに今週も連続してFIND/47のPhoto of the week を受賞しました。

136 hits

2020/12月/15日

Find/47にてPhoto of the Week賞をいただきました。

今回の受賞で嬉しいことがあったそれは審査員の久志尚さんからの言葉。 審査員の論評から

138 hits

2020/12月/06日

インターネットライブ・コンサートYouTube有料配信イベント終了

YouTubeにおけるコンサートのライブ配信を行った。リアルタイム配信では色々と気を使う。正直結構怖い。そのために機材を2重に準備する。

217 hits

2020/11月/29日

重要なのは、才能より動き始めた者だけにチャンスが来る事実

 自分には「才能ない」などと、いつまでも言ってるとそれは謙虚を通り越して傲慢に成ると思う。

256 hits

2020/11月/28日

インターネット中継イベントの実施

昨日、全国女性会館のインターネット全国会議のイベントが無事終了しました。今回はなかなか高度な内容になりました。Youtubeにより同時中継や動画データ制作と配信、Zoomによる分科会会議など準備に多くの時間を費やし、配信用のノートPCも専用設定で3台ほど準備、会場に配置しました。

233 hits

2020/11月/20日

宇宙で鳴っている音

いとうせいこうと細野晴臣との対談の映像には色んな示唆が含まれている。

209 hits

2020/11月/20日

リクエストを処理できませんでしたリクエストに問題が発生しました。

現在Chrome及びそのエンジンを使っているMicrosoft Edge 及び Brave ブラウザでウェブサイトを見た場合FacebookのBoxが埋め込まれていると、「リクエストを処理できませんでしたリクエストに問題が発生しました。できるだけ早く解決できるよう、作業中です」といったメッセージとともに表示できない症状が発生中。

250 hits

2020/11月/15日

存在の気配はそれほど違いもなくて

私達はそれぞれの思いを抱きつつ、この場所に居てもいいのか問い続ける。その問いは空虚な生活の中で反響し共振しながら増幅するかも知れない。だからこそ誰かとその思いを共有したいと切望するのだ。

173 hits

2020/11月/05日

紅葉の季節撮影時のホワイトバランスについて

この時期、山々の紅葉が美しい季節となりましたが、カメラで撮影するとなんだか色が変だと思われたことはありませんか?

345 hits