Ramp video player UI updates

[elynema]

Description

Based on investigation and review from Avalon #5176, we want to make some tweaks to the buttons in the Ramp video player.

Changing the configuration of Ramp. This list can be internal—things that don't need to be exposed for implementers to pass through in their own configurations.

Done Looks Like

• Add large overlay play button to middle of player when video is not playing (video.js can do this)
• Change timestamp to format like YouTube (/) and position on right side of progress bar
• Captions: style so that CC button looks different when captions are on vs. off (Dananji suggested transparent background with white text vs. current style of white background with transparent text)
• Remove picture in picture button because provided by browser - both Firefox and Chrome - is this something that could be configured outside of Ramp or is it a core change in Ramp?
  • Prop added to mediaplayer component so it doesn't have to be set up unless explicit

[Dananji]

Changing the CC button icon when captions are turned on is not something that is possible yet in VideoJS. But there's work in progress in VideoJS which might provide this functionality in a future release.
So for now, we are using a similar approach as the current Avalon player to indicate captions are on.