はてなブログ | 無料ブログを作成しよう知らないヒトが残したがった日常を 〖日記祭〗 頑張って微調整しましたがスマホでは見づらいかもしれません 2024年12月8日、下北沢にて日記祭。 note.com その名の通り、日記をたのしむイベントです。 誰かの日々の日記を"本"にまとめた「日記本」即売会や、日記にまつわるテーマのトークショーや音楽ライブ、作品展…
HTML5のvideo/audio＋JavaScript APIテクニック
HTML5の＜video＞や＜audio＞タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
HTML5 Game Development
HTML5 Game Development Welcome to your one stop shop for information on HTML5 Game Development, news, tutorials, and information. We cover anything that helps you create dynamic, next-generation interactive Desktop and mobile HTML5 games and websites. New BabylonJS Feature Within Skybox Ground Projection is a handy new BabylonJS feature that allows you to smoothen the transition from the “ground”
そろそろ実践投入もありうる？Audio Sprite - komagataのブログ
ご存知の通りスマホのHTML5 Auidoは現状酷い状態です。 全プラットフォーム共通で再生できるフォーマットが無かったり、iPhoneは独自仕様で自動再生はできず、ユーザー操作由来のアクションからしか再生できなかったり、複数音が再生できなかったり、Androidは2.2までは全然動かなかったり。 対応策として知られているのがCSS SpriteならぬAudio Sprite。複数の音楽ファイルをつなげて一つのファイルにし、シーク位置を制御することで好きな音を鳴らしたりループしたりする姑息なテクです。 そんな面倒なことやってられるかと思ってたんですが、そろそろAudio Sprite用のツールも揃って来ました。 jukebox zynga/jukebox ひとつはAudio Sprite用の再生ライブラリjukebox。Zyngaが作ってるのでちょっとマジっぽいです。 var settin
07. video／audio要素のイベントを捕捉する » HTML5 -
videoaudio要素は、メディアデータの読み込みや再生中にさまざまなイベントを発生させる。このイベントをJavascriptで捕捉して、処理を行うことが可能である。発生するイベントの種類は非常に多く、これらをきちんと理解して詳細なイベント処理を行うことで、ユーザーフレンドリーで使いやすいメディアプレーヤーを作ることができる。 例えば、再生位置が進ごとに発生する「timeupdate」というイベントがある。このイベントを捕捉して、現在どこまで再生が進んでいるかを表示することができる。 < !DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VideoPlayer</title> <script type="text/javascript"> function playOrPauseVideo() { var videoUr
riaxdnp.jp - このウェブサイトは販売用です！ - riaxdnp リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Webアプリもオフライン実行？ Indexed Databaseを使いこなそう － ＠IT
連載目次 従来のWebアプリケーションでのデータ保存には、MySQL／Oracle／SQL Serverなど各データベース製品を利用してサーバサイドでデータをやりとりするのが一般的であった（ActiveXを利用すればJavaScriptコードからデータベース製品を利用することも可能）。 重要なデータを保存する場合には、今後もこの流れは変わることはない。ただ、個人で利用するだけのデータや、インターネットに接続できないオフライン環境でのアプリケーション利用時であればどうだろう。このようなケースでは、（クライアント環境で）ブラウザごとにデータを保存できる仕組みがあれば、非常に有効だ。 そこで登場するのが、今回紹介する「Indexed Database API」（以下、IndexedDB）だ。IndexedDBは、JavaScriptを使用してデータを管理できるキー／バリュー型の簡易データベースで
ブラウザでストレージ？ Web Storageを使いこなそう
連載目次 ■Web Storageの概要と活用例 旧来（＝HTML 4.1以前）のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、「Web Storage」と呼ばれる機能を利用できる。Web Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。 Web Storageとクッキーの機能の差異は、以下の表のとおりだ。
無職のプログラミング HTML5 Audio オブジェクトを JavaScript で制御する方法
HTML5 の Audio オブジェクトについて調べたことをまとめる。 なお、本エントリでは Audioタグについては記述しない。 ＜注意＞以下で示すソースコードは、Firefox3.6 と GoogleChrome7 でしか検証していません。 目次 1. HTMLAudioElement オブジェクトの作成 2. HTML5 Audio およびコーデックのサポートチェック 3. 再生する Audio ファイルの指定 4. Audio ファイルの再生、一時停止、停止 5. Audio ファイルの音量変更 6. サンプルプログラム 1. HTMLAudioElement オブジェクトの作成 参考ページ： audio 要素 - HTML5 タグリファレンス - HTML5.JP JavaScriptで制御するために、Audio要素のオブジェクトを作成する必用がある。 作成方法は以下の2通り /
EclipseのHTMLコーディングをより快適に（Aptana3, zen-codingの導入） | バシャログ。
こんにちは、inoueです。もう2月も折り返し?!まだお雛様を飾れていないというのに…。 さて、webアプリケーション開発を行っていると、プログラマといえど意外とHTMLを書いていることに気付きます。 特にボリュームのあるフォームのあるページや、別ページの流用で機能追加する場合など、HTMLタグとにらめっこすることも多いです。 ということで、最近あらためてEclipseに導入して便利だなあと思ったAptanaとzen-codingについて紹介します。 HTML5対策 - Aptana3 Eclipseの標準HTMLエディタでHTML5を扱っていると、どうしても<header>やら<nav>やらのタグがwarning扱いになってしまいます。 しょうがない、と見て見ぬふりを続けてもいいのですが、本当のエラーを素早くキャッチするためにもできればすっきりさせたいところです。 そこで登場するのがAp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
