タグ

Javascriptとvideoに関するsabroのブックマーク (5)

  • ASCII.jp:HTML5 videoでニコニコ動画風プレーヤーを作ろう (1/7)

    HTML5テロッパーのサンプル。テキストエリアの文字がテロップとして動画の上に表示される画像クリックでサンプルページを表示します(Firefox 3/Opera 10/Safari 4で表示可能) 動画投稿サイト「ニコニコ動画」が人気です。ニコニコ動画はユーザーのコメントを再生中の動画にテロップのように表示する機能が特徴で、多くのユーザーがコメントを書き込んで楽しんでいます。 ニコニコ動画のようにブラウザー上で動画を再生しながらテロップを表示するには、従来、Flashが必要でした。Flash(Action Script)に習熟している開発者でなければ、ニコニコ動画のようなWebサービスは作れなかったのです。ところが現在、モダンブラウザーへの実装が進んでいるHTML5 videoなら、JavaScriptを使って簡単に文字や画像を動画に重ねられます。 今回はHTML5 videoとJavaS

    ASCII.jp:HTML5 videoでニコニコ動画風プレーヤーを作ろう (1/7)
  • html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング

    デブサミ2010のhtml5セッションで見たデモ(Movement tracker)*1 が、 衝撃的だったので video x canvas をちょっと勉強した。 1.videoの任意のフレームをそのままcanvasに描画させてみる htmlのbodyに書くにはこれだけ。 <video id="v" src="video.ogv" autobuffer controls></video> <canvas id="c"></canvas> <input type="button" value="copy frame" onclick="copyFrame()" /> copy frameボタンで呼び出されるjavascriptはこんな感じ。 function copyFrame() { var cEle = document.getElementById('c'); var cCtx =

    html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング
  • Webブラウザで動画編集! - Yanagi Entertainment

    html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング http://d.hatena.ne.jp/favril/20100225/1267099197 昨日この記事を見て、これはすごい! すごいすごい! ってなって、これができるんならWebブラウザだけで動画編集できるんじゃね? と思ったりしたので、ざっくり作ってみました。 http://yanagiatool.appspot.com/jsvideo/player.html (MacのSafari4で動作確認。QuickTime + ChromeならWindowsでもいけるかも?) あそびかた 「動画を読み込む」ボタンを押すと、テキストボックスに入ってるurlの動画を読み込みます。「state」って書いてあるところが「stand by」になったら「再生 / 停止」ボタンを押してください。 あとは

    Webブラウザで動画編集! - Yanagi Entertainment
  • akihiro kamijo: Adobe Flash Ajax Video (FAVideo) コンポーネント

    新しく Adobe Flash Ajax Video (FAVideo) コンポーネントが Adobe Labs に公開されました。(Flash-Ajax Video Component@Labs) FAVideo は Ajax アプリケーションから Flash ビデオを利用するためのコンポーネントで、JavaScript からビデオの表示位置や大きさを指定したり再生をコントロールすることができます。Flash Player 8 以降がインストールされている環境であればビデオを表示できるようになります。 FAVideo コンポーネントはソースコードが BSD ライセンスの元で (Flash-Ajax Video Component:License) 公開されています。サンプルを含む zip ファイルが Labs よりダウンロードできます。 ( favideo_072707.zip : 2.

  • MOONGIFT: » Ajaxを使ったFlashビデオ制御「Flash-Ajax Video Component」:オープンソースを毎日紹介

    CodeZine:Adobe製、AjaxでFLVを制御するオープンソース「Flash-Ajax Video Component」(アドビ)より。 動画共有サイトでは大抵、Flashビデオの下部に再生、音量変更、早送り/巻き戻しの制御が付いている。これはFlash側で組み込まれているので、便利ではあるがそれ以上の発展がない。 もっと動画とサイトをインタラクティブに融合させるためにも、これを使ってみるのが手だ。 今回紹介するオープンソース・ソフトウェアはFlash-Ajax Video Component、Adobe Labs謹製のAjaxによるFlashビデオ操作ライブラリだ。 Flash-Ajax Video Componentを使うと、FlashビデオをJavaScriptから制御できるようになる。Flashオブジェクトの描画もJavaScriptを通じて行うので、embedタグを書くこ

    MOONGIFT: » Ajaxを使ったFlashビデオ制御「Flash-Ajax Video Component」:オープンソースを毎日紹介
  • 1