topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

sample-canvas-inject.xhtml / xhtml



  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title>Dynamic Content Injection</title>

style sheet(s) 


          <link href="lib-present-video-play-files-style.css" type="text/css" rel="stylesheet"/>
  <!--
          <link href="try-canvas-style.css" type="text/css" rel="stylesheet"/>
  -->

script(s) 


          <script type="text/javascript" src="lib-present-video-play-files-main.js"/>
          <script type="text/javascript" src="lib-present-video-play-files-canvas.js"/>
          <script type="text/javascript" src="lib-present-video-play-files-pong.js"/>
      </head>

(blind) video 


      <body onload="processor.doLoad()">
          <video id="video" src="lib-present-video-videos-william.ogg" oncanplay="processor.videoIsReady()" autobuffer="true"/>
  
          <p id="wait" style="display: none;">Wait...</p>
  <!--
          <h2 id="nofirefoxbeta">It's not working in this version, <a style="color: red;" href="http://www.mozilla.com/en-US/firefox/all-beta.html">get Firefox 3.1 Beta 3</a></h2>
  
          <p>
          <h1>Dynamic Content Injection</h1>
          <em>Only Open Web technologies inside!</em>
          </p>
  -->

player = canvas 


  <table border="3">
  <tr><td>
          <div id="player" style="display: block;">
  <!--
              <h2>Click to play:</h2>
  -->
              <canvas id="mirrorVideo" width="240" height="440"/>
              <svg y="50%" id="playButton" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
              <path d="M 40 70 L 70 50 L 40 30"/>
              <circle cx="50" cy="50" r="40" onclick="processor.playVideo()"/>
              </svg>
              <svg id="stopButton" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
              <path d="M 40 70 L 40 30"/>
              <path d="M 60 70 L 60 30"/>
              <circle cx="50" cy="50" r="40" onclick="processor.stopVideo()"/>
              </svg>
          </div>

pattern(s) - video / canvas / text / image(s) 


  <!--
  </td><td>
  -->
          <div id="patterns">
  <!--
              <h2>choose a pattern:</h2>
  -->
  <!--
              <br/>
  -->
              <br/>
              <span>
                  canvas:
                  <br/>
                  <canvas id="pong" width="150" height="150" onclick="processor.updatePattern(this, true)"/>
              </span>
              <span>
                  text:
                  <br/>
                  <canvas id="yourtext" width="150" height="150" onclick="processor.updatePattern(this, false); document.getElementById('message').focus()"/>
                  <input id="message"/>
              </span>
              <span>
                  drawing:
                  <br/>
                  <canvas id="yourdrawing" width="150" height="150" onclick="processor.updatePattern(this, false)"/>
                  <input type="button" value="clear" onclick="processor.clearPainter()"/>
                  3 </span>
              <br />
              <span>
                  video:
                  <br/>
                  <video width="150" height="150" id="tiny_video" controls="true" src="showreel-create.ogg" onclick="processor.updatePattern(this, true)" autobuffer="true" tabindex="0"/>
              </span>
              <span>
                  image:
                  <br/>
                  <img width="150" height="150" id="token" src="@walk.gif" onclick="processor.updatePattern(this, true)" pattern="true"/>
              </span>
              <span>
                  image:
                  <br/>
                  <img width="150" height="150" id="ff" src="soutine.jpg" onclick="processor.updatePattern(this, false)"/>
              </span>
          </div>
          <br/>
  </td>
  </tr>
  </table>

licence(s) 


  <!--
          <a href="https://wiki.mozilla.org/Firefox3.5"><img src="lib-present-video-play-files-fflogo.png"/></a>
  -->
  <!--
          <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/"><img alt="Creative Commons License" style="border-width: 0pt;" src="lib-present-video-play-files-88x31.png"/></a><br/>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>.
  -->
      </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 27/08/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.