なでしこ3でvideoタグを作ればmp4の動画を再生することが可能
コマ送り機能をつけたり、スクリーンショットを取ることも可能
なでしこ1では動画を扱うのに難があったのでありがたいです
ビデオタグについて
<video>タグは、ビデオを再生するための要素です。
この要素を使用することで、プラグインを使用することなく、ビデオの再生を行うことができます。
「controls」属性を指定することで、一時停止/再生などの操作を行うコントロールを表示させることも可能です。
再生するビデオファイルは「src」属性で指定可能ですが、複数指定する場合は<source>要素を使用して指定してください。
ネットで仕入れたビデオタグの概要、これをなでしこ3のプログラムに書き換えてみます。
ここではなでしこ3のwebkit版を使用します。
ビデオタグ=「video」のDOM部品作成
ビデオタグの「controls」にオンをDOM属性設定
ビデオタグの「src」に「tetris.mp4」をDOM属性設定
※ tetris.mp4はwebapp内のindex.htmlと同じ階層に入れています。
・実行結果
ビデオタグがウィンドウ内に配置されました！
コマ送りボタンを作る
プログラムから動画のフレームレートを取得する方法はわかりませんでした
このテトリス動画は30フレーム/秒であることがわかっているのでフレームレートは手入力とします。
//クリックしたら動画が1/30秒進むボタン
改行作成
「送り」のボタン作成
それをクリックした時には
ビデオタグ["currentTime"]=ビデオタグ["currentTime"] + 1/30
ここまで
ビデオタグに続けてボタン作成すると動画の右にボタンができてしまうので、改行作成をいれています。
現在の再生位置はビデオタグのcurrentTimeの値を変更することで変更できます。
・実行結果
スクリーンショットのボタンを作る
ビデオタグを引数にして画像部分描画をするとキャンバスに画像をコピーできます。
ビデオタグからvideoWidthとvideoHeightを取ってきてキャンバスに設定することで、動画の縦横とキャンバスの縦横サイズを合わせましょう。
「スクショ」のボタン作成
それをクリックした時には
w = ビデオタグの「videoWidth」をDOM属性取得
h = ビデオタグの「videoHeight」をDOM属性取得
描画中キャンバスの「幅」にwをDOM属性設定
描画中キャンバスの「高」にhをDOM属性設定
ビデオタグの[0,0]を[0,0]へ画像部分描画
ここまで
・実行結果
キャンバスは右クリックで画像を保存メニューが出ます。
プログラムからキャンバス画像を保存することもできるようですが、今回はこれで。
完成
ビデオタグ=「video」のDOM部品作成
ビデオタグの「controls」にオンをDOM属性設定
ビデオタグの「src」に「tetris.mp4」をDOM属性設定
改行作成
「送り」のボタン作成
それをクリックした時には
ビデオタグ["currentTime"]=ビデオタグ["currentTime"] + 1/30
ここまで
「スクショ」のボタン作成
それをクリックした時には
w = ビデオタグの「videoWidth」をDOM属性取得
h = ビデオタグの「videoHeight」をDOM属性取得
描画中キャンバスの「幅」にwをDOM属性設定
描画中キャンバスの「高」にhをDOM属性設定
ビデオタグの[0,0]を[0,0]へ画像部分描画
ここまで
※ ちなみにこの形はDT砲といいます
