Safari has blocked autoplay from videos which are completely understandable. But I have to find a workaround that a video is playing "automatically". I use VueJS btw.
The video:
<video preload="auto" id="videowizy" class="video mockup-size">
<source src="../assets/video.mp4" type="video/mp4">
</video>
This video is only played when pressed on a custom play button.
<a id="play" @click="startVideo">Play Video ▶</a>
And I start it with the .play(); function.
this.videoStarted = true;
window.setTimeout(() => {
this.videoVisible = true;
var video = document.getElementById('videowizy');
video.addEventListener('ended',this.stopVideo,false);
video.play();
},2000)
Now to the question. Safari 12 is throwing me the following error
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.
I would be fixed when I use controls=true but when I use controls=true I cannot press play because the video is positioned absolutely behind a frame (to simulate a mockup of a phone). Is there a way to say "hey this is the play button, please let me play safari"?
Thanks in advance!
