Amazon商品の価格変動チェック「あまとも」
コミックダッシュ!は初音ミクGTプロジェクトを応援しています
個人ニュースサイトを巡回する「メガとんトラック」
全ての記事 携プレMP3 デジカメ レコーダ ゲーム メモリ デジモノ コラム 雑談 ブログ あまとも コミックダッシュ!
前の記事次の記事
2013/07/28 12:33 - 2013/07/14

ブログの動画アップ形式をFLVからHTML5+mp4/webmに変更。大量の過去データをどうするか・・

カテゴリ : ブログ タグ :


 
以前からずっと気にはしていたのですが、私のブログでアップした動画は
いままでずっと FLV形式 で、これが スマホ等から 見ると再生できない
状態になっていました。AndroidもiOSもどちらもNGになってしまいます。

 

 
■2007/01/07 [自分のページにお手製の Flash Movie (FLV) を貼り付ける方法]
■2007/02/16 [お手製FLV動画の貼り付けでpreview画像を表示する方法]
■2010/01/19 [FLVプレイヤーがIE8で表示できなかった問題を修正]
 
■Unobtrusive Flash Objects (UFO) v3.22
http://www.bobbyvandersluis.com/ufo/
 
コードはだいぶ古いままのもので、モノとしてはこちらのコードを使わせて
頂いていたのですが、FLASH自体の存在自体 が危うくなっているい昨今、
いずれにせよFLVにこだわり続けるのも良いことが無いような気がしてきて
いました。そこでひとまず、昨日の記事 からは、動画のアップ時のコードとして
HTML5のvideoタグ を使うように変更をしてみました。
 

 
これならAndroidやiOSからも普通に再生できるようです。
HTML5を解さないブラウザですと支障が出るはずなのですが、逆に昨今はHTML5を
全く受け付けないブラウザというのもほとんど無くなっているはずですので、
FLVベースよりはずっと広い閲覧環境をカバーできるはずです。
 
コードとしてはだいぶ単純になり、
 
<video controls poster="/blog/images/shinjuku_adtruck_yukarin.jpg" width="512" height="288">
<source src="/blog/temp/shinjuku_adtruck_yukarin.mp4" type="video/mp4">
<source src="/blog/temp/shinjuku_adtruck_yukarin.webm" type="video/webm">
</video>

 
こんな感じになっています。念のためソースとして 「mp4」「webm」
2種類を用意して、ブラウザによって再生可能なほうを選んでもらうという
仕組みですね。
 

 
webmのファイルについては Miro Video Converter というソフトを使って
生成しています。なにぶんFLVを作成したときのソース動画はもう手元に無く、
既存のFLVファイルから変換をするしかありませんので、選択肢も限られてきます。
画質もそのままというワケにはいきませんが、そこは仕方の無いところです。
 
■Miro Video Converter FREE - Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more.
http://www.mirovideoconverter.com/
 
最近はブログをスマホでご覧頂く機会も多いですので(全体の4分の1がスマホ)、
動画部分がキーポイントになっているブログ記事をご覧頂くときに
文脈を読むのに支障があった状態を早く直したかったのですが、
これでとりあえず新規記事からはスマホでも動画が見られるようになります。
 
ただ、、、過去記事の動画 をどうやって直していったら良いものか・・・
ちょっと頭を抱えています。調べてみたらすでに 500以上のFLVファイル
ブログにアップしておりました。過去記事をプログラムで置換していくしか
ないと思うのですが、変換ルールは早々慎重に考えないと誤変換でトラブルを
引き起こしそうでちょっと怖いです・・・。

CK@デジモノに埋もれる日々 @ckom
ブログ「デジモノに埋もれる日々」「アニメレーダー」「コミックダッシュ!」管理人。デジモノ、アニメ、ゲーム等の雑多な情報をツイートします。



投稿者 CK : 記事URL | ブログ | | 2013/07/28 12:33


« 新宿アドトラック出没! レールガン車は見失うも、田村ゆかり車はしっかり遭遇

トップに戻る

新 Nexus 7 は7/30から北米で発売開始も・・・日本発売をじっと待つ日々 »


▼ 関連記事 ▼



▼ コメント ▼

ご自由にコメントください(=゜ω゜)ノ  ▼ コメント入力欄を開く ▼
※管理人は多忙のためお返事はほとんどできません(スミマセン)。
スパムおよび本文と無関係なコメントは削除対象になる可能性があります。


▼ はてなブックマークのコメント ▼


▼ トラックバック ▼

このエントリーのトラックバックURL:

★コミックダッシュ! 10,000人突破ありがとうキャンペーン!(9/18~10/23)
 
デジモノに埋もれる日々 : (C) CKWorks