title: Correct way to play <audio> + <video> from Javascript
body: <p>I'm getting different results i Firefox and Chrome when using &lt;audio&gt; and &lt;video&gt; with preload="none" and then trying to play from Javascript.</p>
  
  <p>Let's say i was using preload="auto" or preload="metadata" :</p>
  
  <pre><code>audio.src = "filename";
  audio.play();
  </code></pre>
  
  <p>That seems to work fine in both Firefox and Chrome but i want to use preload="none" and then Chrome dossent play.</p>
  
  <p>So i'm trying this code with preload="none" :</p>
  
  <pre><code>audio.src = url;
  
  audio.load();
  
  audio.addEventListener('canplay', function(e) {
     audio.play(); // For some reason this dossent work in Firefox
  }, false);
  
  audio.play(); // Added this so Firefox would play
  </code></pre>
  
  <p>I don't know if that's the correct way to do it.</p>
  
  <p>I'm using :
  Firefox 20.0.1
  Chrome 25.0.1364.172 m</p>
  
  <p>I made a demo : <a href="http://netkoder.dk/test/test0217.html" rel="nofollow">http://netkoder.dk/test/test0217.html</a></p>
  
  <p><strong>Edit :</strong></p>
  
  <p>In the 2nd audio player (on the demo page) it seems that when using preload="none" you have to use load().
  But is it correct to just use play() right after load() or is the correct way to use an event to wait for the file to load before playing it ?</p>
  
  <p>In the 3rd audio player it seems Firefox 20.0.1 dossent support the canplay event correctly when used with addEventListener() because it dossent trigger after load(), it triggers after play() and also triggers when scrubbing though the sound which dossent seem to be the way the canplay should work.
  Using .oncanplay does work.</p>
  
  <p>So the following code seems to work :</p>
  
  <pre><code>  function afspil2(url) {
  
       afspiller2.src = url;
       afspiller2.load(); // use load() when &lt;audio&gt; has preload="none"
       afspiller2.play();
  
    }
  
    function afspil3(url) {
  
       afspiller3.src = url;
       afspiller3.load(); // use load() when &lt;audio&gt; has preload="none"
  
       //afspiller3.addEventListener('canplay', function() { // For some reason this dossent work correctly in Firefox 20.0.1, its triggers after load() and when scrubbing
       //   afspiller3.play();
       //}, false);
  
       afspiller3.oncanplay = afspiller3.play(); // Works in Firefox 20.0.1
  
    }
  </code></pre>
  
  <p>I updated the demo to include the changes : <a href="http://netkoder.dk/test/test0217.html" rel="nofollow">http://netkoder.dk/test/test0217.html</a></p>
  
  <p>My way of adding addEventListener inside the afspil3() function dossent seem good because the first time the function is called the code inside addEventListener is called 1 time. The second time the function is called the code inside addEventListener is called 2 time and then 3 times and so on.</p>