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>