Reputation: 121
Is it possible to bind HTML5 video playback to a scroll event on mobile devices? Specifically, I would like the user to be able to scroll to a certain part of the page (already have this functionality configured via jQuery waypoints plugin, and it works flawlessly on desktop) and have the video automatically start playing.
I am well aware of some of the limitations pertaining to video playback on mobile devices (link), but I have been able to work around some of these problems in the past. I have previously began video playback on user tap event interaction, but have not attempted to do so via scroll event interaction.
Does anyone know if this is possible? I would like to avoid having the user tap to begin the video, and it seems like since scrolling is an event just like tapping or swiping, it could in theory work. In practice is another issue.
I have tested on iPad 2 and Android 4.2
Upvotes: 0
Views: 2111
Reputation: 7002
As I understand Apple policy on playing HTML5 video on iOS you indeed need a user interaction to initiate playback --- but also this user interaction needs to be related to a "button". A "scroll" event is just not a valid user interaction to initiate playback. As stated here
In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
My experience is that Android on mobile devices has the same limitation.
One approach to accomplish what you want is to bind to a previously fired touch event (like with a "touch to enter this site button" or when a user touches on a link to navigate to some point on your page), initiate the play sequence on that event and then immediately pause the video until your user scrolls to where you want on your page and then resume playback.
Thanks
Upvotes: 2