Html5 Canvas on mobile platforms
I have code that has a playing video in a html5 canvas using interactivity to play sound when you click on certain spots.
It works in FireFox 6+, Chrome 13+ and Safari (most recent version).
开发者_如何学运维I would like it to also work on mobile platforms (iPhone, Android, Windows 7, etc.).
I am looking for a good emulator to use for testing and have tried a program called Mite (mite.keynote.com) to test wether the website was working. Using Mite I found that the canvas was not showing up on any mobile platform. I have confirmed this by testing it on an iPhone.
I would like to know if there is some simple reason why it is not showing up or if I need to use a different design approach or technology.
If you would like to see a live example of code you can visit http://dp.hightechhigh.org/~adresser/source/
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Makes IE compatible with HTML5 elements like nav, header, article, section, etc. -->
<!--[if lt IE 9]>
<script src="js/excanvas.js"></script>
<![endif]-->
<!-- Makes IE compatible with HTML5 canvases -->
<style type="text/css" media="screen">
/* Reset */
html, body, div, table, span, iframe, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, em, b, u, small, strong, img, canvas, video, audio { outline: 0; margin: 0; padding: 0; }
:focus { outline: 0; }
* em { font-style: italic; }
* b { font-style: bold; }
* u { text-decoration: underline; }
/* End Reset */
body { text-align: center; background: #10101f; }
.sleeve { margin: 0 auto; width: 720px; }
canvas { padding: 30px 0 0; }
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<title>Square of Fifths</title>
</head>
<body>
<div class="sleeve">
<video width="720" height="480" id="a"><source src="sof_a.ogv" type="video/ogg"><source src="sof_a.mp4" type="video/mp4"><source src="sof_a.webm" type="video/webm"></video>
<video width="720" height="480" id="b" loop><source src="sof_b.ogv" type="video/ogg"><source src="sof_b.mp4" type="video/mp4"><source src="sof_b.webm" type="video/webm"></video>
<canvas width="720" height="480" id="vid_a"></canvas>
<canvas width="720" height="480" id="vid_b"></canvas>
<audio id="F" preload="auto"><source src="aud/F.ogg" type="audio/ogg" /><source src="aud/F.mp3" type="audio/mp3" /></audio>
<audio id="C" preload="auto"><source src="aud/C.ogg" type="audio/ogg" /><source src="aud/C.mp3" type="audio/mp3" /></audio>
<audio id="G" preload="auto"><source src="aud/G.ogg" type="audio/ogg" /><source src="aud/G.mp3" type="audio/mp3" /></audio>
<audio id="D" preload="auto"><source src="aud/D.ogg" type="audio/ogg" /><source src="aud/D.mp3" type="audio/mp3" /></audio>
<audio id="A" preload="auto"><source src="aud/A.ogg" type="audio/ogg" /><source src="aud/A.mp3" type="audio/mp3" /></audio>
<audio id="E" preload="auto"><source src="aud/E.ogg" type="audio/ogg" /><source src="aud/E.mp3" type="audio/mp3" /></audio>
<audio id="B" preload="auto"><source src="aud/B.ogg" type="audio/ogg" /><source src="aud/B.mp3" type="audio/mp3" /></audio>
<audio id="GF" preload="auto"><source src="aud/GF.ogg" type="audio/ogg" /><source src="aud/GF.mp3" type="audio/mp3" /></audio>
<audio id="Db" preload="auto"><source src="aud/Db.ogg" type="audio/ogg" /><source src="aud/Db.mp3" type="audio/mp3" /></audio>
<audio id="Ab" preload="auto"><source src="aud/Ab.ogg" type="audio/ogg" /><source src="aud/Ab.mp3" type="audio/mp3" /></audio>
<audio id="Eb" preload="auto"><source src="aud/Eb.ogg" type="audio/ogg" /><source src="aud/Eb.mp3" type="audio/mp3" /></audio>
<audio id="Bb" preload="auto"><source src="aud/Bb.ogg" type="audio/ogg" /><source src="aud/Bb.mp3" type="audio/mp3" /></audio>
</div> <!-- END div.sleeve -->
<script type="text/javascript" charset="utf-8">
// Initialize Canvases
var canvas_a = document.getElementById("vid_a");
var canvas_b = document.getElementById("vid_b");
var context_a = canvas_a.getContext("2d");
var context_b = canvas_b.getContext("2d");
// Determines cursor position
/* function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent) {
return { x: curleft, y: curtop };
}
}
return undefined;
}*/
// Initializes Play functions
function playF() { document.getElementById('F').play(); }
function playC() { document.getElementById('C').play(); }
function playG() { document.getElementById('G').play(); }
function playD() { document.getElementById('D').play(); }
function playA() { document.getElementById('A').play(); }
function playE() { document.getElementById('E').play(); }
function playB() { document.getElementById('B').play(); }
function playGF() { document.getElementById('GF').play(); }
function playDb() { document.getElementById('Db').play(); }
function playAb() { document.getElementById('Ab').play(); }
function playEb() { document.getElementById('Eb').play(); }
function playBb() { document.getElementById('Bb').play(); }
var mod = 25;
// onClick play sound
$("#vid_b").click(function(e) {
//var pos = findPos(this);
var x = e.offsetX;
var y = e.offsetY;
//var modx = (x - 300) / mod;
//var mody = (y - 300) / mod;
y -= 40;
if (x > 234 && x < 320 && y > 37 && y < 125) { playF(); };
if (x > 319 && x < 408 && y > 27 && y < 121) { playC(); };
if (x > 405 && x < 494 && y > 34 && y < 125) { playG(); };
if (x > 497 && x < 586 && y > 114 && y < 207) { playD(); };
if (x > 489 && x < 573 && y > 207 && y < 294) { playA(); };
if (x > 494 && x < 584 && y > 292 && y < 387) { playE(); };
if (x > 405 && x < 491 && y > 376 && y < 464) { playB(); };
if (x > 315 && x < 406 && y > 384 && y < 473) { playGF(); };
if (x > 231 && x < 319 && y > 376 && y < 463) { playDb(); };
if (x > 140 && x < 229 && y > 293 && y < 386) { playAb(); };
if (x > 140 && x < 227 && y > 208 && y < 294) { playEb(); };
if (x > 135 && x < 228 && y > 113 && y < 209) { playBb(); };
});
// Draw video in canvas
function draw(vid, can) {
can.drawImage(vid, 0, 0, 720, 480);
setTimeout(draw, 20, vid, can, 720, 480);
//can.fillRect(0,0,720,480); //<-using this to test whether it was video or canvas that wasn't working
};
$(document).ready(function() {
var a = document.getElementById('a');
var b = document.getElementById('b');
$("#a").hide();
$("#b").hide();
draw(a, context_a);
document.getElementById('a').play();
draw(b, context_b);
$("#vid_b").hide();
// Allows switching between an intro and a loop
setTimeout("document.getElementById('vid_a').style.display='none'", 4000);
setTimeout("document.getElementById('vid_b').style.display='block'", 4000);
setTimeout("document.getElementById('b').play();", 4000);
});
// Might work at some point...
// setInterval(draw(a, context_a), 1);
// setInterval(draw(b, context_b), 1);
// Fixes looping problem in Firefox
$("#b").bind('ended',function(){this.play()});
</script>
</body>
加载中,请稍侯......
精彩评论