title: Hiding HTML5 video sources in div tag id attributes
body: <p>I’d like to be able to specify my video sources for my toggle button in the HTML document so that I don’t have to include them in the JavaScript code.</p>
  <p>I figured out a way to accomplish it by hiding the URLs in div tags as id attributes and then getting them in the JavaScript by their class name. (See below). This seems like a total hack. I’m sure there must be a better way to do this. Any suggestions?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  
      &lt;div class=&quot;video1&quot; id=&quot;http://www.w3schools.com/html/mov_bbb.mp4&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;video2&quot; id=&quot;http://www.w3schools.com/html/movie.mp4&quot;&gt;&lt;/div&gt;
      
      &lt;button onclick=&quot;Harmonica(this,'myVideo')&quot; type=&quot;button&quot;&gt; Video 2&lt;/button&gt;
  
      &lt;video height=&quot;auto&quot; width=&quot;500&quot;id=&quot;myVideo&quot; controls autoplay loop class=&quot;myvideo&quot;&gt;
      &lt;source id=&quot;mp4_src&quot; src=&quot;http://www.w3schools.com/html/mov_bbb.mp4&quot; type=&quot;video/mp4&quot;&gt;
  &lt;/video&gt;
  &lt;/body&gt;
  
  &lt;script&gt; 
          var vid = document.getElementById(&quot;myVideo&quot;);
          var statusElement = document.getElementById(&quot;status&quot;);
          var currentlyPlaying = 1;
          var currentlPlayingTime;
          
          var src1 = document.getElementsByClassName(&quot;video1&quot;)[0].id;
          
          var src2 = document.getElementsByClassName(&quot;video2&quot;)[0].id;
          
          function Harmonica(btn,myVideo) {
              currentlPlayingTime = vid.currentTime;
              if (currentlyPlaying === 1) {
                  vid.src = src2;
                  currentlyPlaying = 2;
                  btn.innerHTML = &quot;Video 1&quot;;
              } else {
                  vid.src = src1;
                  currentlyPlaying = 1;
                  btn.innerHTML = &quot;Video 2&quot;;
              }
              vid.load();
              vid.addEventListener('canplay', function () {
                  vid.currentTime = currentlPlayingTime;
              }, false);
          }
  &lt;/script&gt;
  
      
  
  &lt;/html&gt;
  </code></pre>