title: HTML5 Video with custom button not playable on safari 12
body: <p>Safari has blocked autoplay from videos which are completely understandable. But I have to find a <strong>workaround</strong> that a video is playing "automatically". 
  I use <strong>VueJS</strong> btw.</p>
  
  <p>The video:</p>
  
  <pre><code>&lt;video preload="auto" id="videowizy" class="video mockup-size"&gt;
      &lt;source src="../assets/video.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>This video is <strong>only played when pressed on a custom play button</strong>.</p>
  
  <pre><code>&lt;a id="play" @click="startVideo"&gt;Play Video ▶&lt;/a&gt;
  </code></pre>
  
  <p>And I start it with the <strong>.play();</strong> function.</p>
  
  <pre><code>this.videoStarted = true;
  window.setTimeout(() =&gt; {
      this.videoVisible = true;
      var video = document.getElementById('videowizy');
      video.addEventListener('ended',this.stopVideo,false);
      video.play();
  },2000)
  </code></pre>
  
  <p>Now to the question. Safari 12 is throwing me the following error</p>
  
  <blockquote>
    <p>Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.</p>
  </blockquote>
  
  <p>I would be fixed when I use controls=true but when I use controls=true I cannot press play because the <strong>video is positioned absolutely behind a frame</strong> (to simulate a mockup of a phone).
  Is there a way to say "hey this is the play button, please let me play safari"?</p>
  
  <p>Thanks in advance!</p>