1

So I have a <video> element that has its video in a <source> element found in the <video> element. I can press some buttons (each one has a data url to a local video) and these videos get loaded into the <source> element's src value. My <video> has attributes loop and muted (no controls attribute). I also have a custom play button that I target using jQuery, and use that to play the video. This solution works fine on desktop.

However, I keep getting this error:

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

Any ideas? Supporting code for my meteor file can be found here: https://gist.github.com/rohanbhangui/3b42ff7886bc3c52fcf8

EDIT: I read up a bit on google and found this https://stackoverflow.com/a/32571967/2280670 <-- but I could not make any sense of it and how to use that in a meteor context

Community
  • 1
  • 1
Rohan Bhangui
  • 353
  • 2
  • 10
  • I may be stating the obvious here, but you need to have a click handler for your play button that does something like `$('video')[0].play()`. On mobile devices, if you attempt to call `play` outside of a user-initiated event handler it won't work IIRC. – David Weldon Jan 19 '16 at 00:41
  • @DavidWeldon even with a click handler it does not work. I created one and it still wont play. I get the same error – Rohan Bhangui Jan 19 '16 at 04:31
  • @DavidWeldon one more thing, I have a pure jquery version of this that I am using for reference (I used it as my mock up) and it behaves correctly. Just in meteor im getting this warning – Rohan Bhangui Jan 19 '16 at 05:09

0 Answers0