title: Reveal.js - <source> element has no “src” attribute
body: <p>I am designing a Reveal.js presentation. I am getting these warnings in the console:</p>
  
  <pre><code>&lt;source&gt; element has no “src” attribute. Media resource load failed.
  All candidate resources failed to load. Media load paused.
  </code></pre>
  
  <p>I am using Ubuntu 14.04 with Firefox 52. I don't get these warning from Chrome. Also, the audio is working properly as far as I can tell.</p>
  
  <p>This is how I am setting my audio:</p>
  
  <pre><code>document.getElementById("audio4").innerHTML = "&lt;source data-src='../../learn/audio/lesson" + lesson_number + "/" + a_file + ".mp3' type='audio/mpeg'&gt;";
  </code></pre>
  
  <p>So as you can see, I am using <em>data-src</em> (lazy-loading) instead of <em>src</em>. How can I get rid of those warnings and still use lazy-loading?</p>
  
  <hr>
  
  <p>Update: </p>
  
  <ul>
  <li><p>I was just looking over some of the code in the reveal.js file. It changes the <code>data-src</code> to <code>src</code> automatically for the next slide, and it also calls the <code>.load()</code> function right after that.</p></li>
  <li><p>I tried the HTML tag <em>preload</em> but that didn't have any effect on the warnings.</p></li>
  </ul>