アニメーション GIF や Cinemagraph について6http://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 で再生確認おｋしてます 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>です。
（見られないブラウザの方、↓の動画が延々繰り返し再生されています）
これで最強のGIFメイキングを手に入れることができました。
最低1MB推奨500KB容量に捕われる事無く悠々と ライカロングディスタンス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 件のコメント:
コメントを投稿