title: How can I store and re-use a click event (permission to play audio/video)
body: <p>We have a video.  I made an "intro page" for that video.  The intro page runs a nice little animation, and an audio track, then it loads the video in the middle of the screen and plays it.</p>
  
  <ul>
  <li><p><strong>Problem</strong> - Mobile devices don't play the audio at the start, nor the video</p></li>
  <li><p><strong>Workaround</strong> - I added a Play button at the beginning.  Then in the event handler I start the audio, and the animation.</p></li>
  <li><p><strong>Problem with workaround</strong> - The issue is that the users have to click both at the beginning, to start the audio and the animation, then they have to click AGAIN to start the video. </p></li>
  <li><p><strong>Workaround to workaround</strong> - So I figured I might be allowed to start the video and pause it (hidden) in the original event handler, then just continue the video (play) later after the intro animation ends.</p></li>
  <li><p><strong>Problem with workaround to workaround</strong> - So it actually worked to start the video and pause it in the original click event handler, and then later play it after the animation, without the user needing to click again. HOWEVER, the problem is that now it doesn't play the audio that goes with the initial animation. Starting the video seems to cancel the audio</p></li>
  </ul>
  
  <p>So since you want to see code, here is what is happening in the click handler at the very beginning, when the page loads:</p>
  
  <pre><code>sym.$("playcover").hide();               //hide play button
  sym.play();                              //start the animation
  sym.$("ambient11sec2")[0].play();        //start the audio
  var vid = sym.getVariable("introvideo"); //get video reference
  vid.play();                              //play video while we have user's event
  vid.pause();                             //immediately pause (video.js btw)
  </code></pre>
  
  <p>then later after the animation</p>
  
  <pre><code>sym.getVariable("introvideo").play();
  </code></pre>
  
  <p>So again, it "works" but as soon as the video is played, it cancels out the audio. (iOS "feature")</p>
  
  <ul>
  <li><strong>QUESTION</strong> - So the question is, is there a way to "store" the user event, so that I can immediately play the audio, but then at a later time play the video.  </li>
  </ul>
  
  <p>Or is there some other workaround, so that 1 click will let me play the animation+audio then video? I'm not sure what exactly makes the click event special to where I can run audio/video.</p>