Notes on using <video> with Vue.js

vue-video.md

• 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, not canplaythrough. This ensures that the video will already be playing when you show it. In Safari, the canplaythrough 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 the opacity to 0 and then fade it in when ready, for instance
• Make sure webm is before mp4, it helps FF out a lot