ECMAScript 5与HTML5的支持情况 | 影の域

影の域

关注web前端,追逐html5脚步,体会code人生

ECMAScript 5与HTML5的支持情况

| 11,481 点击

ECMAScript 5与HTML5离我们越来越近了,触摸屏相关的API开发中,未来的web世界更加多姿多彩。

Object.getPrototypeOf
支持浏览器:firefox3.6 chrome4

http://codereview.chromium.org/518056

Object.getOwnPropertyDescriptor
支持浏览器:IE8 chrome4

http://code.google.com/p/chromium/issues/detail?id=20345

Object.keys
支持浏览器: chrome4

http://code.google.com/p/chromium/issues/detail?id=21767

Object.defineProperty
支持浏览器: IE8

http://msdn.microsoft.com/en-us/library/dd548687(VS.85).aspx

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object/defineProperty

Object.create
支持浏览器: chrome4

http://msdn.microsoft.com/en-us/library/dd548687(VS.85).aspx

Object.getOwnPropertyNames
支持浏览器: chrome4

http://code.google.com/p/v8/source/detail?r=3620

关于Object的扩展,可以看John Resig的这一篇博文《ECMAScript 5 Objects and Properties》

JSON
支持浏览器: IE8 chrome1+ safari3+ firefox3+

JSON.parse( text, translate )
JSON.stringify( obj, translate )
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
Date.prototype.toJSON
http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/

http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

Date.now
支持浏览器: chrome4 firefox2+ safari4

http://trac.webkit.org/changeset/33422

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date/now

Date.prototype.toISOString
支持浏览器: chrome4 firefox3.6 safari4

https://bugs.webkit.org/show_bug.cgi?id=26594

String.prototype.trim
支持浏览器: chrome1+ firefox3+

https://bugs.webkit.org/show_bug.cgi?id=26590

http://code.google.com/p/v8/issues/detail?id=465

https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/String/Trim

“Array extras”
Array.prototype.{indexOf,lastIndexOf,every,some,forEach,map,filter,reduce,reduceRight}

IE8全部不支持,Opera不支持reduce,reduceRight,chrome与safari与firefox早就实现了

https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

Array.isArray
支持浏览器: chrome4

http://codereview.chromium.org/271072

ECMAScript 5 Getters and Setters
这是旧有的javascript不能模拟的新特性!

o = {
a:7,
get b() { return this.a+1; },
set c(x) { this.a = x/2; }
};
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

支持浏览器:Firefox 2.0+, Safari 3.0+, Chrome 1.0+, Opera 9.5+

非标准,Firefox1.5里的旧方法

HTMLElement.prototype.__defineGetter__(“innerHTML”, function () {});
HTMLElement.prototype.__defineSetter__(“innerHTML”, function (val) {});
支持浏览器:Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+

标准

Object.defineProperty(document.body, “innerHTML”, { get : function () {} });
MSDN文档:http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx
支持:IE8+ (只能对DOM使用)

HTML5 DOM Storage
window.localStorage
window.sessionStorage //可跨域,标签页关掉就清空
支持浏览器:Firefox 3.5+, Safari 4.0+, IE 8.0+

http://www.w3.org/TR/webstorage/

http://www.quirksmode.org/dom/html5.html#localstorage

https://developer.mozilla.org/en/DOM/Storage

http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

HTML5 Offline Application Cache
用一个manifest文件缓存静态资源(图片,css, js之类)在离线状态下使用,不是结构化数据

<html manifest=”foo.manifest”>
<h1>Entry</h1>
</html>
支持浏览器:Firefox 3.5+

http://www.w3.org/TR/offline-webapps/#offline

https://developer.mozilla.org/en/Offline_resources_in_Firefox

HTML5 Web SQL Database Storage
//2007年就实现了!
var database = openDatabase(“Database Name”, “Database Version”);

database.executeSql(“SELECT * FROM test”, function(result1) {
// do something with the results
database.executeSql(“DROP TABLE test”, function(result2) {
// do some more stuff
alert(“My second database query finished executing!”);
});
});
支持浏览器:Safari, iPhone OS 3, Opera 10.50,chrome4

http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/

http://www.weboshelp.net/getting-started-with-webos/156-palm-webos-html5-database-storage-tutorial/

HTML5 Web Workers
实现多线程!?

var worker = new Worker(“worker.js”);
// Watch for messages from the worker
worker.onmessage = function(e){
// The message from the client:
e.data
};

worker.postMessage(“start”);
支持浏览器:firefox3.1+

http://www.w3.org/TR/workers/

https://developer.mozilla.org/En/Using_web_workers

日本人用它来实现的框架

HTML5 Geolocation
支持浏览器:FF3.5+, iPhone OS 3
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<meta name=”viewport” content=”width=620″ />
<title>HTML5 Demo: geolocation</title>
<style>
body {
font: normal 16px/20px Helvetica, sans-serif;
background: rgb(237, 237, 236);
margin: 0;
margin-top: 40px;
padding: 0;
}

section, header, footer {
display: block;
}

#wrapper {
width: 600px;
margin: 0 auto;
background: #fff url(images/shade.jpg) repeat-x center bottom;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 1px solid #fff;
padding-bottom: 76px;
}

h1 {
padding-top: 10px;
}

h2 {
font-size: 100%;
font-style: italic;
}

header,
article > *,
footer > * {
margin: 20px;
}

footer > * {
margin: 20px;
color: #999;
}

#status {
padding: 5px;
color: #fff;
background: #ccc;
}

#status.fail {
background: #c00;
}

#status.success {
background: #0c0;
}
</style>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
</head>
<body>
<section id=”wrapper”>
<header>

<h1>Geolocation</h1>
</header>
<article>
<p>Finding your location: <span id=”status”>checking…</span></p>
</article>
<footer><a href=”http://www.cnblogs.com/rubylouvre/archive/2010/02/16/1668647.html”>返回</a></footer>
</section>

<script>
function success(position) {
var s = document.querySelector(‘#status’);

if (s.className == ‘success’) {
// not sure why we’re hitting this twice in FF, I think it’s to do with a cached result coming back
return;
}

s.innerHTML = “found you!”;
s.className = ‘success’;

var mapcanvas = document.createElement(‘div’);
mapcanvas.id = ‘mapcanvas’;
mapcanvas.style.height = ‘400px’;
mapcanvas.style.width = ‘100%’;

document.querySelector(‘article’).appendChild(mapcanvas);

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“mapcanvas”), myOptions);

var marker = new google.maps.Marker({
position: latlng,
map: map,
title:”You are here!”
});
}

function error(msg) {
var s = document.querySelector(‘#status’);
s.innerHTML = typeof msg == ‘string’ ? msg : “failed”;
s.className = ‘fail’;

// console.log(arguments);
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error(‘not supported’);
}

</script>

</body>
</html>

运行代码

http://www.w3.org/TR/geolocation-API/

https://developer.mozilla.org/En/Using_geolocation

HTML5 Drag and Drop
原生拖放API
<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”/>
<title>HTML5 Drag and drop demonstration</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}

body {
margin: 50px;
font-family: helvetica, arial;
}

li {
list-style: none;
}

li a {
text-decoration: none;
color: #000;
margin: 10px;
width: 150px;
border: 3px dashed #999;
background: #eee;
padding: 10px;
display: block;
}

*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}

*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}

a:hover:after {
content: ‘ (drag me)’;
}

li.over {
border-color: #333;
background: #ccc;
}

#bin {
background: url(http://html5demos.com/images/bin.jpg) top right no-repeat;
height: 250px;
width: 166px;
float: right;
border: 5px solid #000;
position: relative;
}

#bin.over {
background: url(images/bin.jpg) top left no-repeat;
}

#bin p {
font-weight: bold;
text-align: center;
position: absolute;
bottom: 20px;
width: 166px;
font-size: 32px;
color: #fff;
text-shadow: #000 2px 2px 2px;
}

</style>
</head>
<body>
<div id=”bin”></div>
<ul>
<li><a id=”one” href=”#”>one</a></li>
<li><a href=”#” id=”two”>two</a></li>
<li><a href=”#” id=”three”>three</a></li>
<li><a href=”#” id=”four”>four</a></li>
<li><a href=”#” id=”five”>five</a></li>
</ul>
<script src=”http://files.cnblogs.com/rubylouvre/html5.js”></script>
<script>

var eat = [‘yum!’, ‘gulp’, ‘burp!’, ‘nom’];
var yum = document.createElement(‘p’);
var msie = /*@cc_on!@*/0;
yum.style.opacity = 1;

var links = document.querySelectorAll(‘li > a’), el = null;
for (var i = 0; i < links.length; i++) {
el = links[i];

el.setAttribute(‘draggable’, ‘true’);

addEvent(el, ‘dragstart’, function (e) {
e.dataTransfer.effectAllowed = ‘move’;
e.dataTransfer.setData(‘Text’, this.id); // required otherwise doesn’t work
});
}

var bin = document.querySelector(‘#bin’);

addEvent(bin, ‘dragover’, function (e) {
if (e.preventDefault) e.preventDefault(); // allows us to drop
this.className = ‘over’;
return false;
});

// to get IE to work
addEvent(bin, ‘dragenter’, function (e) {
this.className = ‘over’;
return false;
});

addEvent(bin, ‘dragleave’, function () {
this.className = ”;
});

addEvent(bin, ‘drop’, function (e) {
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting…why???

var el = document.getElementById(e.dataTransfer.getData(‘Text’));

el.parentNode.removeChild(el);

// stupid nom text + fade effect
bin.className = ”;
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

var y = yum.cloneNode(true);
bin.appendChild(y);

setTimeout(function () {
var t = setInterval(function () {
if (y.style.opacity <= 0) {
if (msie) { // don’t bother with the animation
y.style.display = ‘none’;
}
clearInterval(t);
} else {
y.style.opacity -= 0.1;
}
}, 50);
}, 250);

return false;
});

</script>

</body>
</html>

运行代码

支持浏览器:IE8, Safari 4, FF3.5

IE8如果报错,请刷新当前页面……

http://www.w3.org/TR/html5/editing.html#dnd

https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

HTML5 Video
支持浏览器:Safari 4, FF3.5,chrome3+
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=utf-8 />
<title>HTML5 Demo: video</title>
<style>
body {
font: normal 16px/20px Helvetica, sans-serif;
background: rgb(237, 237, 236);
margin: 0;
margin-top: 40px;
padding: 0;
}

article, section, header, footer {
display: block;
}

#wrapper {
width: 600px;
margin: 0 auto;
background: #fff url(http://html5demos.com/images/shade.jpg) repeat-x center bottom;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 1px solid #fff;
padding-bottom: 76px;
}

h1 {
padding-top: 10px;
}

h2 {
font-size: 100%;
font-style: italic;
}

header,
article > *,
footer a,
footer p {
margin: 20px;
}

footer > * {
margin: 20px;
color: #999;
}

article {
display: block;
position: relative;
}

</style>
</head>
<body>
<section id=”wrapper”>
<header>
<h1>Video</h1>
</header>
<article>
<video>
<source src=”http://html5demos.com/dizzy.mp4″ />
<source src=”http://html5demos.com/dizzy.ogv” />
</video>
<p id=”controls”>
<input type=”button” id=”play” value=”play”>
<span id=”position”>00:00</span> / <span id=”duration”>loading…</span>
</p>
<p>Note that (at time of writing) <a href=”http://webkit.org/” title=”The WebKit Open Source Project”>Webkit nightly</a> supports full screen mode, which will add a button above.</p>
</article>
<footer><a href=”http://www.cnblogs.com/rubylouvre/”>返回</a></footer>
</section>
<script src=”http://html5demos.com/h5utils.js”></script>
<script>
var video = document.querySelector(‘video’),
togglePlay = document.querySelector(‘#play’),
position = document.querySelector(‘#position’),
ready = false,
controls = document.querySelector(‘#controls’),
fullscreen = null;

addEvent(togglePlay, ‘click’, function () {
if (ready) {
video.playbackRate = 0.5;
if (video.paused) {
if (video.ended) video.currentTime = 0;
video.play();
this.value = “pause”;
} else {
video.pause();
this.value = “play”;
}
}
});

addEvent(video, ‘timeupdate’, function () {
position.innerHTML = asTime(this.currentTime);
});

addEvent(video, ‘ended’, function () {
togglePlay.value = “play”;
});

addEvent(video, ‘canplay’, function () {
video.muted = true;
ready = true;
document.querySelector(‘#duration’).innerHTML = asTime(this.duration);

// note: .webkitSupportsFullscreen is false while the video is loading, so we bind in to the canplay event
if (video.webkitSupportsFullscreen) {
fullscreen = document.createElement(‘input’);
fullscreen.setAttribute(‘type’, ‘button’);
fullscreen.setAttribute(‘value’, ‘fullscreen’);
controls.insertBefore(fullscreen, controls.firstChild);
addEvent(fullscreen, ‘click’, function () {
video.webkitEnterFullScreen();
});
}

});

function asTime(t) {
t = Math.round(t);
var s = t % 60;
var m = Math.round(t / 60);

return two(m) + ‘:’ + two(s);
}

function two(s) {
s += “”;
if (s.length < 2) s = “0” + s;
return s;
}
</script>

</body>
</html>

运行代码

https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

http://webkit.org/blog/140/html5-media-support/

HTML5 audio
支持浏览器:Safari 4, FF3.5,chrome3+
<!doctype html>
<html dir=”ltr” lang=”zh-CN”>
<head>
<meta charset=”utf-8″/>
<title>阅读器</title>
</head>
<body >
<article id=”nativity-story-from-luke”
xmlns:o=”http://www.bibletechnologies.net/2003/OSIS/namespace”>
<style scoped=””>
/*@namespace o “http://www.bibletechnologies.net/2003/OSIS/namespace”;
o|verse[osisID]:before,
verse[osisID]:before {
content: ” ” attr(osisID);
font-size:smaller;
vertical-align:super;
}*/
#nativity-story-from-luke audio {
display:block;
margin-top:1em;
margin-bottom:1em;
width:100%;
}
#nativity-story-from-luke span[data-begin]::selection { background-color:yellow; }
#nativity-story-from-luke span[data-begin]::-moz-selection { background-color:yellow; }
#nativity-story-from-luke span[data-begin] {
cursor:pointer;
}
#nativity-story-from-luke span[data-begin]:hover {
background-color:#FFFFCA;
}
#nativity-story-from-luke .error {
color:red;
}
#nativity-story-from-luke footer {
line-height:1.1em;
margin-top:1em;
}
html #nativity-story-from-luke h2 { /* for appearance on my site */
font-size:1.3em;
margin-top:0;
padding-top:0.5em;
margin-bottom:1em;
}
</style>
<!–
<o:work osisWork=”ESV”>
<o:title>English Standard Version</o:title>
<o:type type=”OSIS”>Bible</o:type>
<o:identifier type=”OSIS”>Bible.en.Crossway.ESV.2001</o:identifier>
<o:scope>Luke.2.1-Luke.2.20</o:scope>
<o:refSystem>Bible</o:refSystem>
</o:work>
<o:work osisWork=”bible”>
<o:type type=”OSIS”>Bible</o:type>
<o:refSystem>Bible</o:refSystem>
</o:work>
–>

<h2><a href=”http://www.gnpcb.org/esv/search/?q=Luke+2%3A1-20″ title=”View Luke 2:1-20 at the ESV Online” target=”_blank”>Luke 2:1-20</a> (<a href=”http://www.esv.org”><abbr title=”English Standard Version”>ESV</abbr></a>)</h2>

<audio controls=”” style=”width:100%; height:2em;”>
<source src=”http://weston.ruter.net/projects/html5-audio-read-along/Luke.2.1-Luke.2.20.mp3″ type=”audio/mp3″ />
<source src=”http://weston.ruter.net/projects/html5-audio-read-along/Luke.2.1-Luke.2.20.ogg” type=”audio/ogg” />
<source src=”http://weston.ruter.net/projects/html5-audio-read-along/Luke.2.1-Luke.2.20.wav” type=”audio/wav” />
<em class=’error’><strong>Notice:</strong> Your browser doesn’t appear to support HTML5 Audio. Please use try Firefox 3.5, Chrome, or Safari.</em>
</audio>
<noscript>
<p class=’error’><em><strong>Notice:</strong> You must have JavaScript enabled/available to try this HTML5 Audio read along. If you’re
viewing this in a feed reader, try <a href=”http://weston.ruter.net/projects/html5-audio-read-along/#nativity-story-from-luke”>viewing outside</a>.</em></p>
</noscript>

<!–<h3>The Birth of Jesus Christ</h3>–>
<p><o:verse sID=”Luke.2.1″ osisID=”Luke.2.1″/><span data-dur=”0.154″ data-begin=”0.775″>In</span> <span data-dur=”0.28″ data-begin=”0.929″>those</span> <span data-dur=”0.29″ data-begin=”1.218″>days</span> <span data-dur=”0.131″ data-begin=”1.508″>a</span> <span data-dur=”0.525″ data-begin=”1.639″>decree</span> <span data-dur=”0.191″ data-begin=”2.165″>went</span> <span data-dur=”0.225″ data-begin=”2.355″>out</span> <span data-dur=”0.245″ data-begin=”2.583″>from</span> <span data-dur=”0.438″ data-begin=”2.828″>Caesar</span> <span data-dur=”0.637″ data-begin=”3.267″>Augustus</span> <span data-dur=”0.166″ data-begin=”4.03″>that</span> <span data-dur=”0.268″ data-begin=”4.216″>all</span> <span data-dur=”0.111″ data-begin=”4.486″>the</span> <span data-dur=”0.411″ data-begin=”4.594″>world</span> <span data-dur=”0.205″ data-begin=”5.006″>should</span> <span data-dur=”0.134″ data-begin=”5.211″>be</span> <span data-dur=”0.529″ data-begin=”5.344″>registered</span>. <o:verse eID=”Luke.2.1″/><o:verse sID=”Luke.2.2″ osisID=”Luke.2.2″/><span data-dur=”0.201″ data-begin=”6.675″>This</span> <span data-dur=”0.124″ data-begin=”6.876″>was</span> <span data-dur=”0.11″ data-begin=”7″>the</span> <span data-dur=”0.321″ data-begin=”7.11″>first</span> <span data-dur=”0.762″ data-begin=”7.431″>registration</span> <span data-dur=”0.164″ data-begin=”8.193″>when</span> <span data-dur=”0.474″ data-begin=”8.357″>Quirinius</span> <span data-dur=”0.206″ data-begin=”8.834″>was</span> <span data-dur=”0.338″ data-begin=”9.041″>governor</span> <span data-dur=”0.082″ data-begin=”9.379″>of</span> <span data-dur=”0.477″ data-begin=”9.46″>Syria</span>. <o:verse eID=”Luke.2.2″/><o:verse sID=”Luke.2.3″ osisID=”Luke.2.3″/><span data-dur=”0.119″ data-begin=”10.676″>And</span> <span data-dur=”0.24″ data-begin=”10.794″>all</span> <span data-dur=”0.186″ data-begin=”11.034″>went</span> <span data-dur=”0.087″ data-begin=”11.22″>to</span> <span data-dur=”0.139″ data-begin=”11.307″>be</span> <span data-dur=”0.592″ data-begin=”11.446″>registered</span>, <span data-dur=”0.251″ data-begin=”12.284″>each</span> <span data-dur=”0.093″ data-begin=”12.572″>to</span> <span data-dur=”0.134″ data-begin=”12.665″>his</span> <span data-dur=”0.275″ data-begin=”12.799″>own</span> <span data-dur=”0.467″ data-begin=”13.074″>town</span>. <o:verse eID=”Luke.2.3″/><o:verse sID=”Luke.2.4″ osisID=”Luke.2.4″/><span data-dur=”0.184″ data-begin=”14.369″>And</span> <span data-dur=”0.358″ data-begin=”14.553″>Joseph</span> <span data-dur=”0.351″ data-begin=”14.911″>also</span> <span data-dur=”0.128″ data-begin=”15.262″>went</span> <span data-dur=”0.152″ data-begin=”15.39″>up</span> <span data-dur=”0.215″ data-begin=”15.595″>from</span> <span data-dur=”0.541″ data-begin=”15.811″>Galilee</span>, <span data-dur=”0.074″ data-begin=”16.557″>from</span> <span data-dur=”0.121″ data-begin=”16.632″>the</span> <span data-dur=”0.236″ data-begin=”16.752″>town</span> <span data-dur=”0.097″ data-begin=”16.988″>of</span> <span data-dur=”0.559″ data-begin=”17.085″>Nazareth</span>, <span data-dur=”0.154″ data-begin=”17.966″>to</span> <span data-dur=”0.575″ data-begin=”18.12″>Judea</span>, <span data-dur=”0.129″ data-begin=”18.823″>to</span> <span data-dur=”0.059″ data-begin=”18.952″>the</span> <span data-dur=”0.31″ data-begin=”19.011″>city</span> <span data-dur=”0.166″ data-begin=”19.321″>of</span> <span data-dur=”0.393″ data-begin=”19.487″>David</span>, <span data-dur=”0.161″ data-begin=”20.029″>which</span> <span data-dur=”0.109″ data-begin=”20.19″>is</span> <span data-dur=”0.307″ data-begin=”20.321″>called</span> <span data-dur=”0.642″ data-begin=”20.628″>Bethlehem</span>, <span data-dur=”0.317″ data-begin=”21.76″>because</span> <span data-dur=”0.116″ data-begin=”22.077″>he</span> <span data-dur=”0.104″ data-begin=”22.193″>was</span> <span data-dur=”0.166″ data-begin=”22.297″>of</span> <span data-dur=”0.059″ data-begin=”22.463″>the</span> <span data-dur=”0.412″ data-begin=”22.522″>house</span> <span data-dur=”0.155″ data-begin=”22.935″>and</span> <span data-dur=”0.384″ data-begin=”23.09″>lineage</span> <span data-dur=”0.175″ data-begin=”23.474″>of</span> <span data-dur=”0.421″ data-begin=”23.648″>David</span>, <o:verse eID=”Luke.2.4″/><o:verse sID=”Luke.2.5″ osisID=”Luke.2.5″/><span data-dur=”0.127″ data-begin=”24.714″>to</span> <span data-dur=”0.172″ data-begin=”24.84″>be</span> <span data-dur=”0.53″ data-begin=”25.013″>registered</span> <span data-dur=”0.125″ data-begin=”25.543″>with</span> <span data-dur=”0.515″ data-begin=”25.668″>Mary</span>, <span data-dur=”0.172″ data-begin=”26.183″>his</span> <span data-dur=”0.607″ data-begin=”26.355″>betrothed</span>, <span data-dur=”0.123″ data-begin=”27.134″>who</span> <span data-dur=”0.166″ data-begin=”27.257″>was</span> <span data-dur=”0.167″ data-begin=”27.423″>with</span> <span data-dur=”0.513″ data-begin=”27.59″>child</span>. <o:verse eID=”Luke.2.5″/><o:verse sID=”Luke.2.6″ osisID=”Luke.2.6″/><span data-dur=”0.161″ data-begin=”29.448″>And</span> <span data-dur=”0.362″ data-begin=”29.609″>while</span> <span data-dur=”0.159″ data-begin=”29.97″>they</span> <span data-dur=”0.166″ data-begin=”30.129″>were</span> <span data-dur=”0.436″ data-begin=”30.295″>there</span>, <span data-dur=”0.159″ data-begin=”31.072″>the</span> <span data-dur=”0.431″ data-begin=”31.231″>time</span> <span data-dur=”0.277″ data-begin=”31.662″>came</span> <span data-dur=”0.161″ data-begin=”31.939″>for</span> <span data-dur=”0.093″ data-begin=”32.1″>her</span> <span data-dur=”0.107″ data-begin=”32.193″>to</span> <span data-dur=”0.233″ data-begin=”32.299″>give</span> <span data-dur=”0.352″ data-begin=”32.522″>birth</span>. <o:verse eID=”Luke.2.6″/><o:verse sID=”Luke.2.7″ osisID=”Luke.2.7″/><span data-dur=”0.133″ data-begin=”33.972″>And</span> <span data-dur=”0.213″ data-begin=”34.105″>she</span> <span data-dur=”0.277″ data-begin=”34.318″>gave</span> <span data-dur=”0.253″ data-begin=”34.596″>birth</span> <span data-dur=”0.069″ data-begin=”34.888″>to</span> <span data-dur=”0.171″ data-begin=”34.957″>her</span> <span data-dur=”0.602″ data-begin=”35.128″>firstborn</span> <span data-dur=”0.56″ data-begin=”35.73″>son</span> <span data-dur=”0.166″ data-begin=”36.491″>and</span> <span data-dur=”0.342″ data-begin=”36.657″>wrapped</span> <span data-dur=”0.153″ data-begin=”36.998″>him</span> <span data-dur=”0.119″ data-begin=”37.152″>in</span> <span data-dur=”0.55″ data-begin=”37.271″>swaddling</span> <span data-dur=”0.542″ data-begin=”37.82″>cloths</span> <span data-dur=”0.154″ data-begin=”38.644″>and</span> <span data-dur=”0.287″ data-begin=”38.798″>laid</span> <span data-dur=”0.176″ data-begin=”39.085″>him</span> <span data-dur=”0.087″ data-begin=”39.261″>in</span> <span data-dur=”0.092″ data-begin=”39.348″>a</span> <span data-dur=”0.604″ data-begin=”39.44″>manger</span>, <span data-dur=”0.277″ data-begin=”40.182″>because</span> <span data-dur=”0.131″ data-begin=”40.46″>there</span> <span data-dur=”0.151″ data-begin=”40.591″>was</span> <span data-dur=”0.213″ data-begin=”40.742″>no</span> <span data-dur=”0.312″ data-begin=”40.975″>place</span> <span data-dur=”0.121″ data-begin=”41.287″>for</span> <span data-dur=”0.158″ data-begin=”41.408″>them</span> <span data-dur=”0.116″ data-begin=”41.566″>in</span> <span data-dur=”0.111″ data-begin=”41.683″>the</span> <span data-dur=”0.406″ data-begin=”41.794″>inn</span>.<o:verse eID=”Luke.2.7″/></p>
<!–<h3>The Shepherds and the Angels</h3>–>
<p><o:verse sID=”Luke.2.8″ osisID=”Luke.2.8″/><span data-dur=”0.144″ data-begin=”43.166″>And</span> <span data-dur=”0.089″ data-begin=”43.309″>in</span> <span data-dur=”0.102″ data-begin=”43.398″>the</span> <span data-dur=”0.329″ data-begin=”43.5″>same</span> <span data-dur=”0.406″ data-begin=”43.829″>region</span> <span data-dur=”0.146″ data-begin=”44.236″>there</span> <span data-dur=”0.082″ data-begin=”44.382″>were</span> <span data-dur=”0.495″ data-begin=”44.463″>shepherds</span> <span data-dur=”0.154″ data-begin=”44.959″>out</span> <span data-dur=”0.104″ data-begin=”45.112″>in</span> <span data-dur=”0.094″ data-begin=”45.216″>the</span> <span data-dur=”0.561″ data-begin=”45.311″>field</span>, <span data-dur=”0.295″ data-begin=”45.954″>keeping</span> <span data-dur=”0.334″ data-begin=”46.249″>watch</span> <span data-dur=”0.173″ data-begin=”46.583″>over</span> <span data-dur=”0.107″ data-begin=”46.756″>their</span> <span data-dur=”0.401″ data-begin=”46.863″>flock</span> <span data-dur=”0.124″ data-begin=”47.264″>by</span> <span data-dur=”0.374″ data-begin=”47.388″>night</span>. <o:verse eID=”Luke.2.8″/><o:verse sID=”Luke.2.9″ osisID=”Luke.2.9″/><span data-dur=”0.144″ data-begin=”48.751″>And</span> <span data-dur=”0.176″ data-begin=”48.895″>an</span> <span data-dur=”0.409″ data-begin=”49.071″>angel</span> <span data-dur=”0.109″ data-begin=”49.479″>of</span> <span data-dur=”0.134″ data-begin=”49.588″>the</span> <span data-dur=”0.233″ data-begin=”49.722″>Lord</span> <span data-dur=”0.491″ data-begin=”49.955″>appeared</span> <span data-dur=”0.107″ data-begin=”50.446″>to</span> <span data-dur=”0.31″ data-begin=”50.553″>them</span>, <span data-dur=”0.126″ data-begin=”51.164″>and</span> <span data-dur=”0.186″ data-begin=”51.29″>the</span> <span data-dur=”0.49″ data-begin=”51.476″>glory</span> <span data-dur=”0.129″ data-begin=”51.967″>of</span> <span data-dur=”0.092″ data-begin=”52.095″>the</span> <span data-dur=”0.361″ data-begin=”52.187″>Lord</span> <span data-dur=”0.409″ data-begin=”52.548″>shone</span> <span data-dur=”0.436″ data-begin=”52.957″>around</span> <span data-dur=”0.23″ data-begin=”53.393″>them</span>, <span data-dur=”0.102″ data-begin=”53.899″>and</span> <span data-dur=”0.084″ data-begin=”54.001″>they</span> <span data-dur=”0.092″ data-begin=”54.085″>were</span> <span data-dur=”0.401″ data-begin=”54.177″>filled</span> <span data-dur=”0.3″ data-begin=”54.578″>with</span> <span data-dur=”0.481″ data-begin=”54.878″>fear</span>. <o:verse eID=”Luke.2.9″/><o:verse sID=”Luke.2.10″ osisID=”Luke.2.10″/><span data-dur=”0.107″ data-begin=”55.998″>And</span> <span data-dur=”0.109″ data-begin=”56.104″>the</span> <span data-dur=”0.352″ data-begin=”56.213″>angel</span> <span data-dur=”0.23″ data-begin=”56.565″>said</span> <span data-dur=”0.102″ data-begin=”56.795″>to</span> <span data-dur=”0.248″ data-begin=”56.897″>them</span>, <q><span data-dur=”0.327″ data-begin=”57.858″>Fear</span> <span data-dur=”0.381″ data-begin=”58.185″>not</span>, <span data-dur=”0.116″ data-begin=”58.767″>for</span> <span data-dur=”0.703″ data-begin=”58.883″>behold</span>, <span data-dur=”0.272″ data-begin=”60.051″>I</span> <span data-dur=”0.188″ data-begin=”60.323″>bring</span> <span data-dur=”0.238″ data-begin=”60.512″>you</span> <span data-dur=”0.248″ data-begin=”60.75″>good</span> <span data-dur=”0.593″ data-begin=”60.998″>news</span> <span data-dur=”0.178″ data-begin=”61.749″>of</span> <span data-dur=”0.372″ data-begin=”61.927″>great</span> <span data-dur=”0.622″ data-begin=”62.299″>joy</span> <span data-dur=”0.114″ data-begin=”63.247″>that</span> <span data-dur=”0.171″ data-begin=”63.361″>will</span> <span data-dur=”0.169″ data-begin=”63.532″>be</span> <span data-dur=”0.151″ data-begin=”63.701″>for</span> <span data-dur=”0.315″ data-begin=”63.852″>all</span> <span data-dur=”0.149″ data-begin=”64.167″>the</span> <span data-dur=”0.481″ data-begin=”64.316″>people</span>. <o:verse eID=”Luke.2.10″/><o:verse sID=”Luke.2.11″ osisID=”Luke.2.11″/><span data-dur=”0.166″ data-begin=”65.384″>For</span> <span data-dur=”0.317″ data-begin=”65.55″>unto</span> <span data-dur=”0.121″ data-begin=”65.867″>you</span> <span data-dur=”0.173″ data-begin=”65.988″>is</span> <span data-dur=”0.287″ data-begin=”66.162″>born</span> <span data-dur=”0.302″ data-begin=”66.449″>this</span> <span data-dur=”0.316″ data-begin=”66.751″>day</span> <span data-dur=”0.074″ data-begin=”67.067″>in</span> <span data-dur=”0.069″ data-begin=”67.142″>the</span> <span data-dur=”0.28″ data-begin=”67.211″>city</span> <span data-dur=”0.173″ data-begin=”67.491″>of</span> <span data-dur=”0.461″ data-begin=”67.664″>David</span> <span data-dur=”0.087″ data-begin=”68.34″>a</span> <span data-dur=”0.689″ data-begin=”68.426″>Savior</span>, <span data-dur=”0.126″ data-begin=”69.353″>who</span> <span data-dur=”0.184″ data-begin=”69.479″>is</span> <span data-dur=”0.411″ data-begin=”69.663″>Christ</span> <span data-dur=”0.146″ data-begin=”70.075″>the</span> <span data-dur=”0.528″ data-begin=”70.22″>Lord</span>. <o:verse eID=”Luke.2.11″/><o:verse sID=”Luke.2.12″ osisID=”Luke.2.12″/><span data-dur=”0.173″ data-begin=”71.32″>And</span> <span data-dur=”0.191″ data-begin=”71.493″>this</span> <span data-dur=”0.131″ data-begin=”71.684″>will</span> <span data-dur=”0.104″ data-begin=”71.815″>be</span> <span data-dur=”0.035″ data-begin=”71.919″>a</span> <span data-dur=”0.461″ data-begin=”71.954″>sign</span> <span data-dur=”0.162″ data-begin=”72.415″>for</span> <span data-dur=”0.436″ data-begin=”72.577″>you</span>: <span data-dur=”0.119″ data-begin=”73.352″>you</span> <span data-dur=”0.094″ data-begin=”73.471″>will</span> <span data-dur=”0.399″ data-begin=”73.565″>find</span> <span data-dur=”0.141″ data-begin=”73.963″>a</span> <span data-dur=”0.463″ data-begin=”74.105″>baby</span> <span data-dur=”0.416″ data-begin=”74.818″>wrapped</span> <span data-dur=”0.146″ data-begin=”75.234″>in</span> <span data-dur=”0.602″ data-begin=”75.381″>swaddling</span> <span data-dur=”0.498″ data-begin=”75.982″>cloths</span> <span data-dur=”0.185″ data-begin=”76.48″>and</span> <span data-dur=”0.359″ data-begin=”76.665″>lying</span> <span data-dur=”0.092″ data-begin=”77.024″>in</span> <span data-dur=”0.074″ data-begin=”77.116″>a</span> <span data-dur=”0.617″ data-begin=”77.19″>manger</span>.</q> <o:verse eID=”Luke.2.12″/><o:verse sID=”Luke.2.13″ osisID=”Luke.2.13″/><span data-dur=”0.161″ data-begin=”78.542″>And</span> <span data-dur=”0.624″ data-begin=”78.703″>suddenly</span> <span data-dur=”0.173″ data-begin=”79.327″>there</span> <span data-dur=”0.206″ data-begin=”79.501″>was</span> <span data-dur=”0.196″ data-begin=”79.706″>with</span> <span data-dur=”0.136″ data-begin=”79.902″>the</span> <span data-dur=”0.478″ data-begin=”80.038″>angel</span> <span data-dur=”0.159″ data-begin=”80.516″>a</span> <span data-dur=”0.632″ data-begin=”80.675″>multitude</span> <span data-dur=”0.102″ data-begin=”81.307″>of</span> <span data-dur=”0.072″ data-begin=”81.408″>the</span> <span data-dur=”0.387″ data-begin=”81.48″>heavenly</span> <span data-dur=”0.389″ data-begin=”81.867″>host</span> <span data-dur=”0.47″ data-begin=”82.657″>praising</span> <span data-dur=”0.349″ data-begin=”83.126″>God</span> <span data-dur=”0.091″ data-begin=”83.475″>and</span> <span data-dur=”0.508″ data-begin=”83.566″>saying</span>,<o:verse eID=”Luke.2.13″/></p>
<blockquote>
<p><o:verse sID=”Luke.2.14″ osisID=”Luke.2.14″/><span data-dur=”0.508″ data-begin=”84.905″>Glory</span> <span data-dur=”0.178″ data-begin=”85.413″>to</span> <span data-dur=”0.352″ data-begin=”85.591″>God</span> <span data-dur=”0.079″ data-begin=”85.943″>in</span> <span data-dur=”0.057″ data-begin=”86.022″>the</span> <span data-dur=”0.58″ data-begin=”86.079″>highest</span>,<br />
<span data-dur=”0.166″ data-begin=”87.058″>and</span> <span data-dur=”0.18″ data-begin=”87.224″>on</span> <span data-dur=”0.385″ data-begin=”87.404″>earth</span> <span data-dur=”0.338″ data-begin=”88.025″>peace</span> <span data-dur=”0.271″ data-begin=”88.363″>among</span> <span data-dur=”0.314″ data-begin=”88.634″>those</span> <span data-dur=”0.165″ data-begin=”88.948″>with</span> <span data-dur=”0.197″ data-begin=”89.113″>whom</span> <span data-dur=”0.156″ data-begin=”89.31″>he</span> <span data-dur=”0.16″ data-begin=”89.466″>is</span> <span data-dur=”0.715″ data-begin=”89.626″>pleased</span>!<o:verse eID=”Luke.2.14″/></p>
</blockquote>
<p><o:verse sID=”Luke.2.15″ osisID=”Luke.2.15″/><span data-dur=”0.145″ data-begin=”91.824″>When</span> <span data-dur=”0.117″ data-begin=”91.969″>the</span> <span data-dur=”0.396″ data-begin=”92.086″>angels</span> <span data-dur=”0.158″ data-begin=”92.482″>went</span> <span data-dur=”0.256″ data-begin=”92.64″>away</span> <span data-dur=”0.215″ data-begin=”92.896″>from</span> <span data-dur=”0.188″ data-begin=”93.112″>them</span> <span data-dur=”0.269″ data-begin=”93.3″>into</span> <span data-dur=”0.459″ data-begin=”93.569″>heaven</span>, <span data-dur=”0.065″ data-begin=”94.204″>the</span> <span data-dur=”0.489″ data-begin=”94.269″>shepherds</span> <span data-dur=”0.236″ data-begin=”94.758″>said</span> <span data-dur=”0.104″ data-begin=”94.994″>to</span> <span data-dur=”0.128″ data-begin=”95.098″>one</span> <span data-dur=”0.483″ data-begin=”95.226″>another</span>, <q><span data-dur=”0.136″ data-begin=”96.508″>Let</span> <span data-dur=”0.176″ data-begin=”96.644″>us</span> <span data-dur=”0.139″ data-begin=”96.82″>go</span> <span data-dur=”0.165″ data-begin=”96.959″>over</span> <span data-dur=”0.156″ data-begin=”97.124″>to</span> <span data-dur=”0.479″ data-begin=”97.281″>Bethlehem</span> <span data-dur=”0.08″ data-begin=”97.76″>and</span> <span data-dur=”0.312″ data-begin=”97.84″>see</span> <span data-dur=”0.31″ data-begin=”98.152″>this</span> <span data-dur=”0.253″ data-begin=”98.462″>thing</span> <span data-dur=”0.093″ data-begin=”98.715″>that</span> <span data-dur=”0.134″ data-begin=”98.808″>has</span> <span data-dur=”0.516″ data-begin=”98.942″>happened</span>, <span data-dur=”0.208″ data-begin=”99.642″>which</span> <span data-dur=”0.113″ data-begin=”99.85″>the</span> <span data-dur=”0.24″ data-begin=”99.964″>Lord</span> <span data-dur=”0.13″ data-begin=”100.203″>has</span> <span data-dur=”0.225″ data-begin=”100.333″>made</span> <span data-dur=”0.281″ data-begin=”100.558″>known</span> <span data-dur=”0.085″ data-begin=”100.839″>to</span> <span data-dur=”0.353″ data-begin=”100.924″>us</span>.</q> <o:verse eID=”Luke.2.15″/><o:verse sID=”Luke.2.16″ osisID=”Luke.2.16″/><span data-dur=”0.128″ data-begin=”101.996″>And</span> <span data-dur=”0.169″ data-begin=”102.124″>they</span> <span data-dur=”0.279″ data-begin=”102.293″>went</span> <span data-dur=”0.13″ data-begin=”102.572″>with</span> <span data-dur=”0.466″ data-begin=”102.702″>haste</span> <span data-dur=”0.117″ data-begin=”103.168″>and</span> <span data-dur=”0.359″ data-begin=”103.285″>found</span> <span data-dur=”0.355″ data-begin=”103.644″>Mary</span> <span data-dur=”0.169″ data-begin=”103.999″>and</span> <span data-dur=”0.416″ data-begin=”104.168″>Joseph</span>, <span data-dur=”0.132″ data-begin=”104.584″>and</span> <span data-dur=”0.139″ data-begin=”104.716″>the</span> <span data-dur=”0.338″ data-begin=”104.855″>baby</span> <span data-dur=”0.357″ data-begin=”105.193″>lying</span> <span data-dur=”0.056″ data-begin=”105.55″>in</span> <span data-dur=”0.058″ data-begin=”105.606″>a</span> <span data-dur=”0.567″ data-begin=”105.664″>manger</span>. <o:verse eID=”Luke.2.16″/><o:verse sID=”Luke.2.17″ osisID=”Luke.2.17″/><span data-dur=”0.173″ data-begin=”107.011″>And</span> <span data-dur=”0.199″ data-begin=”107.184″>when</span> <span data-dur=”0.121″ data-begin=”107.382″>they</span> <span data-dur=”0.346″ data-begin=”107.503″>saw</span> <span data-dur=”0.236″ data-begin=”107.849″>it</span>, <span data-dur=”0.152″ data-begin=”108.382″>they</span> <span data-dur=”0.21″ data-begin=”108.534″>made</span> <span data-dur=”0.373″ data-begin=”108.744″>known</span> <span data-dur=”0.071″ data-begin=”109.117″>the</span> <span data-dur=”0.424″ data-begin=”109.188″>saying</span> <span data-dur=”0.102″ data-begin=”109.611″>that</span> <span data-dur=”0.134″ data-begin=”109.714″>had</span> <span data-dur=”0.189″ data-begin=”109.848″>been</span> <span data-dur=”0.373″ data-begin=”110.037″>told</span> <span data-dur=”0.18″ data-begin=”110.411″>them</span> <span data-dur=”0.502″ data-begin=”110.591″>concerning</span> <span data-dur=”0.136″ data-begin=”111.092″>this</span> <span data-dur=”0.684″ data-begin=”111.228″>child</span>. <o:verse eID=”Luke.2.17″/><o:verse sID=”Luke.2.18″ osisID=”Luke.2.18″/><span data-dur=”0.152″ data-begin=”112.668″>And</span> <span data-dur=”0.336″ data-begin=”112.82″>all</span> <span data-dur=”0.137″ data-begin=”113.157″>who</span> <span data-dur=”0.271″ data-begin=”113.294″>heard</span> <span data-dur=”0.262″ data-begin=”113.565″>it</span> <span data-dur=”0.446″ data-begin=”113.827″>wondered</span> <span data-dur=”0.113″ data-begin=”114.273″>at</span> <span data-dur=”0.176″ data-begin=”114.387″>what</span> <span data-dur=”0.078″ data-begin=”114.563″>the</span> <span data-dur=”0.505″ data-begin=”114.641″>shepherds</span> <span data-dur=”0.345″ data-begin=”115.147″>told</span> <span data-dur=”0.318″ data-begin=”115.492″>them</span>. <o:verse eID=”Luke.2.18″/><o:verse sID=”Luke.2.19″ osisID=”Luke.2.19″/><span data-dur=”0.188″ data-begin=”116.538″>But</span> <span data-dur=”0.476″ data-begin=”116.726″>Mary</span> <span data-dur=”0.371″ data-begin=”117.201″>treasured</span> <span data-dur=”0.16″ data-begin=”117.572″>up</span> <span data-dur=”0.241″ data-begin=”117.731″>all</span> <span data-dur=”0.282″ data-begin=”117.973″>these</span> <span data-dur=”0.533″ data-begin=”118.254″>things</span>, <span data-dur=”0.537″ data-begin=”119.178″>pondering</span> <span data-dur=”0.139″ data-begin=”119.715″>them</span> <span data-dur=”0.098″ data-begin=”119.854″>in</span> <span data-dur=”0.18″ data-begin=”119.952″>her</span> <span data-dur=”0.528″ data-begin=”120.133″>heart</span>. <o:verse eID=”Luke.2.19″/><o:verse sID=”Luke.2.20″ osisID=”Luke.2.20″/><span data-dur=”0.085″ data-begin=”121.551″>And</span> <span data-dur=”0.071″ data-begin=”121.636″>the</span> <span data-dur=”0.429″ data-begin=”121.707″>shepherds</span> <span data-dur=”0.659″ data-begin=”122.136″>returned</span>, <span data-dur=”0.749″ data-begin=”123.144″>glorifying</span> <span data-dur=”0.258″ data-begin=”123.893″>and</span> <span data-dur=”0.563″ data-begin=”124.151″>praising</span> <span data-dur=”0.377″ data-begin=”124.715″>God</span> <span data-dur=”0.247″ data-begin=”125.092″>for</span> <span data-dur=”0.217″ data-begin=”125.339″>all</span> <span data-dur=”0.167″ data-begin=”125.556″>they</span> <span data-dur=”0.197″ data-begin=”125.723″>had</span> <span data-dur=”0.329″ data-begin=”125.92″>heard</span> <span data-dur=”0.119″ data-begin=”126.249″>and</span> <span data-dur=”0.591″ data-begin=”126.368″>seen</span>, <span data-dur=”0.154″ data-begin=”127.239″>as</span> <span data-dur=”0.073″ data-begin=”127.394″>it</span> <span data-dur=”0.173″ data-begin=”127.467″>had</span> <span data-dur=”0.174″ data-begin=”127.641″>been</span> <span data-dur=”0.31″ data-begin=”127.815″>told</span> <span data-dur=”0.249″ data-begin=”128.125″>them</span>.<o:verse eID=”Luke.2.20″/></p>

<script type=”text/javascript”>
/* CDATA section stripped due to WordPress bug: https://core.trac.wordpress.org/ticket/3670 */
(function(){
var root = document.getElementById(‘nativity-story-from-luke’);
var audio = root.getElementsByTagName(‘audio’)[0];

/**
* Build an index of all of the words that can be read along with their begin,
* and end times, and the DOM element representing the word.
*/
var wordTimes = [];
Array.prototype.forEach.call(root.querySelectorAll(“[data-begin]”), function(word){
var wordTime = {
begin : parseFloat(word.getAttribute(“data-begin”)),
dur   : parseFloat(word.getAttribute(“data-dur”)),
word  : word
};
wordTime.index = wordTimes.length;
wordTime.end = wordTime.begin + wordTime.dur;
word.setAttribute(‘data-timeindex’, wordTime.index);
wordTimes.push(wordTime);
});
/**
* Find the next word that should be played (or that is currently being played)
* @todo Note: this would better be implemented as a binary search
*/
function getNextWordTime(){
var wordTime = null,currentTime = audio.currentTime;
for(var i = 0, len = wordTimes.length; i < len; i++){
var thisWordTime = wordTimes[i];
if((currentTime >= thisWordTime.begin && currentTime < thisWordTime.end) || currentTime < wordTimes[i].begin)
{
return thisWordTime;
}
}
return null;
}
var selection = window.getSelection();
var timeoutSelectNext;

/**
* Select the next word that is going to be read or the word that is being
* read right now
* @param Boolean hold  Whether or not the subsequent word should automatically be selected
*/
function selectNextWord(hold){
clearTimeout(timeoutSelectNext);
var next = getNextWordTime();
if(next){
function select(hold){
selection.removeAllRanges();
var range = document.createRange();
range.selectNode(next.word);
selection.addRange(range);
if(!hold){
timeoutSelectNext = setTimeout(function(){
selection.removeAllRanges();
if(!audio.paused)
selectNextWord();
}, Math.round((next.end – audio.currentTime)*1000));
}
}

//Select now
if(hold || audio.currentTime >= next.begin){
select(hold);
}
//Select later
else {
timeoutSelectNext = setTimeout(function(){
select();
}, Math.round((next.begin – audio.currentTime)*1000));
}
}
}
/**
* Select next word (at audio.currentTime) when playing starts
*/
audio.addEventListener(‘play’, function(e){
selectNextWord();
}, false);
/**
* Abandon seeking the next word because we’re paused
*/
audio.addEventListener(‘pause’, function(e){
clearTimeout(timeoutSelectNext);
}, false);
/**
* Seek by clicking (event delegation)
*/
root.addEventListener(‘click’, function(e){
if(e.target.hasAttribute(‘data-begin’)){
var i = e.target.getAttribute(‘data-timeindex’);
//audio.currentTime = wordTimes[i].begin + wordTimes[i].dur/2; //@TODO
audio.currentTime = wordTimes[i].begin + 0.001; //Note: times apparently cannot be exactly set and sometimes select too early
selectNextWord();
}
}, false);
/**
* Play a word when double-clicking (event delegation)
* Only plays the single word.
*/
root.addEventListener(‘dblclick’, function(e){
audio.play();
}, false);
/**
* Select a word when seeking
*/
audio.addEventListener(‘seeked’, function(e){
selectNextWord(e.target.paused /* for hold, probably always true */);
}, false);

})();
/* CDATA section stripped due to WordPress bug: https://core.trac.wordpress.org/ticket/3670 */
</script>

<hr />
<footer>
<small>Scripture taken from The Holy Bible, English Standard Version. Copyright
©2001 by <a href=”http://www.crosswaybibles.org” target=”_blank”>Crossway Bibles</a>, a
publishing ministry of Good News Publishers. Used by permission. All rights
reserved. Text provided by the <a href=”http://www.gnpcb.org/esv/share/services/” target=”_blank”>Crossway Bibles Web
Service</a>.</small>
</footer>
</article>
</body>
</html>

运行代码

HTML5 canvas
支持浏览器:IE以外所有新锐浏览器
<!doctype html>
<html dir=”ltr” lang=”zh-CN”>
<head>
<meta charset=”utf-8″/>
<meta content=”IE=8″ http-equiv=”X-UA-Compatible”/>
<title>canvas by 司徒正美</title>
</head>
<body id=”id10″>
<section id=”wrapper”>
<header>
<h1>Canvas</h1>
</header>
<article></article>
<p><a href=”http://www.cnblogs.com/rubylouvre/”>返回</a></p>
</section>
<script src=”http://html5demos.com/h5utils.js”></script>
<script>

buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });

function buildSpinner(data) {

var canvas = document.createElement(‘canvas’);
canvas.height = 100;
canvas.width = 300;
document.getElementsByTagName(‘article’)[0].appendChild(canvas);
var ctx = canvas.getContext(“2d”),
i = 0, degrees = data.degrees, loops = 0, degreesList = [];

for (i = 0; i < degrees; i++) {
degreesList.push(i);
}

// reset
i = 0;

// so I can kill it later
window.canvasTimer = setInterval(draw, 1000/degrees);

function reset() {
ctx.clearRect(0,0,100,100); // clear canvas

var left = degreesList.slice(0, 1);
var right = degreesList.slice(1, degreesList.length);
degreesList = right.concat(left);
}

function draw() {
var c, s, e;

var d = 0;

if (i == 0) {
reset();
}

ctx.save();

d = degreesList[i];
c = Math.floor(255/degrees*i);
ctx.strokeStyle = ‘rgb(‘ + c + ‘, ‘ + c + ‘, ‘ + c + ‘)’;
ctx.lineWidth = data.size;
ctx.beginPath();
s = Math.floor(360/degrees*(d));
e = Math.floor(360/degrees*(d+1)) – 1;

ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
ctx.stroke();

ctx.restore();

i++;
if (i >= degrees) {
i = 0;
}
}
}
</script>
</body>
</html>

运行代码

https://developer.mozilla.org/en/Canvas_tutorial

HTML5 SVG
支持浏览器:Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+

http://www.w3.org/TR/SVG12/

http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896

HTML5 XMLHttpRequest 2与跨域
支持浏览器:IE8与firefox3.5+各实现了部分

http://www.w3.org/TR/XMLHttpRequest2/

https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress

http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

http://www.w3.org/TR/cors/

https://developer.mozilla.org/En/HTTP_Access_Control

http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

HTML5的标签变更情况:
http://www.w3schools.com/html5/html5_reference.asp

——————————————————————————–

上述特征的支持情况只对目前有效……