Reconfigure Video options to optimize for user's settings around autoplay

[katydecorah]

This branch merges into #431

This PR makes some changes to how we handle autoplay, loop, and the displaying of controls in the Video component. Previously we handled users who prefer reduce motion by disabling loop, autoplay, and showing the controls. We did not take into account browser settings that would disable autoplay, so this PR will.

The goal is to give preference to the user's settings first:

• Regardless of settings, on hover of the video container the controls will appear.
• Autoplay and loop settings are turned off by default. If the user doesn't prefer reduced motion, then we will set autoplay and loop to true (unless the those props are false as passed through to the component.)
• If the video is not playing, show a play button icon over the video. This will help indicate to users who prefer reduced motion and users who have disabled autoplay in their browsers that the content is a video. Once they click the button the video will play.

Fixes #275

Screenshots

Play button appears for users who prefer reduced motion or have disabled autoplay

How to test

Interact with /Video or /Phone test cases:

• Try with your usual settings
• Try with enabled reduce motion
• Try with disabled autoplay in your browser

QA checklist

• No errors logged to console.
• Accessibility score in Chrome DevTools Audit/Lighthouse is 100% with Lighthouse version: 7.0.0.
• Component is accessible at mobile-size viewport.
• Component is accessible at tablet-size viewport.
• Component is accessible at laptop-size viewport.
• Component is accessible at big-monitor-size viewport.

Open the test cases app locally on:

• Chrome, no errors logged to console.
• Firefox, no errors logged to console.
• Safari, no errors logged to console.
• Edge, no errors logged to console.
• Mobile Safari, no errors logged to console.
• Android Chrome, no errors logged to console.

[danswick]

This seems like a really smartly designed video component, @katydecorah! I was a little confused by autoplay and left a comment inline. When I tested locally, the basic example was autoplaying by default. Looking at video.js, that seems like the expected behavior, but the code comments and changelog entry suggest it shouldn't be. Am I misunderstanding that test case?

[danswick]

Great feature!

[danswick]

Should autoplay be false by default?

[katydecorah]

@danswick I can help improve the wording, but here's the gist:

1. The state by default disables autoplay. We assume that the user will prefer reduced motion.
2. Then in componentDidMount, we check the users's preferences:
   • If the user prefers reduced motion, the component will not use default props and will continue to disable auto play.
   • If the user does not prefer reduced motion, then the component will use default props to determine if the video should be autoplayed.

This gives the developer flexibility is turning autoplay on or off. But ultimately, we will default to the user's preferences. Where default props = developer preferences, state = user preferences.

[danswick]

Thanks for tweaking the comment language, @katydecorah! Looks great to me 🥞