Blogger Discrp

どぅーしてココに着ちゃったの?!
  ここは redo_chan という、よく分らない匿名ユーザーが鉄則から外れてブログっている Blog です。

文字を大きくする Ctrl or Cmd + + 小さくする Ctrl or Cmd + - 元に戻す Ctrl or Cmd + 0

アニメーション GIF や Cinemagraph について7


アニメーション GIF や Cinemagraph について6
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraph-6.html の続き。

前回 javascript/スクリプトを使った アニメーション表示を参考実践しました。今回も GIFとは違う手法でアニメーションを表示したいと思います。

今回は HTML5 <video> を使った表示です。

「えっ それはもうGIFじゃなくって動画表示ですよね?」

その通りです。
GIF の最大欠点は容量です。サイズ縮小したって最適化したって容量抑えられない場合は、元から低容量の動画を使うに決まってるじゃないですか!

「そ、そんな・・・」

動画でもいーんです!
延々リピート再生するプレイヤーが無かったので動画は動画だったんですよ。<video> はリピート再生出来るんです。スクリプトじゃなくてタグの属性でリピートしろポン!なんです。だったら是はもう "一時停止/再生/リピート解除可能な超低容量データのGIF" なんです!!

「いやそのあの、GIFじゃないでしょ?」

GIF っぽい動画表示ですから、GIF でもいーんですーーぅ。
勝手に再生・繰り返し表示するものは、GIFと認めていーんです。閲覧者さんには何だっていーんですから!

そんな訳で <video> タグを使った表示についてコード記述します。

HTML5 videoタグを使って自動繰り返し再生表示↓

注意点:
  • preload属性は表示不可の原因になりました
  • 一応poster属性は用意しましたが無効でした
  • 動画ソースファイルはyoutubeではなくGoogleDriveにアップロード


ソースファイルはMP4だけです。MP4 & HTML5対応ブラウザでご閲覧下さい

(Firefox,Chrome,IE10 で再生確認おkしてます 2013/5月時点)

上プレイヤのコード↓
<video poster="https://www.googledrive.com/host/0B80DGM8mGTEXa0NJcl9jQ1gxbzQ" controls autoplay loop>
<source src="https://www.googledrive.com/host/0B80DGM8mGTEXNTM4MzlvYnRtOFk" type="video/mp4"> <!-- mp4 -->
<p>
ソースファイルはMP4だけです。MP4 & HTML5対応ブラウザでご閲覧下さい</p>
</video>

です。

(見られないブラウザの方、↓の動画が延々繰り返し再生されています)

今はどうか分りませんが、デスクトップPC~各種スマホ(OS)で問題なく使用できるのは youtube の共有>埋め込みコード> iflame だそうです。ところでエディターやアノテーション・字幕機能が搭載された youtube(ムービーエディター)ですが、事前コーデック合わせ(H264/AAC)をしても最終動画処理が遅く、数秒の動画も中々直ぐには完了しませんねー。


これで最強のGIFメイキングを手に入れることができました。
最低1MB推奨500KB容量に捕われる事無く悠々と ライカロングディスタンスGIF を堪能出来ます。全世界のGIFラヴァーズよ、喜びなはれや!


MP4 & HTML5対応ブラウザでご閲覧下さい

(GIF/6MB がMP4/451KBで表示可能)

※ Microsoft Cliplets もそうですが、選択出来る出力データ形式は動画形式(mp4/avi/wmv等)またはアニメーション形式(gif)です。管理又は投稿上、動画ファイル形式に利便性があるなら、動画をGIF(リピートアニメーション)的に使用・表示する手段として、videoタグは非常に有益で且つ簡単(ただのHTML記述)です。
特許や新技術で一時は衰退した GIFですが、本当にとどめを刺すのは、この HTML5かと思いました。


参考:
ASCII.jp HTMLリファレンス
http://reference.ascii.jp/html/video
YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法|HTML5 – CSS3 mag
http://html5-css3.jp/tips/youtube-html5video-window.html

続き
アニメーション GIF や Cinemagraph について8
http://redo-chan.blogspot.jp/2013/06/gif-cinemagraphy-8.html


戻る
アニメーション GIF や Cinemagraph について6
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraph-6.html

0 件のコメント:

コメントを投稿