search

paulirish / lite-youtube-embed

A faster youtube embed.
https://paulirish.github.io/lite-youtube-embed/
Other
5.84k stars 271 forks source link

Mute videos on iOS devices when tapped #159

Open danielraffel opened 11 months ago

danielraffel commented 11 months ago

EDIT(paulirish): daniel left this amazing comment on an ios branch commit.. here's that comment:

If/when you might be ready to pick this back up I have a hunch the issue on iOS / iPad is related to audio volume:

Webkit Policy: https://webkit.org/blog/6784/new-video-policies-for-ios/#:~:text=elements%20will%20be%20allowed,user%20gesture%2C%20playback%20will%20pause.

Apple dev policy https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari/

"By default, autoplay executes only if the video doesn’t contain an audio track, or if the video element includes the muted attribute. Video playback pauses if the element gains an audio track, becomes unmuted without user interaction, or if the video is no longer onscreen (either by CSS or due to the user scrolling the page)."

How to repro:

  1. if you mute the yt player, then refresh the page and tap a lite-youtube embedded video, it seems to always play.
  2. however, if you unmute the yt player, then refresh the page and tap a lite-youtube embedded video, it seems to require double click to play at least the first time and may/may not play on subsequent embeds elsewhere on the page.

So, it appears this might be bumping up against policy around audio volume (being set to on) when a video starts playing which isn't muted; making this harder than it should be. Hope that's helpful!

proposed a fix: https://github.com/paulirish/lite-youtube-embed/pull/159 This mutes videos when they are played on an iPad or iPhone. Specifically, it adds the parameter 'mute', '1' to the video URL if the platform is identified as iPad or iPhone. This is achieved using the test /iPad|iPhone|iPod/.test(navigator.platform). The purpose is to mute videos automatically on these devices upon tapping.

The change introduces a condition to mute videos when they are played on an iPad or iPhone. Specifically, it adds the parameter 'mute', '1' to the video URL if the platform is identified as iPad or iPhone. This is achieved using the test /iPad|iPhone|iPod/.test(navigator.platform).

The purpose is to mute videos automatically on these devices upon tapping based on the findings I mentioned here: https://github.com/paulirish/lite-youtube-embed/commit/9dfd33a975b97410769981579aa7301118c1cac9#commitcomment-130244618

paulirish commented 7 months ago

navigator.platform no longer has anything useful. and .. there's no longer anything in navigator that communicates its an ipad.

i think best we can do is userAgent.includes('Intel Mac OS X') ... this'll catch desktop safari too.. but.. Apple seems fairly intent on making those two indistinguishable. So.. oh well.