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/10月/11日

秋の朝阿蘇の風景を見たくなって前日から車中泊

秋の朝阿蘇の風景を見たくなって前日から車中泊            

41 hits

2020/10月/02日

Aso illuminated by the moon at midnight.

10月3日阿蘇への北側トンネルルートが開通します。これにより阿蘇においては本来的な復興の道筋ができたものと思われますが、そこに来てCovid-19の影響から脱するにはまだまだ時間がかかりそうです。

62 hits

2020/10月/01日

専門学校で写真の特別授業

さて今日は、専門学校で写真の特別授業です。ウェブ系の制作の授業の一環なんですが、写真の技術も重要なスキルになります。本日は学校近くの公園を使って人物撮影の練習を行います。

63 hits

2020/9月/22日

人材育成はいつでも優先課題

昨日は国の助成を得て新たな人事育成事業を拡充しようとしている方たちとお会いしました。

103 hits

2020/9月/18日

七工匠 7Artisans 50mm F1.8 Review for マイクロフォーサーズ

7Artisans 50mm F1.8 という中華レンズがあるが先に Meike 50mm F2.0 についてReviewをアップしてそれなりに褒めたわけだが、このレンズはすでに他のサイトでReviewして結構辛辣にこき下ろしてしまったレンズです。

158 hits

2020/9月/08日

新型コロナウィルス関連の差別

新型コロナウィルスの問題は、我々の生活における価値観の変化を促し、「当たり前にあるもの」に対しての再考を必要とする。

129 hits

2020/9月/08日

シンクロニシティー

今日はがん保険の営業の女性の方と長時間電話にておはなしする機会があった。

153 hits

2020/8月/31日

熊本美少女図鑑、TikTok 埋め込みテスト

昨日、熊本美少女図鑑のYoutubeちゃんねる番組の収録の時ついでにTikTokの動画も収録。 @kmmtbsz ##熊本美少女図鑑 ##美少女図鑑 ##SAーYA ##新宅未来 ##はにーばにー ##youtube始めます宣言 ♬ Honey Bunny - $HOR1

154 hits

2020/8月/28日

プロモーションの手法の変化

熊本美少女図鑑プロデュースに関して、アイドル系の動画などを見ていて分かったのだが、それらが人気を得る為のルートが2つある。

189 hits

2020/8月/24日

人吉方面の令和2年7月豪雨被害関連動画

先週まで何度か取材に行った災害動画関連をまとめて配置したいと思います。

252 hits