- When you are ready to play a video, insert the markup into the DOM with
autoplay=auto preload
on the tag. Don’t add the markup early and load() or play() it later. If you have the markup in there when the Vue component compiles, it will trigger multiple video loads - When listening when to show the video (like fade it in), listen for the
timeupdate
event, notcanplaythrough
. This ensures that the video will already be playing when you show it. In Safari, thecanplaythrough
plays too soon and will pause on the first frame for a bit (edited) - When you animate the video in, never have it
display:none
or in Safari it will pause on the first frame. Set theopacity
to 0 and then fade it in when ready, for instance - Make sure webm is before mp4, it helps FF out a lot
Created
February 3, 2016 22:35
-
-
Save weotch/1988dcb22470996df01f to your computer and use it in GitHub Desktop.
Notes on using <video> with Vue.js
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment