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/4月/07日

他者からの評価を受け続け空気を読む我々の問題

私の周りにはこの空気を読めないというか読まないタイプの友人が多数いてほんと面白い。

8 hits

2020/4月/06日

7artisans 7.5mm F2.8 を使った夜桜の撮影

昼間桜を撮影しに行くのが難しいので熊本城近くの夜桜を撮影してきました。普段あまり撮影しない西側から二の丸あたりの写真です。

15 hits

2020/4月/04日

疲弊したこの国日本と、アート的思考の関係性

とにかくあちこち桜が満開ですね・・車で移動していても写真撮りに行きたくてウズウズします。

26 hits

2020/4月/01日

新型コロナウィルスによる各都市のロックダウン状況を確認するためのライブカメラへのリンク

やがて日本でも実施される可能性の高い都市封鎖(ロックダウン)。他国の都市のLIVE映像がを見ることができるサイトのリンク集を作ってみました。画像をクリックすると各サイトに飛びます。Youtubeでの配信は直接表示できるように変更しました。

345 hits

2020/3月/31日

外国人帰国困難者の皆さんに対して無償宿泊のサービスが始まろうとしています。

先に相談を受けていたゲストハウスの運営システムの構築者の方が企画され、各ゲストハウスのオーナーの皆さんを説得される形で、外国人帰国困難者の皆さんに対して無償宿泊のサービスが始まろうとしています。

41 hits

2020/3月/31日

Facebookの記事の中でOfficeって書いたら投稿できず

下記の記事をFacebookで投稿しようとしたら、 このリンクはシェアできません 6.office このリンクはコミュニティ規定に違反しているため、投稿をシェアできませんでしたコミュニティ規定に違反していないと思われる場合は、Facebookにお知らせください。

44 hits

2020/3月/28日

COVID-19の収束時期はいつになるのか?

COVIT-19の収束時期はいつになるのか?それは結構多くの人達の関心事だと思うが、理論的に考えれば収束はしないという可能性が一番高いのではないかと思っている。

55 hits

2020/3月/28日

私達は皆超能力者である

いや、この記事はけしてスピリチュアルな事を書いているのではない。実はこの事実を理解している人は少ないかも知れないが、事実、我々は超能力者になった。

109 hits

2020/3月/28日

人生はロールプレイングゲームみたいなものか?

今日はLINEの音声通話で、人間関係の相談を受けた。どうも最近いろんな相談を受けるが、今回は我ながら面白い助言ができたと思う。

43 hits

2020/3月/27日

学生の皆さんとその保護者の皆さんへ!パソコンは生活必需品です。

今日はパソコンを購入した大学生にリモートで設定の補助を行った。 学生だからパソコン位使えるだろうというのは間違いだ。多くの学生はスマートホンでインターネットを利用しているため、そこでできる事に関してのスキルはあるが、パソコンを持っていない学生も少なくない。

45 hits