HTML5によるWebカメラの導入をサポートするjQueryプラグイン・Photobooth.js - かちびと.net
HTML5でWebカメラに対応可能なWebサイトを実装するのを手助けしてくれる、というスクリプトのご紹介です。トリミングや色彩変更などの編集も可能のようです。 自分自身がWebカメラに対応したデバイスを現在手元に持ってないので動作テストしてないです。あとで検証しますが、現時点ではあくまで備忘録ですのでその程度の記事という事でご了承下さい。 当方の端末では対応して無いのでこのようにエラーが表示されてしまいますが・・編集も可能と言うのは凄いです。 実際はこのようになると思います。 getUserMediaに対応したブラウザならJavaScriptでWebカメラにアクセス可能です。マークアップはvideoとcanvasで実装出来ると思いますが、Photobooth.jsは、+編集が出来ます。 ご興味のあるかたは是非試してみてはいかがでしょうか。尚、実装テストしていないので詳細は割愛いたします。正
Fullscreen API を簡単に試してみた
Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。 例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、
Video.js - Make your player yours
Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube and Vimeo. It supports video playback on desktop and mobile devices. The project was started mid 2010, and now has hundreds of contributors and is used on over 450,000 websites. Plays anythingPlays “traditional” file formats such as MP4 and WebM, but
HTTP Live Streamingの概要</title> <meta name="Author" content="Apple Inc."> <meta name="Creator" content=""> <meta name="Producer" content="XEP 4.9 build 20070115"> <meta name="CreationDate" content=""> </head> <body> <pre> HTTP Live Streamingの 概��
HTTP Live Streamingの 概要 目次 はじめに 5 概要 6 特別なサーバソフトを使用しないオーディオとビデオの送信 7 オプションの暗号化を使用したオンデマンドのライブストリームまたはビデオの送信 7 お読みになる前に 7 関連項目 8 HTTP Streamingのアーキテクチャ 9 概要 9 サーバコンポーネント 11 メディアエンコーダ 11 ストリームセグメンタ 11 ファイルセグメンタ 12 メディアセグメントファイル 12 インデックスファイル（プレイリスト） 12 ディストリビューションコンポーネント 13 クライアントコンポーネント 14 HTTP Live Streamingの使用 15 ツールのダウンロード 15 メディアストリームセグメンタ 15 メディアファイルセグメンタ 15 メディアストリームバリデータ 16 バリアントプレイリストクリエータ
CSS3/jQueryでオリジナルのHTML5 videoプレーヤを作成してみよう
コントローラUIの設計 <video>要素を使用した場合、表示されるコントローラはWebブラウザによって異なる。 Webブラウザ別のネイティブなビデオコントローラ - Figure 1: Native browser video controls across different browsersより引用 再生、一時停止、シークなどあらゆる機能/ボタンはMedia elements APIをとおして、JavaScriptでアクセス/操作することが可能だ。これらのコントローラUIは、HTML/CSS/SVGなどで自由に組みたてられる。 コントローラのマークアップ まず最初にこれらコントローラをマークアップする必要がある。さきほどのWebブラウザ別ネイティブビデオコントローラを見て分かるとおり、プレーヤには次の機能が求められる。 再生/一時停止ボタン シークバー タイマー ボリューム調節ボタン
todya-only.net
Bing Mapsの基礎〜応用 某GのmapのAPIを利用するのにクレカ登録が必須となったので、Bing Mapsでどのくらいまでいけるのか試してみた。 主な使用技術 Bing Maps API、JavaScript、CSS、レスポンシブ 詳しく見る Youtube APIを使用したサンプル YouTube Data API (v3)を使用し、JavaScriptにてユーザーチャンネルの動画を取得するプログラムを作成。 主な使用技術 YouTube Data API、JavaScript(jQuery)、CSS、レスポンシブ 詳しく見る ポケモンGO図鑑 Githubに公開されている「Pokemon-DB」を元にページを生成 主な使用技術 JavaScript(jQuery)、CSS、レスポンシブ、Photoshop（タイプのドット絵を作成） 詳しく見る
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
WWW.AKIRAFUKUOKA.COM BLOG | 今VJするならブラウザででしょ！ HTML5でVJアプリ「Fi-VJ」を制作しました
HTML5ならのVJアプリだって作れるはず！で、作りました Fi-VJ ver1.02 デモページはこちら ファイルダウンロードはこちら (ver1.02) DLしたら@akirafukuokaに声をかけていただけると嬉しいです!! Fi-VJ(ファイブイジェイ)というVJアプリを極々個人的に制作しました。MacのネイティブアプリでもなければiPhone/iPadアプリでもありません。ブラウザで動くHTML5-VJアプリです。確認済み動作環境はMac版Safari 5.0.5だけです。他のブラウザでは確認してません（デモページはSafariとChromeで動くようですが）。というかローカル実行ではSafari以外ではまず動きません。これに関する解説は後ほど。 ここ数年ビデオミキサーにiPhoneやiPodを繋いでプレイしていた私ですが、そろそろPCを使ったVJに戻ろうかと思ったのがちょうど
HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)-
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、EveryWhere開発部の久下孝順、高橋淳史と申します。 先日リリースされました、iPad用Webアプリ「えほんのじかん」（iPad版）の紹介をさせていただきます。 このサービスの内容はごく単純で、たくさん並んだサムネイルから気に入ったものを選択すると、アニメーションと朗読によって構成された絵本風の動画が流れる、というものです。 もともとこの「えほんのじかん」の元祖は、「テレビ版」でした。 インターネット対応テレビ向けに提供しているテレビ版Yahoo! JAPANやYahoo! JAPAN for AQUOSなどからみることができます。 iPad版より作品収録数は多く、30作品以上を掲載しています。 テレビ
ASCII.jp：HTML5 videoでニコニコ動画風プレーヤーを作ろう (1/7)
HTML5テロッパーのサンプル。テキストエリアの文字がテロップとして動画の上に表示される画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 動画投稿サイト「ニコニコ動画」が人気です。ニコニコ動画はユーザーのコメントを再生中の動画にテロップのように表示する機能が特徴で、多くのユーザーがコメントを書き込んで楽しんでいます。 ニコニコ動画のようにブラウザー上で動画を再生しながらテロップを表示するには、従来、Flashが必要でした。Flash（Action Script）に習熟している開発者でなければ、ニコニコ動画のようなWebサービスは作れなかったのです。ところが現在、モダンブラウザーへの実装が進んでいるHTML5 videoなら、JavaScriptを使って簡単に文字や画像を動画に重ねられます。 今回はHTML5 videoとJavaS
HTML5で動画や音声再生を可能にするライブラリ集:phpspot開発日誌
Fresh Resources for HTML5 Video and Audio ? woorkup.com HTML5で動画や音声再生を可能にするライブラリ集が紹介されています。 AppleがHTML5の特集ページを公開したりと、今後の動向が気になるところですが、開発者としてはどういったライブラリがあるかを知っておくことで、どちらに流れてもよいように準備をしておきたいですね。 以下、紹介されているライブラリ群です。 FlareVideo - オープンソース、商用利用可能フリーなHTML5動画プレイヤー Video JS - JSベースのフリーのオープンソースHTML5動画プレイヤー.iPhone、iPadにも対応とのこと。 Open-Player - <video><audio>タグに対応したプレイヤー。非対応ブラウザはflashで補完。 jPlayer - <audio>タグに
HTML5による動画プレーヤ·Projekktor MOONGIFT
ProjekktorはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5の中で最も注目を集めているのがvideoタグだろう。これがFlashから置き換わるか否かによって、今後のシェア争いに大きな変化が出てくるはずだ。H.264は導入が難しい状況ではあるが、まだまだ分からない。 多様なブラウザに対応 HTML5を使った動画プレーヤを提供するのはさほど難しくないかも知れないが、HTML5に対応していないブラウザまで含めて対応しようとすると工数がかかってしまう。そこでHTML5対応の動画プレーヤProjekktorを使ってみよう。 ProjekktorはIE7/8、Firefox、Safari、Chrome、Operaといった主要ブラウザに対応した動画プレーヤだ。HTML5によるvideoタグに対応している。動画フォーマットはOggやH.264に対応しており、ブラウザに
ネット参入に“料金所”は要らない、Mozilla 長引くHTML5のvideoコーデック問題にコメント− ＠IT
2010/01/25 インターネットに参入しようと思ったとき、まず何億円も支払う必要があってはならない。1月23日付けのブログで、こう論じるのはMozillaファウンデーションでエンジニアリングを担当するバイス・プレジデント、マイク・シェイバー（Mike Shaver）氏だ。 最近、立て続けにビデオ共有サイトがHTML5のvideoタグを使った実験的なページを公開した。まず最大手のYouTubeが2010年1月20日に、それを追いかけるかのようにVimeoが1月21日に、それぞれvideoタグによるビデオ再生が可能なページを公開している。いずれも、Google ChromeやApple Safariの最新版であれば、Flashプラグインなしに動画再生が可能だ。 しかし、いち早くvideoタグをサポートしたはずのFirefoxでは、いずれのサイトのHTML5ページも見ることができない。MPE
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Developer API - TwitCasting
http://jp.infragistics.com/dotnet/netadvantage/aspnet/video-player.aspx
http://t3chh3lp.com/blog/how-to-vimeo-embed-videos-working-on-ipad.html
iPadでHTML5ビデオ対応のメジャーサイトが続々 － ＠IT