title: HTML5 Video in Chrome not working under mp4
body: <p>I'm working on a simple site to display a video on a canvas.  The video displays but it just is stuck at the first frame, I have controls set and autoplay neither show up nor does the video play.</p>
  
  <pre><code>&lt;div style="position: absolute; top: 50px; left: 50px;"&gt;
  
  &lt;canvas id="canvasOne" width="500" height="300"&gt;
  Your browser does not support HTML5 Canvas.
  &lt;/canvas&gt;
  &lt;/div&gt;
  
  @section Scripts
  {
  &lt;script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"&gt;        &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      window.addEventListener('load', eventWindowLoaded, false);
      var firstVideo, secondVideo, videoSource
      var videoDiv;
      function eventWindowLoaded() {
          firstVideo = document.createElement("video");
          videoSource = document.createElement("source");
          firstVideo.appendChild(videoSource);
          //secondVideo = document.createElement("video");
          videoDiv = document.createElement('div');
          document.body.appendChild(videoDiv);
          videoDiv.appendChild(firstVideo);
         //videoDiv.appendChild(secondVideo);
          videoDiv.setAttribute("style", "display:none;");
          var videoType = supportedVideoFormat(firstVideo);       
          if (videoType == "") {
              alert("no video support");
              return;
          }
          videoSource.setAttribute("src", "/Content/QualitySample." + videoType);
          videoSource.setAttribute("type", "video/mp4");
          firstVideo.setAttribute("controls", "controls");
          firstVideo.setAttribute("autoplay", "autoplay");
          firstVideo.addEventListener("canplaythrough", videoLoaded, false);
          //secondVideo.setAttribute("src", "/Content/QualitySample." + videoType);
          //secondVideo.setAttribute("controls", "controls");
          //secondVideo.addEventListener("canplaythrough", videoLoaded, false);
  
  
      }
  
      function supportedVideoFormat(video) {
          var returnExtension = "";
          if (video.canPlayType("video/mp4") == "probably" ||
         video.canPlayType("video/mp4") == "maybe") {
              returnExtension = "mp4";
      } else if (video.canPlayType("video/webm") == "probably" ||
     video.canPlayType("video/webm") == "maybe") {
          returnExtension = "webm";
      } else if (video.canPlayType("video/ogg") == "probably" ||
     video.canPlayType("video/ogg") == "maybe") {
          returnExtension = "ogg";
      }
  
  
      return returnExtension;
  
  }
  
  function canvasSupport() {
      return Modernizr.canvas;
  }
  
  function videoLoaded(event) {
  
      canvasApp();
  
  }
  
  function canvasApp() {
  
      if (!canvasSupport()) {
          return;
      }
  
      function drawScreen() {
  
          //Background
          context.fillStyle = '#ffffff';
          context.fillRect(0, 0, theCanvas.width, theCanvas.height);
          //Box
          context.strokeStyle = '#000000';
          context.strokeRect(5, 5, theCanvas.width - 10, theCanvas.height - 10);
          //video
          context.drawImage(firstVideo, 60, 50, 200, 200);
          //context.drawImage(secondVideo, 260, 50, 200, 200);
  
      }
  
      var theCanvas = document.getElementById("canvasOne");
      var context = theCanvas.getContext("2d");
      //firstVideo.load();
      firstVideo.play();
      //secondVideo.play();
      setInterval(drawScreen, 33);
  
  }
  </code></pre>
  
  <p></p>
  
  <p>}
  when the page loads the video is displayed on the canvas and the video is loaded but no controls are active nor does it play.</p>