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/1月/20日

JCEエディタの日本語翻訳が完了した。

今、JCEエディタというホームページを作る際に利用されるHTMLエディタの日本語翻訳をやっているが先ほど完成して、開発者のRyan Demmerに連絡をした。ちょうど彼も言語ファイルのエディットを行っていた様で、速攻で返事が返ってきた。

14 hits

2020/1月/18日

社内データ共有による生産性向上について

一般的中小企業内のデーター管理はずさんであることが多いです。データは各自のPCの中にしかないうえにバックアップも不十分。 この為、どこにどんなデータがあるのか把握できず、生産性が著しく低下する。これまずいですよね。

23 hits

2020/1月/16日

段差の少ない路側帯を実現するグリーンベルト構想についての活動

今日はFM791で放送中の番組「ラジオリンカーン」の中の企画グリーンベルト構想の実地検証のために、長江さんたちと下通りから城彩園までを車いすで移動しました。その一場面を公開します。

25 hits

2020/1月/13日

私たちのお仕事紹介その2

クライアントのパソコンメンテナンスというも私たちの仕事の一つです。 メンテナンスの仕事には2種類あり、定期的に契約してその会社のPC周りのメンテナンスを総合的に担当する場合です。これは月額の基本保守料金がかります。基本月額2万円です。そのうえで、現場での作業は時間当たりの追加料金が必要になります

46 hits

2020/1月/10日

私たちのお仕事紹介その1

私たちの仕事の内容は多岐にわたる為、このウェブサイトを見ても一体何ができるのかわかりにくい部分があると思います。実際何やってる会社・・貨車じゃないけど・・チームなのか説明するのが難しいです。

53 hits

2020/1月/09日

横浜みなとみらいホールで行われたジルベスターコンサートの舞台映像の仕事に行って来た。

毎年恒例となった年末年始の儀式・・横浜みなとみらいホール ジルヴェスターコンサート2019-2020の舞台映像のしごとに行ってきた。おかげさまで正月はない。

61 hits

2020/1月/08日

久しぶりに曲でもつくろうか。Between thoughts and reality

久しぶりに音楽を作った。本当は、今放送中のFM局の為に派手目の曲を作る予定だったのですが、実際できた曲はダウナーなチルアウト。 しかし、鍵盤が事務所にはないので、本当に思った通りの曲というのは作れませんが、それでもまぁそれなりの曲は作れます。

58 hits

2020/1月/08日

デジカメ購入における基礎知識

学生さんからデジカメ購入に関しての一般的な質問を受けましたので私の考え方を書いておきます。   1.現在のデジカメトレンドはミラーレスに移行している。 通常の一眼とミラーレスの違いは、ミラーつまり鏡を利用して実像をファインダーで確認するタイプか、撮像素子の画像をモニターで確認するかですが、それぞれ特徴があります。

65 hits

2019/12月/19日

地域限定無料写真配布サイト構築のお仕事

写真を再起動してキロクマ!始めたことで、それらが果たす地域貢献の度合いは結構大きいのではないかと思っている。 先日も初めて会うウェブ制作者の方々から「キロクマ!登録して利用させていただいています。」との言葉を頂いたし、あちこちでお礼の言葉を頂く。

117 hits

2019/12月/18日

Boot Camp領域のあるMachntoshのHDDをSSDに複製する。

Macbook Pro 13inch の起動に非常に時間がかかるようになった。この為SSDに載せ替えたいと思ったがWindows10がBoot Camp 領域にある為、Time Machine では複製できない。そこでいくつかの方法を試してみた。 1.EaseUS Disk Copy まずネットで調べて、EaseUS Disk Copyによるコピーを行ってみた。しかし・・・時間がかかった割にはMac側でディスクを認識せず・・・BootCamp領域は認識しているようだったが起動のシステムエリアが認識されていないので、起動不可。 2.Acronis…

263 hits