sparkbox / bouncy-ball

:red_circle: Compare web animation techniques by bouncing a ball with each one.
https://sparkbox.github.io/bouncy-ball
MIT License
605 stars 66 forks source link

🐛 fix: explicitly muted for autoplay on iOS #53

Closed tigt closed 6 years ago

tigt commented 6 years ago

From New <video> Policies for iOS:

  • <video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
  • <video muted> elements will also be allowed to autoplay without a user gesture.

It's non-obvious that the files in the demo may or may not have audio tracks, so it may be better to make it explicit. A comment explaining this may also be helpful; what do you think?

bryanbraun commented 6 years ago

Great idea! Let's do it. And yes a short comment in the markup describing this would be educational here. Maybe something like:

<!-- We mute the video explicitly to ensure it autoplays on iOS devices.
     See also: https://webkit.org/blog/6784/new-video-policies-for-ios -->

Is this proactive or were you seeing it pausing in the wild?

tigt commented 6 years ago

Proactive, but I figured it was important for an example. It also guards against having a "Mute this" control appear on a browser tab/notification.

bryanbraun commented 6 years ago

Sounds good. I'm adding the comment and merging. Thanks again @tigt!