「HTML」カテゴリーアーカイブ

動画をCanvasに描画したい


動画をCanvasに描画したい。なるべく自動再生したい。

いろいろやり方を考えてみたんですが、現状としては

  • PCは当然できる
  • iOSではなんとかごまかせる
  • Androidは再生に何かしらユーザの動作が必要

という理解になりました。

iOSのやり方は、他のサイトなどでも紹介されていますが、videoのcurrentTimeを動的に変更しつつ、Canvasに描画すれば、再生できます。


var video = document.createElement("video");
var context = document.getElementById("canvas").getContext("2d");
var tickTime = 1000/60/1000;
video.src = "movie/sakura.mp4";
video.load();
function tick(){
    video.currentTime += tickTime;
    if(video.currentTime >= video.duration){
        video.currentTime = 0;
    }
    context.drawImage(video, 0, 0, 360, 202);
    requestAnimationFrame(tick);
}
video.addEventListener("canplay", function(){
    tick();
});

サンプル(※Safari/iOSSafari以外はおそらくバグります。)

これで行ければよいのですが、残念ながらAndroidでは描画されません。また、PCでもSafari以外はこの方法が使えないようです。(IE11/Chrome/Firefoxでうまく動作せず)

普通に、videoをplayしている状態であれば、currentTimeを変更できるんですが、再生を開始せずに、currentTimeを操作する良い方法が見つかりませんでした。

当然、Androidではタップなどユーザアクションなしで再生させることはできないはずなので、無理やりtouchstart等のイベントを使うか、開始ボタンなどを使う必要がでてきます。

本当は、動画再生の方法を調べていたのではなく、タイマーを一元管理するためのライブラリを作ってその検証のために動画を操作していたんですが…。スマホで動画を自動で再生させるスマートな方法が現状なさそうなので、別のサンプルにしようと思います。。

昔動画は厳しそう、ということで動画をスプライトシートに変換して表示させたのですが、その時の判断はおそらく正しかったんだと思います。まあ、これはこれでデメリットもあるんですが…そちらについてはおいおい記事にしてみようと思います。

参考 :

Atomエディタを使う話


しばらくの間、SublimeText2を使っていたのだけど、ずっと試用だし、何かに乗り換えるかー、ということで、GithubのAtomを使ってみることにしました。

https://atom.io/

以前は遅い遅いと言われていた気もするけれど、それほど不快な遅さはなく、使い勝手もほとんど変わらない感じでした。

使っててSublimeTextとくらべていいと思ったのは以下の機能。

  • 画像のプレビューができる
  • 日本語の検索がスムーズ
  • パッケージを入れなくてもShiftJISなどが使える
  • 補完がAtomのほうが気が利いている気がする。
  • 間違ってCmd+Shift+Cとか押してもエンコードが変更されない(ConvertToUTF8のせいらしい。設定で変更すれば良いだけなのだけど…。)

逆に困ったのは以下の機能

  • ビルドをどうやって使うのかわからない。
  • パスが通らない
  • ショートカットキーが動かない

ビルドについてはパッケージをインストールすればできます。

とりあえずgulpのタスクの実行がキーボードのみで実行できれば、と思っていたので、いろいろ試した結果、

  • build
  • build-gulp

を入れて、Cmd+Alt+Bでgulpの標準タスクが実行できるようにしました。

最初はこの時にパスが通っておらず、困りました。

起動時にターミナルから起動すればOKみたいな記事もありましたが、ちょっと面倒だな、と思って更に調べたら、起動時に実行されるinit.coffeeに記述を追加すればできるようです。(SettingのOpenConfigFolderで開ける)

process.env.PATH = [ "必要なパス", process.env.PATH ].join(":")

nodebrewなどを使っているので、ここに

Users/***/.nodebrew/current/bin

を追加したら、ビルドできるようになりました。

その他、以下のパッケージを入れてみています。

  • atom-jade(Jadeファイルを見やすく)
  • emmet(HTMLを書く場合 / 計算などに使う)
  • file-icons(ファイルのアイコンが見やすくなる)
  • terminal-plus(term2, term3ともうまく行かなかったので…。)

ビルドの設定で困りましたが、その点以外では快適に使えています。

検索などで重くなる、ということもあるのでしょうが、SublimeTextの代替として十分使えそうです。しばらくこっちで制作してみようと思います。

参考 :

Atom(GitHub製エディタ)に乗り換えて最初にやっておきたいこと | mae’s blog
パッケージ[Script]でJS,CoffeeScriptを実行 – Qiita

Gulp用のBaseProjectを作ってみた


家で開発する用にGulpを使った基本プロジェクトを作ってみました。

https://github.com/sacrifs/BaseProject_Gulp

内容としては、

  • Jade
  • SCSS
  • uglify
  • cssmin
  • imagemin

等を自動でやってくれるようになっています。まだ仕事で使っていた機能を実現できてないところもあるので、もう少し改良して行こうと思います。

昔だったらHaxeも入れてたと思いますしGruntではHaxeも入れていたんですが、gulp-haxeが見当たらなかったのと、最近はHaxeあまり使ってないので、ベースプロジェクトには入れていません…。言語としては好きなんですけどね。

以前にHaxeを使ったクイズコンテンツを公開していたんですが、こちらはGruntでHaxeもコンパイルしていました。

IIDX問題NOTE

また何かこういうの作りたいなぁ。Bitbucketに置いてあったので、問題部分だけ抜いてGithubで公開しようかちょっと考えています。(問題の制作は私ではないので…。)

jquery.rayeffect.js


HTMLで演出っぽいものを作れるか、というのと、jQueryのプラグインを作ってみる練習。

Haxeを最近は使ってますが、これは生JSです。jQueryプラグインですしね。

さて。RayEffectです。

サンプル:→RayEffect JS

rayeffectjs

n0wriさんwonderflで作られていたFlashエフェクトを元ネタにしています。(どこかの何かのキャンペーンサイトで同じようなエフェクトがあったような気がします。…が果たして何だったか。)

続きを読む jquery.rayeffect.js

CreateJSを試す1 とりあえず動かす


createjs1

Flashを使っていた方にはわかりやすいと評判のJavaScriptライブラリ、CreateJSを使ってみています。

CreateJS(公式)

ゲームらしいものを作りたいのですが、とりあえずはそこに至るまでいろいろやる必要があるかな~ということでテストしてみました。まずは簡単にデジタル時計でも…ということでこんなのを作ってみました。

CreateJS Test 1

時計の背景の色は毎秒ColorMatrixFilterで変えています。

ソースはメイン部分を抜粋すると以下の様な感じです。

続きを読む CreateJSを試す1 とりあえず動かす