More Related Content
Similar to Firefox5+HTML5×5 (20)
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)
- 5. Agenda
about:Mozilla
Firefox5 + HTML5
Multimedia Tags
Animations
Web Apps
Network
Security
- 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
- 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/
- 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/
- 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
- 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
- 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/
- 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/
- 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/
- 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/
- 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