<!DOCTYPE html>
<html>
<head>
<title>HTML5/Flash Audio</title>
</head>
<body><br><pre>
<audio controls>
<object type="application/x-shockwave-flash"
data="audioplayer.swf" width="300" height="30">
<param name="FlashVars"
value="mp3=audio.mp3&showstop=1&showvolume=1">
</object>
<source src='audio.m4a' type='audio/aac'>
<source src='audio.mp3' type='audio/mp3'>
<source src='audio.ogg' type='audio/ogg'>
</audio>
</pre></body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video</title>
</head>
<body>
<video width='560' height='320' controls>
<source src='movie.mp4' type='video/mp4'>
<source src='movie.webm' type='video/webm'>
<source src='movie.ogv' type='video/ogg'>
</video>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Playing Video with JavaScript</title>
<script src='OSC.js'></script>
</head>
<body>
<video id='myvideo' width='560' height='320'>
<source src='movie.mp4' type='video/mp4'>
<source src='movie.webm' type='video/webm'>
<source src='movie.ogv' type='video/ogg'>
</video><br>
<button onclick='playvideo()'>Play Video</button>
<button onclick='pausevideo()'>Pause Video</button>
<script>
function playvideo()
{
O('myvideo').play()
}
function pausevideo()
{
O('myvideo').pause()
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML5/Flash Video</title>
</head>
<body>
<video width='560' height='320' controls>
<object width='560' height='320'
type='application/x-shockwave-flash'
data='flowplayer.swf'>
<param name='movie' value='flowplayer.swf'>
<param name='flashvars'
value='config={"clip": {
"url": "movie.mp4",
"autoPlay":false, "autoBuffering":true}}'>
</object>
<source src='movie.mp4' type='video/mp4'>
<source src='movie.webm' type='video/webm'>
<source src='movie.ogv' type='video/ogg'>
</video>
</body>
</html>
function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
function S(i) { return O(i).style }
function C(i) { return document.getElementsByClassName(i) }
<!DOCTYPE html>
<html>
<head>
<title>Playing Audio</title>
</head>
<body><br><pre>
<audio controls>
<source src='audio.m4a' type='audio/aac'>
<source src='audio.mp3' type='audio/mp3'>
<source src='audio.ogg' type='audio/ogg'>
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Playing Audio with JavaScript</title>
<script src='OSC.js'></script>
</head>
<body>
<audio id='myaudio'>
<source src='audio.m4a' type='audio/aac'>
<source src='audio.mp3' type='audio/mp3'>
<source src='audio.ogg' type='audio/ogg'>
</audio>
<button onclick='playaudio()'>Play Audio</button>
<button onclick='pauseaudio()'>Pause Audio</button>
<script>
function playaudio()
{
O('myaudio').play()
}
function pauseaudio()
{
O('myaudio').pause()
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Web Messaging (b)</title>
<style>
#output {
font-family:"Courier New";
white-space:pre;
}
</style>
<script src='OSC.js'></script>
</head>
<body>
<div id='output'>Received messages will display here</div>
<script>
window.onmessage = function(event)
{
O('output').innerHTML =
'<b>Origin:</b> ' + event.origin + '<br>' +
'<b>Source:</b> ' + event.source + '<br>' +
'<b>Data:</b> ' + event.data
}
</script>
</body>
</html>
var n = 1
search: while (true)
{
n += 1
for (var i = 2; i <= Math.sqrt(n); i += 1)
{
if (n % i == 0) continue search
}
postMessage(n)
}
function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
function S(i) { return O(i).style }
function C(i) { return document.getElementsByClassName(i) }
var n = 1
search: while (true)
{
n += 1
for (var i = 2; i <= Math.sqrt(n); i += 1)
{
if (n % i == 0) continue search
}
postMessage(n)
}
output { font-weight:bold; }
<!DOCTYPE html>
<html> <!-- geolocation.html -->
<head>
<title>Geolocation Example</title>
</head>
<body>
<script>
if (typeof navigator.geolocation == 'undefined')
alert("Geolocation not supported.")
else
navigator.geolocation.getCurrentPosition(granted, denied)
function granted(position)
{
var lat = position.coords.latitude
var lon = position.coords.longitude
alert("Permission Granted. You are at location:\n\n"
+ lat + ", " + lon +
"\n\nClick 'OK' to load Google Maps with your location")
window.location.replace("https://www.google.com/maps/@"
+ lat + "," + lon + ",8z")
}
function denied(error)
{
var message
switch(error.code)
{
case 1: message = 'Permission Denied'; break;
case 2: message = 'Position Unavailable'; break;
case 3: message = 'Operation Timed Out'; break;
case 4: message = 'Unknown Error'; break;
}
alert("Geolocation Error: " + message)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Local Storage</title>
</head>
<body>
<script>
if (typeof localStorage == 'undefined')
{
alert("Local storage is not available")
}
else
{
loc = localStorage.getItem('loc')
lan = localStorage.getItem('lan')
alert("The current values of 'loc' and 'lan' are\n\n" +
loc + " / " + lan + "\n\nClick OK to assign values")
localStorage.setItem('loc', 'USA')
localStorage.setItem('lan', 'English')
loc = localStorage.getItem('loc')
lan = localStorage.getItem('lan')
alert("The current values of 'loc' and 'lan' are\n\n" +
loc + " / " + lan + "\n\nClick OK to clear values")
localStorage.removeItem('loc')
localStorage.removeItem('lan')
loc = localStorage.getItem('loc')
lan = localStorage.getItem('lan')
alert("The current values of 'loc' and 'lan' are\n\n" +
loc + " / " + lan)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html> <!-- webworkers.html -->
<head>
<title>Web Workers</title>
<script src='OSC.js'></script>
</head>
<body>
Current highest prime number:
<span id='result'>0</span>
<script>
if (!!window.Worker)
{
var worker = new Worker('worker.js')
worker.onmessage = function (event)
{
O('result').innerText = event.data;
}
}
else
{
alert("Web workers not supported")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html manifest='clock.appcache'>
<head>
<title>Offline Web Apps</title>
<script src='OSC.js'></script>
<script src='clock.js'></script>
<link rel='stylesheet' href='clock.css'>
</head>
<body>
The time is: <output id='clock'></output>
</body>
</html>
<!DOCTYPE HTML>
<html> <!-- draganddrop.html -->
<head>
<title>Drag and Drop</title>
<script src='OSC.js'></script>
<style>
#dest {
background:lightblue;
border :1px solid #444;
width :320px;
height :100px;
padding :10px;
}
</style>
</head>
<body>
<div id='dest' ondrop='drop(event)' ondragover='allow(event)'></div><br>
Drag the images below into the above element<br><br>
<img id='source1' src='image1.png' draggable='true' ondragstart='drag(event)'>
<img id='source2' src='image2.png' draggable='true' ondragstart='drag(event)'>
<img id='source3' src='image3.png' draggable='true' ondragstart='drag(event)'>
<script>
function allow(event)
{
event.preventDefault()
}
function drag(event)
{
event.dataTransfer.setData('image/png', event.target.id)
}
function drop(event)
{
event.preventDefault()
var data=event.dataTransfer.getData('image/png')
event.target.appendChild(O(data))
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Web Messaging (a)</title>
<script src='OSC.js'></script>
</head>
<body>
<iframe id='frame' src='example26-11.html' width='360' height='75'></iframe>
<script>
count = 1
setInterval(function()
{
O('frame').contentWindow.postMessage('Message ' + count++, '*')
}, 1000)
</script>
</body>
</html>
CACHE MANIFEST
clock.html
OSC.js
clock.css
clock.js