Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video Block: Make users aware about Autoplay and Muted combination #69218

Open
2 of 6 tasks
Rishit30G opened this issue Feb 17, 2025 · 7 comments · May be fixed by #69232
Open
2 of 6 tasks

Video Block: Make users aware about Autoplay and Muted combination #69218

Rishit30G opened this issue Feb 17, 2025 · 7 comments · May be fixed by #69232
Assignees
Labels
[Block] Video Affects the Video Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@Rishit30G
Copy link
Contributor

Description

Currently, we don’t have a way to inform users that autoplay and muted must be enabled together for the video to play. As it stands, if a user enables the autoplay toggle, the video does not play on the frontend unless muted is also enabled.

To improve clarity, it would be helpful to provide users with a short description when they toggle the autoplay switch, informing them that autoplay only works when the video is muted.

Step-by-step reproduction instructions

  1. Create a new post
  2. Add a 'Video' block to it
  3. Upload a video to the block
  4. Toggle the 'Autoplay' from the right panel
  5. Click on save and check the post on frontend, notice that the video looks like an image and it doesn't autoplay
  6. Go back to the editor and on the right panel toggle the 'Muted' switch
  7. Save the post and check it on the frontend, notice that now the video is playing

Screenshots, screen recording, code snippet

Screen.Recording.2025-02-17.at.1.02.09.PM.mov

Environment info

  • WordPress: 6.7.2
  • Gutenberg: 20.2.0
  • Chrome and Safari

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@Rishit30G Rishit30G added the [Type] Bug An existing feature does not function as intended label Feb 17, 2025
@Rishit30G
Copy link
Contributor Author

User can basically toggle the 'Playback control' along with 'Muted' and 'Autoplay' to make an unmuted autoplay, that's one way.

But IMO, something like the below screenshot should be appropriate, I would like some eyes on this before implementation

Thanks

Image

@yogeshbhutkar

This comment has been minimized.

@Infinite-Null
Copy link
Contributor

Infinite-Null commented Feb 17, 2025

Hi @yogeshbhutkar,

I believe @Rishit30G is referring to the fact that newer versions of mobile browsers on Android and iOS do support the autoplay function. However, it only works when the video is muted or has no audio channel:

Screen.Recording.2025-02-17.at.3.55.29.PM.mov

When muted is on:

Screen.Recording.2025-02-17.at.3.58.29.PM.mov

Reference - https://webkit.org/blog/6784/new-video-policies-for-ios/
Reference - https://stackoverflow.com/questions/16965170/html5-video-autoplay-not-working-correctly
Reference - https://developer.chrome.com/blog/autoplay

@yogeshbhutkar
Copy link
Contributor

Thanks for the clarification!

@t-hamano t-hamano added the [Block] Video Affects the Video Block label Feb 17, 2025
@Rishit30G
Copy link
Contributor Author

Thanks both for looking into it, appreciate your efforts! 🙇🏻

Reference - https://webkit.org/blog/6784/new-video-policies-for-ios/
Reference - https://stackoverflow.com/questions/16965170/html5-video-autoplay-not-working-correctly
Reference - https://developer.chrome.com/blog/autoplay

Yes, I'm also coming from the same references and I believe they have been considered while building this block, and if they are then we should assist the user to use the functionality as intended.

However some more expert eyes can suggest some better insights for this one 👀

@carolinan
Copy link
Contributor

I think the auto play option should be disabled until muted is enabled.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Feb 18, 2025
@Rishit30G
Copy link
Contributor Author

I think the auto play option should be disabled until muted is enabled.

Thank you for your suggestion 🙇🏻
I have raised a PR for the fix: #69232

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Video Affects the Video Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants