Submit Search
Upload
Firefox5+HTML5×5
•
1 like
•
2,090 views
dynamis
Follow
Mozilla & NSEG@長野 で使用したスライド https://dev.mozilla.jp/events/workshop10/
Read less
Read more
Technology
News & Politics
Report
Share
Report
Share
1 of 84
Download now
Download to read offline
Recommended
Browser and Mozilla
Browser and Mozilla
dynamis
Firefox FAQ
Firefox FAQ
dynamis
Firefox Security Features
Firefox Security Features
dynamis
Web Technology Meeting
Web Technology Meeting
dynamis
Apps for Web Platform
Apps for Web Platform
dynamis
JavaScript.Next
JavaScript.Next
dynamis
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
日本Javaユーザーグループ
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Shumpei Shiraishi
Recommended
Browser and Mozilla
Browser and Mozilla
dynamis
Firefox FAQ
Firefox FAQ
dynamis
Firefox Security Features
Firefox Security Features
dynamis
Web Technology Meeting
Web Technology Meeting
dynamis
Apps for Web Platform
Apps for Web Platform
dynamis
JavaScript.Next
JavaScript.Next
dynamis
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
メッセージングプラットフォーム Zimbra の紹介とその活用術 - JJUG ナイトセミナー2013/3
日本Javaユーザーグループ
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Shumpei Shiraishi
VMware Fusion と WiFi ネットワークでの注意点
VMware Fusion と WiFi ネットワークでの注意点
tshiroyama
WordPressとリスク管理 at 第42回 WordBench大阪
WordPressとリスク管理 at 第42回 WordBench大阪
Kitani Kimiya
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
Makoto Ueki
Edge と IE、来年からの Web 制作
Edge と IE、来年からの Web 制作
Osamu Monoe
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
Masayuki Maekawa
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
tamotsu toyoda
Dotnetlab 20110827
Dotnetlab 20110827
hirookun
ゲームインフラコンテナ実践導入
ゲームインフラコンテナ実践導入
Hiroki Tamiya
What makes pyramid unique
What makes pyramid unique
Atsushi Odagiri
Windows Azure Media Serviceで作成する割と普通な動画サイト
Windows Azure Media Serviceで作成する割と普通な動画サイト
normalian
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
mganeko
WebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞ
Kohei Kawasaki
Nseg20120825
Nseg20120825
hiro345
Open Liberty: オープンソースになったWebSphere Liberty
Open Liberty: オープンソースになったWebSphere Liberty
Takakiyo Tanaka
Mojolicious::Liteを使ってみよう
Mojolicious::Liteを使ってみよう
charsbar
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
Firefox with HTML+CSS
Firefox with HTML+CSS
dynamis
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Takeshi Yoshida
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
Kazuhiro Hara
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
Kousuke Ebihara
More Related Content
What's hot
VMware Fusion と WiFi ネットワークでの注意点
VMware Fusion と WiFi ネットワークでの注意点
tshiroyama
WordPressとリスク管理 at 第42回 WordBench大阪
WordPressとリスク管理 at 第42回 WordBench大阪
Kitani Kimiya
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
Makoto Ueki
Edge と IE、来年からの Web 制作
Edge と IE、来年からの Web 制作
Osamu Monoe
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
Masayuki Maekawa
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
tamotsu toyoda
Dotnetlab 20110827
Dotnetlab 20110827
hirookun
ゲームインフラコンテナ実践導入
ゲームインフラコンテナ実践導入
Hiroki Tamiya
What makes pyramid unique
What makes pyramid unique
Atsushi Odagiri
Windows Azure Media Serviceで作成する割と普通な動画サイト
Windows Azure Media Serviceで作成する割と普通な動画サイト
normalian
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
mganeko
WebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞ
Kohei Kawasaki
Nseg20120825
Nseg20120825
hiro345
Open Liberty: オープンソースになったWebSphere Liberty
Open Liberty: オープンソースになったWebSphere Liberty
Takakiyo Tanaka
Mojolicious::Liteを使ってみよう
Mojolicious::Liteを使ってみよう
charsbar
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
Firefox with HTML+CSS
Firefox with HTML+CSS
dynamis
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Takeshi Yoshida
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
Kazuhiro Hara
What's hot
(20)
VMware Fusion と WiFi ネットワークでの注意点
VMware Fusion と WiFi ネットワークでの注意点
WordPressとリスク管理 at 第42回 WordBench大阪
WordPressとリスク管理 at 第42回 WordBench大阪
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
Edge と IE、来年からの Web 制作
Edge と IE、来年からの Web 制作
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
Dotnetlab 20110827
Dotnetlab 20110827
ゲームインフラコンテナ実践導入
ゲームインフラコンテナ実践導入
What makes pyramid unique
What makes pyramid unique
Windows Azure Media Serviceで作成する割と普通な動画サイト
Windows Azure Media Serviceで作成する割と普通な動画サイト
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
WebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞ
Nseg20120825
Nseg20120825
Open Liberty: オープンソースになったWebSphere Liberty
Open Liberty: オープンソースになったWebSphere Liberty
Mojolicious::Liteを使ってみよう
Mojolicious::Liteを使ってみよう
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Firefox with HTML+CSS
Firefox with HTML+CSS
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
Similar to Firefox5+HTML5×5
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
Kousuke Ebihara
HTML5 in Firefox4
HTML5 in Firefox4
dynamis
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
ヒカルのGo 資料 Webアプリケーションの作り方
ヒカルのGo 資料 Webアプリケーションの作り方
Yosuke Furukawa
APIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
Tomohiro Ichimura
CSS Design and Programming
CSS Design and Programming
Taku AMANO
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
Kazuhiro Hara
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
ThinReports
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
LogbackからLog4j 2への移行によるアプリケーションのスループット改善 ( JJUG CCC 2021 Fall )
LogbackからLog4j 2への移行によるアプリケーションのスループット改善 ( JJUG CCC 2021 Fall )
Hironobu Isoda
TDC20111031_Groovy_Geb
TDC20111031_Groovy_Geb
Nobuhiro Sue
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Makoto Kato
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
もう XAMPP / MAMP はいらない! Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない! Vagrant で作る PHP 開発環境
Masashi Shinbara
Node予備校 vol.1 名古屋
Node予備校 vol.1 名古屋
Mori Shingo
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
ksimoji
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
Similar to Firefox5+HTML5×5
(20)
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
HTML5 in Firefox4
HTML5 in Firefox4
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
ヒカルのGo 資料 Webアプリケーションの作り方
ヒカルのGo 資料 Webアプリケーションの作り方
APIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
CSS Design and Programming
CSS Design and Programming
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
LogbackからLog4j 2への移行によるアプリケーションのスループット改善 ( JJUG CCC 2021 Fall )
LogbackからLog4j 2への移行によるアプリケーションのスループット改善 ( JJUG CCC 2021 Fall )
TDC20111031_Groovy_Geb
TDC20111031_Groovy_Geb
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
もう XAMPP / MAMP はいらない! Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない! Vagrant で作る PHP 開発環境
Node予備校 vol.1 名古屋
Node予備校 vol.1 名古屋
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
HTML5最新動向
HTML5最新動向
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
More from dynamis
HTTP and 5G (fixed1)
HTTP and 5G (fixed1)
dynamis
HTTP and 5G
HTTP and 5G
dynamis
HTTP and 5G partial draft
HTTP and 5G partial draft
dynamis
Web App Platform Strategy
Web App Platform Strategy
dynamis
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/G
dynamis
Life of html5 (osaka)
Life of html5 (osaka)
dynamis
Web updates 2017
Web updates 2017
dynamis
Life of HTML5
Life of HTML5
dynamis
Browsers in IoT Era
Browsers in IoT Era
dynamis
New Norm of HTML5
New Norm of HTML5
dynamis
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
dynamis
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talk
dynamis
Demo for Gecko Embedded
Demo for Gecko Embedded
dynamis
Project Gecko Embedded
Project Gecko Embedded
dynamis
The New Norm of The Web
The New Norm of The Web
dynamis
Progressive Mobile Web Apps
Progressive Mobile Web Apps
dynamis
Modern Mobile Web Apps
Modern Mobile Web Apps
dynamis
Web Tech & Architecture
Web Tech & Architecture
dynamis
Java script.trend(spec)
Java script.trend(spec)
dynamis
Data Privacy meeting
Data Privacy meeting
dynamis
More from dynamis
(20)
HTTP and 5G (fixed1)
HTTP and 5G (fixed1)
HTTP and 5G
HTTP and 5G
HTTP and 5G partial draft
HTTP and 5G partial draft
Web App Platform Strategy
Web App Platform Strategy
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/G
Life of html5 (osaka)
Life of html5 (osaka)
Web updates 2017
Web updates 2017
Life of HTML5
Life of HTML5
Browsers in IoT Era
Browsers in IoT Era
New Norm of HTML5
New Norm of HTML5
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talk
Demo for Gecko Embedded
Demo for Gecko Embedded
Project Gecko Embedded
Project Gecko Embedded
The New Norm of The Web
The New Norm of The Web
Progressive Mobile Web Apps
Progressive Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Web Tech & Architecture
Web Tech & Architecture
Java script.trend(spec)
Java script.trend(spec)
Data Privacy meeting
Data Privacy meeting
Recently uploaded
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
Hiroshi Tomioka
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Recently uploaded
(9)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
Firefox5+HTML5×5
1.
Firefox5 + HTML5
× 5 Slides @ Mozilla & NSEG @ Nagano by Tomoya ASAI (dynamis) last update on 2011.07.23 see also: http://dynamis.jp/r
2.
Tomoya ASAI (dynamis)
Mozilla Japan - Technical mktg. http://dynamis.jp/ http://facebook.com/dynamis http://twitter.com/dynamitter dynamis@mozilla-japan.org dynamis ( dunamis)
3.
4.
Agenda
5.
Agenda
about:Mozilla Firefox5 + HTML5 Multimedia Tags Animations Web Apps Network Security
6.
7.
Facebook
Twitter
8.
about:mozilla .com brain .org
heart
9.
http://www.flickr.com/photos/intothefuzz/5577427601/
10.
11.
http://www.flickr.com/photos/intothefuzz/5578011308/
12.
: http://www.mozilla.org/about/manifesto.ja.html
13.
http://www.flickr.com/photos/intothefuzz/5577430083/
14.
HTML5 Features New HTML...
15.
Theora
Firefox 3.5~, WebM Firefox4~
16.
<!-- 互換性を考慮したマークアップ --> <video
controls> <source src="video.webm" type="video/webm"/> <source src="video.ogg" type="video/ogg"/> <source src="video.mp4" type="video/mp4"/> <embed src="video.swf" type="application/x- shockwave-flash"/><!-- 最悪 Flash でも --> </video> <!-- ポスターフレームの指定 --> <video controls poster="posterframe.jpg"> ... </video> <!-- 先読みの制御 preload=none/metadata/auto --> <video controls preload="auto"> ... </video> autobuffer preload
17.
<!-- 読み込み済み(キャッシュ)範囲を読み取る --> <video
id="longvideo" src="video.ogv" ... > ... </video> <script> var video = document.getElementById("longvideo"); var ranges = video.buffered; // バッファ済み TimeRanges for (var i=0; i<ranges.length; i++) { var s = ranges.start(i); var e = ranges.end(i); // WebKit ではシークすると end(0)=全体の長さ(バグ) alert(s+"秒から"+e+"秒まで読み込み済み"); } </script> http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
18.
<!-- Firefox6 で
DOM API のみ実装(表示はまだ) --> <video src="video-with-track.xxx"> <track src="track.vtt" srclng="ja"/> </video> <!-- 複数の track を指定することも可能 --> <video src="video-with-track.xxx"> <track src="subtitles.vtt" srclng="ja" kind="subtitles" label="字幕"/> <track src="descriptions.vtt" srclng="ja" kind="descriptions" label="解説"/> </video> <!-- --> https://developer.mozilla.org/en/HTML/Element/track
19.
http://www.mirovideoconverter.com/
20.
Mozilla & HTML5
α https://dev.mozilla.jp/events/workshop09/
21.
Mozilla & HTML5
α https://dev.mozilla.jp/events/workshop09/
22.
Xiph.Org
On2 Tech. Google VP3 Ogg Theora VP4 Vorbis VP5 VP6 WebM Ogg VP7 Matroska VP8 VP8 Vorbis Container Video Audio WebM FAQ: http://www.webmproject.org/about/faq/
23.
http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/
OSS
24.
MS
MPEG-LA FUD
25.
https://tools.google.com/dlpage/webmmf http://www.interoperabilitybridges.com/html5-extension-for-wmp-plugin
http://www.videolan.org/vlc/download-macosx.html
26.
http://vid.ly/
27.
http://www.w3.org/2005/Incubator/audio/
28.
<audio id="input" src="test-tone.ogg"
controls></audio> <div id="display"></div> <script> var input = document.getElementById('input'); var display = document.getElementById('display'); // Audio の入力を監視するイベントリスナを設定 input.addEventListener('MozAudioAvailable', function(e){ // フレームバッファの最初のサンプリングをしてみる display.innerHTML += e.frameBuffer[0] + ', '; }, false ); </script> http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
29.
http://twitter.com/cherenkov/status/21614170698
30.
Animations JavaScript or not
JS?
31.
32.
33.
34.
setTimeout()/setInterval()
35.
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
36.
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
37.
var d =
document.getElementById("d"); // 動かす対象要素 var start = window.mozAnimationStartTime; function step(event) { var progress = event.timeStamp - start; // Date.now() 代わり d.style.left = Math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozRequestAnimationFrame(); // setTimeout() 代わり } else { window.removeEventListener("MozBeforePaint", step, false); } } // RequestAnimationFrame でフレーム描画前に実行する関数を設定 window.addEventListener("MozBeforePaint", step, false); // 次のフレーム再描画前に BeforePaint に設定した関数を実行 window.mozRequestAnimationFrame(); // setTimeout() 代わり http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
38.
https://developer.mozilla.org/en/Canvas_tutorial
39.
http://www.w3.org/TR/html5/the-canvas-element.html#security-with-canvas-elements
40.
http://googlecode.blogspot.com/2011/05/creating-2d-games-with-javascript-html5.html
41.
http://muizelaar.blogspot.com/2011/02/drawing-sprites-canvas-2d-vs-webgl.html
42.
http://processingjs.org/ http://code.google.com/p/cakejs/ http://www.highcharts.com/ http://graph.tk/ http://thejit.org/
43.
https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL
44.
http://dynamis.jp/demo/smil/ovaling.svg <svg ... xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="..."> ... <ellipse cx="290" cy="200" rx="80" ry="80"><!-- 中心の円 --> <!-- 毎秒指定色へと変化する 5秒間の色変更を無限に繰り返す --> <animate attributeType="CSS" attributeName="fill" dur="5s" values="#ff8; #f88; #f8f; #88f; #8ff; #8f8" keyTimes="0; .2; .4; .6; .8; 1" repeatCount="indefinite"/> </ellipse> ... <g id="R1" transform="translate(200, 200)"><!-- グループ化 --> <ellipse id="EL" cx="0" cy="0" rx="100" ry="30" ...><!-- 周囲の楕円 --> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite"/><!-- 回転 --> <animate attributeName="cx" dur="8s" values="-20; 120; -20" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 中心の移動 --> <animate attributeName="ry" dur="3s" values="10; 60; 10" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 半径の変更 --> </ellipse> </g> <use xlink:href="#R1" transform="rotate(30, 300, 200)"/><!-- 回転複製 --> ... </svg>
45.
animateColor
https://bugzilla.mozilla.org/show_bug.cgi?id=436296
46.
http://raphaeljs.com/ http://g.raphaeljs.com/ http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on- when-to-use-canvas-and-svg.aspx http://www.codedread.com/svg-support.php
47.
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
48.
#somebox {
color: black; background-color: yellow; /* すべてのスタイルを2秒かけて変化、開始はなめらかに */ -moz-transition: all 2s ease-in; transition: all 2s ease-in; } #somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5); } http://hacks.mozilla.org/2010/07/firefox4-beta2/
49.
Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations
50.
http://www.khronos.org/webgl/
51.
<canvas id="glcanvas" width="640" height="480"/> <script type="text/javascript"> var canvas = document.getElementById("glcanvas"); //
WebGL コンテキストを取得 // コンテキスト名は仕様確定まで "experimental-webgl" var gl = canvas.getContext("webgl") || canvas.getContext("experimantal-webgl"); if (gl) { // ... OpenGL 同様にいろいろ描画処理 ... // Int32Array など固定型配列も使って高速演算可能 } </script> http://webos-goodies.jp/archives/getting_started_with_webgl.html
52.
https://dev.mozilla.jp/2011/06/a-three-dimensional-platform/
53.
54.
http://scenejs.org/ http://www.glge.org/ https://github.com/mrdoob/three.js https://github.com/cjcliffe/CubicVR.js/
: http://www.khronos.org/webgl/wiki/User_Contributions
55.
56.
57.
58.
59.
60.
Web Apps Web Platform
61.
62.
window.addEventListener("online", function()
// オンラインになった時の処理 }, true); window.addEventListener("offline", function() { // オフラインになったときの処理 }, true);
63.
// セッションをまた保持するデータ localStorage.dataname =
"datavalue"; // ブラウザ終了するまで一時的に保存 sessionStorage.dataname = "datavalue"; DOM Storage
64.
<!DOCTYPE html> <html manifest="myapp.manifest"
lang="ja"> myapp.manifest CACHE MANIFEST images/firefox.png images/thunderbird.png NETWORK: dont-cache-this.php CACHE: cache-this-too.html
65.
66.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
67.
// <a href="/newpath"
id="link">move to newpath</a> var link = document.getElementById("link"); link.addEventListener("click", function(e) { // ページ遷移せず URL を書き換え履歴を追加 history.pushState(null, "New URL", link.href); swapContents(link.href); e.preventDefault(); // ページ遷移無効化 }, true); function swapContents(href) { // 新 URL のコンテンツを XHR で取得して置き換えるなど // URL 変更に応じたコンテンツ書き換え処理 } http://dl.dropbox.com/u/130643/dih5ja/history.html https://github.com/
68.
https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
69.
// <button id="button">Save
Current State</button> var button = document.getElementById("link"); button.addEventListener("click", function(e) { var currentState = {some: "foo", another: "bar"}; // URL 変更せず状態データを記憶した履歴を追加 history.pushState(currentState, "New State"); }, true); function restoreState(stateData) { // 保存されているデータを用いてページの状態を復元 } // 状態データが保存されていたらロード中にすぐ初期化処理 if (history.state) { restoreState(history.state); } https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
70.
Network Connect with you...
71.
72.
73.
74.
// WebSocket の接続を開始 var
socket = new MozWebSocket(url /* ,protocol */); // on*** イベントハンドラを設定 socket.onopen = function(event) { // send() メソッドでサーバにテキストを送信 socket.send("Hello, WebSocket Server!"); } // onmessage イベントハンドラでサーバからテキスト受信 socket.onmessage = function(event) { alert("data from server: "+event.data); } socket.onerror = function(e) { alert("Error!"); } socket.onclose = function(e) { alert("Closed."); } https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
75.
Security more Secure Web...
76.
https://developer.mozilla.org/ja/Introducing_Content_Security_Policy
77.
// 全コンテンツを同一ドメインのみ (サブドメインも不可) X-Content-Security-Policy:
default-src 'self' // 自身と dynamis.jp のサブドメインのみ許可 X-Content-Security-Policy: default-src 'self' *.dynamis.jp // secure.mozilla.jp からの読み込みは HTTPS のみ X-Content-Security-Policy: default-src https://secure.mozilla.jp/ https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy
78.
// 画像は任意サイト、メディアファイルと JS
は指定サイトに限定 X-Content-Security-Policy: default-src 'self'; img-src *; (実際は改行なし) media-src video.tld audio.tld; (実際は改行なし) script-src script.tld; // 自身と *.mail.jp は全許可、他サイトは画像のみに制限 // スクリプトなど指定していないものは default-src と同じ X-Content-Security-Policy: defaut-src 'self' *.mail.jp; (実際は改行なし) img-src * https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy
79.
80.
// dynamis.jp のページからはこのサイトの読み込み許可 Access-Control-Allow-Origin:
http://dynamis.jp // 任意サイトからの読み込みを許可 (公開 API などに) Access-Control-Allow-Origin: * https://developer.mozilla.org/en/http_access_control
81.
82.
http://r.dynamis.jp/mozhacks
83.
84.
Any Question ?
Download now