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

Fix playback for unmuted videos getting blocked by browser autoplay policies #65

Merged
merged 3 commits into from
Oct 6, 2021

Conversation

Gyanreyer
Copy link
Owner

@Gyanreyer Gyanreyer commented Oct 6, 2021

Fixes bug where unmuted videos could get blocked from playing by browsers' autoplay policies. This issue arose because browser policies require the user to have "interacted" with the page before playing a video with audio, and hover events don't count as a valid interaction; the user needs to click the page.

To get around this issue, if the browser blocks an unmuted video from playing, we will mute the video, attempt to play again,
and then restore sound once the user has clicked on the page.

re #64

Changes

  • Add handling to mute the video and retry the playback attempt if the browser blocks it initially
  • Add test to cover this case
    • Modifies Cypress' browser config to ensure the browser's autoplay policy won't be disabled in tests

@Gyanreyer Gyanreyer force-pushed the fix/fix-playback-with-audio-being-blocked branch 2 times, most recently from 123bd55 to 8c7c9a1 Compare October 6, 2021 13:46
@codecov
Copy link

codecov bot commented Oct 6, 2021

Codecov Report

Merging #65 (2f8ca28) into main (616404a) will decrease coverage by 0.34%.
The diff coverage is 100.00%.

❗ Current head 2f8ca28 differs from pull request most recent head 3c10998. Consider uploading reports for the commit 3c10998 to get more accurate results
Impacted file tree graph

@@             Coverage Diff             @@
##              main      #65      +/-   ##
===========================================
- Coverage   100.00%   99.65%   -0.35%     
===========================================
  Files            9        9              
  Lines          281      290       +9     
  Branches       113      114       +1     
===========================================
+ Hits           281      289       +8     
- Misses           0        1       +1     
Impacted Files Coverage Δ
src/hooks/useManageVideoPlayback.ts 99.10% <100.00%> (-0.90%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 616404a...3c10998. Read the comment docs.

@Gyanreyer Gyanreyer force-pushed the fix/fix-playback-with-audio-being-blocked branch from 8c7c9a1 to e41c6ce Compare October 6, 2021 14:11
…d by browser autoplay policies

If the browser blocks an unmuted video from playing, we will mute the video, attempt to play again,
and restore sound once the user has clicked on the page.

re #64
@Gyanreyer Gyanreyer force-pushed the fix/fix-playback-with-audio-being-blocked branch from e41c6ce to 1a2d2b0 Compare October 6, 2021 14:11
@Gyanreyer Gyanreyer changed the title fix(hovervideoplayer): fix playback for unmuted videos getting blocked by browser autoplay policies Fix playback for unmuted videos getting blocked by browser autoplay policies Oct 6, 2021
@Gyanreyer Gyanreyer merged commit 3cf9fa8 into main Oct 6, 2021
@Gyanreyer Gyanreyer deleted the fix/fix-playback-with-audio-being-blocked branch October 6, 2021 17:45
@Gyanreyer
Copy link
Owner Author

🎉 This PR is included in version 9.3.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant