HTML5 videoの「映り込み」はCSS3または<canvas>で出来る！？
一つはcanvasを使って行列を縦に反転、あとはピクセルのデータのアルファ値を徐々に下げていく方法、これはJavaScriptを使って細かに表現できます。（簡素なサンプルコードは以下）
もう一つはCSS3の「-webkit-box-reflect:」を使う方法、CSSが得意なデザイナーさん向けとも言えます。
では、両者、どのようにコーディングしていこうというわけですが、、まず、CSS3の方から。
CSS3で「映り込み」をさせるには「-webkit-box-reflect」プロパティ
あと、グラデーションですが、このグラデーションの意味が分かりづらいって方も多いでしょうから、from、color-stop、toなどの意味を理解する事が大事かもしれません。
私が作ってみた「Grad? Gradient!-CSS3 GradientButton Generator-」でも、CSS3グラデーションが簡単に作れるので、試してみてください。
たったこれだけ、CSS3のプロパティ1つで実現出来るっていいですね？
しかし、よく見ると「-webkit-」という文字通り、これはFirefoxなどでは使えません。
canvas要素を使って、もっと自由度の高い「映り込み」
これだとcanvas対応しているブラウザなら大丈夫です。でも実際はちょっと強引な方法です。
あとiPhone対応の形式で書き出すと、クリックしたら動画が独立して立ち上がるので、この方法だと無理ですね。。。
まずはHTMLを書きます。
そしてJavaScriptです。
上記のスクリプトですが、「ctx.transform(1,0,0,-1,0,360);」ってありますよね？
これが画像を色々変形させることができるもので、4つ目の引数の-1ってので反転をしています。そのままだと枠外にいくので最後の引数「360」は縦方向に360pxずらすことで反転します、すなわち反転はこの1行ですべて終わっています。
「var idata = ctx.getImageData(0,0,640,360);」
とありますが、これは、イメージデータと呼ばれるピクセル単位の集合体がオブジェクトとなったもので、上記だと、変数idataに「data」というプロパティにアクセスすると、とてつもない長いピクセルの情報が配列として返ってきます。
たとえばこんな感じです。
「215,100,50,255......」
↑
これは、RGBAの値を1次元配列ですべてのピクセル情報が収まっているものです。
まずはHTMLを書きます。
そしてJavaScriptです。
上記のスクリプトですが、「ctx.transform(1,0,0,-1,0,360);」ってありますよね？
これが画像を色々変形させることができるもので、4つ目の引数の-1ってので反転をしています。そのままだと枠外にいくので最後の引数「360」は縦方向に360pxずらすことで反転します、すなわち反転はこの1行ですべて終わっています。
「var idata = ctx.getImageData(0,0,640,360);」
とありますが、これは、イメージデータと呼ばれるピクセル単位の集合体がオブジェクトとなったもので、上記だと、変数idataに「data」というプロパティにアクセスすると、とてつもない長いピクセルの情報が配列として返ってきます。
たとえばこんな感じです。
「215,100,50,255......」
↑
これは、RGBAの値を1次元配列ですべてのピクセル情報が収まっているものです。
こんな感じでとらえます、ある意味分かりやすいですよね？
Red: 215, Green: 100, Blue: 50, Alpha: 255......
これが延々と続きます、ピクセルが続く限り。
なので、idata.dataにアクセスすると、膨大な配列が返ってくるんです。
で、毎フレーム毎にその配列のAlpha値（4番目）の値のみアクセスして、値を255から徐々に減少させていけば、だんだんフェードアウトするような形になり、「映り込み」 っぽく見えるわけです。
普通for文って
と、書きますが、4番目（配列でいうと3番目）にアクセスして値を入れ直す必要があるので
と、透明度のインデックス番号だけ狙ったらいいでしょう。
イメージデータはもっと勉強しないといけませんね。。
今日はこんなところで。
Red: 215, Green: 100, Blue: 50, Alpha: 255......
これが延々と続きます、ピクセルが続く限り。
なので、idata.dataにアクセスすると、膨大な配列が返ってくるんです。
で、毎フレーム毎にその配列のAlpha値（4番目）の値のみアクセスして、値を255から徐々に減少させていけば、だんだんフェードアウトするような形になり、「映り込み」 っぽく見えるわけです。
普通for文って
と、書きますが、4番目（配列でいうと3番目）にアクセスして値を入れ直す必要があるので
と、透明度のインデックス番号だけ狙ったらいいでしょう。
イメージデータはもっと勉強しないといけませんね。。
今日はこんなところで。