Skip to content

Commit

Permalink
okay putting it down now
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulirish
paulirish committed Feb 5, 2023
1 parent d049846 commit 9dfd33a
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 1 deletion.
21 changes: 20 additions & 1 deletion ios-autoplay.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,23 @@ i can see a setTimeout(fn, undefined) and a promise in this callstack. it origin
and the promise is a Promise.resolve() so its synchronous. (at least in chrome)..


using l-yt-e on my m1 laptop on home wifi, i see click -> ytapi.playVideo() as 500ms.
using l-yt-e on my m1 laptop on home wifi, i see click -> ytapi.playVideo() as 500ms.






... right as i was putting this down. i was looking at these log lines:

```
[Warning] ytplayer invoking playVideo – 50379 (lite-yt-embed.js, line 169)
[Info] HTMLMediaElement::load(667F51CF7E5E9602)
[Log] HTMLMediaElement::prepareForLoad(667F51CF7E5E9602) gesture = false
```

if gesture=true we're good.
and i notice its never true in browserstaack... and... it probably has to do with how browserstack resimulates clicks.
so i think i need real hardware to really test this current approach.

(however the async callstack that safari constructs for that promise stillllllll weirds me out)
42 changes: 42 additions & 0 deletions variants/inner.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>lite-youtube-embed - inner</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button { font-size: 200%; }
</style>
</head>
<body>
<h1>video elem inner</h1>

<div id="videohold"></div>

<button type="button" onclick="location.reload()">reload this</button>

<script>

globalThis.playyy = () => {
document.querySelector('video').play();
}

// setTimeout(() => {
document.querySelector('#videohold').innerHTML = `
<video width="640" height="360" controls autoplay>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /><!-- Safari / iOS, IE9 -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" /><!-- Firefox3.6+ / Opera 10.5+ -->
</video>
`;
playyy();
// })


</script>



</body>
</html>

1 comment on commit 9dfd33a

@danielraffel
Copy link

@danielraffel danielraffel commented on 9dfd33a Oct 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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: #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.

Please sign in to comment.