2017/01/25(水) 02:43

HTML5でvideoタグを使う時にちょっとハマった。

投稿者:
このアイテムを評価
(0 件の投票)

HTML5による動画ストリーミングの設定に結構ハマってしまった。基本httpプロトコルで動画配信をする場合 video タグが使えるわけだが、Chromeのデフォルトのプレーヤーでは、ムービーダウンロードボタンがついていて元ファイルをダウンロード出来てしまう。

コントローラー全体を消すことは可能だが、ダウンロードボタンのみを消すというのはそういった記述が見当たらない。余計なことするなよChrome。

 

(後に非表示にする方法を見つけたけどこれめんどくさい)

http://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video/41136470#41136470

仕方なく、他のプレーヤーを設置することにした。しかし、何度やってもうまくいかない。特に80分程度ある動画なので、ストリーミングは必須。

http://www.joomlaworks.net/extensions/free/allvideos

さて、どうしたものか?といろいろ調べてみたが、2点注意すべき事が分かった。

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/

これはコーデックの際に設定が可能。

ということで、なんとか設置完了。

まあ、JSなどで組めば更にURLなどもわかりにくく出来るが、今回はそこまで必要ではない。それより、メンテナンス性が重要になる事案だ。

 

PS.と、ここまでやったところで要したモジュールがFlashを使っていることが判明。これではiPhoneでは表示出来ない。そこで結局、先の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 */
}
この記事は 8616 回読まれました 最終修正日 2017/01/25(水) 08:41
浅川 浩二

自己紹介が難しい。あまりに色んな事をやりすぎてアイデンティティーが希薄になってしまった。何が出来るの?って聞かれると答えに窮する。ただ言えるのは、「友だちになれば便利な人だよ」という感じかな。

人気のあるブログコンテンツ

5月 30, 2016
Default Image
Mentenance Works 浅川 浩二

もうまじでやめてよWindows10、DELLのVostro3550に入れるのは危険。

今日体験したんですが、クライアントのPCが10にバージョンアップされVGAドライバーが動かなくなり、画面が表示されなくなりました。マシンはDELLのVostro3550です。 仕方なく再起動させ、セーフモードで立ち上げようとしたらWindows8.1以降では、デフォルトでセーフモードが切ってあることが判明。
9月 11, 2016
Music Works 浅川 浩二

MP3って音が悪くなるの?そもそもMP3って何?

MP3ってどんな形式? 私たちはデジタル・オーディオの世界で音楽を聞いたり、Youtubeの音を楽しんでいますが、その仕組となるとあまり良くわかっていない場合が多いですね。例えばよく聞く音のファイル形式にMP3というのがあります。 MP3ってなあに?と聞いて正確に応えることができる人は少ないでしょう。このMP3と言うのは正式には MPEG-1 Audio Layer-3 といいます。
2月 27, 2016
Music Works 浅川 浩二

音声ファイルの編集に使っているGoldWaveというソフト

昔から使っている音声編集ソフトにGoldWaveというシェアウェアーがある。 ずい分昔からあるSound Editorであるが最近はなかなか出番がない。オープンソースのAudaCityなどでも、十分に対応出来る場合が多いし、Audacityの場合はマルチトラック編集が可能なに対して Gold Wave の場合はシングルトラックの音声しか扱えない。

被リンクの状況の確認出来るサイト

1月 24, 2016 1585
最近のGoogleの評価基準から非リンクはあまり重要視されなくなって来たという内容の記事を読んだことがあるが、それでもある程度は影響あるものとして実際現状でどこから非リンクされてい…

熊本市の河原町繊維問屋街という稀有な場所。

3月 13, 2016 1270
2006年1月4日撮影
デルタワークスの始まりはまず、仕事があってそれをこなすために作ったブランドだ。その仕事は半年近くかかる大きめの仕事だったために水前寺のマンションの一室をしばらく借りてそこに暫定的な…

オンライン販売サイトを作るうえでの決済選択肢を考えてみる

4月 07, 2016 1185
あるお客様のサイトで、いよいよオンライン販売の機能を入れるフェーズに入ってきた。もちろん、単なる”物売り”だけの機能を実現してもものはうれない。…

FUJIFILME X-E1とX-A1の違いについて

4月 03, 2016 1163
撮影 X-E1
EVFが付いているという理由からフジのXA-1からX-E1に乗り換えてみた。基本的には正解だったと思うが、やはり発色における考え方の違いは割と大きいのが分かった。…

Tech Fes Kumamoto 2016 (テックフェス熊本)開催のお知らせ。

3月 11, 2016 1152
熊本で開催されるIT関連のイベントの実行委員長をやることになりました。名前は Tech Fes Kumamoto 2016 ということで、毎年演る予定・・・・大丈夫なのか?