search

CouncilDataProject / seattle_v2

Website for interacting with Seattle's instance of CDP
https://councildataproject.github.io/seattle
BSD 3-Clause "New" or "Revised" License
5 stars 6 forks source link

Request from user: add playback speed options to video player #47

Closed evamaxfield closed 4 years ago

evamaxfield commented 4 years ago

Have video options for 0.75x / 1.0x / 1.5x / 2x playback speeds.

I think we are using video-react, which has a playbackRate property. Would need to add some handlers for switching this in the controls.

But this opens up a larger discussion on creating a custom component for handling video player state because I think you would have to have a separate drop down outside of the video player frame which would lead to bad UX imo. So in that case we would basically have to create this large container for managing video + video controls components. (Plus we can then style the controls however we like. Which would be cool.)

tohuynh commented 4 years ago

We are currently using react-player, but video-react looks like a nice alternative?

react-player also has a playbackRate prop. Currently, for video controls(play, pause, volume,etc), react-player display the native player controls. For example, if url is a youtube link, then it will show the youtube video controls(which has a playbackRate UI element). For files url (our case), it will show the HTML5 video controls, which doesn't include a playbackRate UI element. For Firefox and Edge, the user could right-click on the video, and change the playbackRate. Chrome doesn't have this feature.

video-react has a flexible ControlBar component that we could use. It could include all the video controls components that we need. And it looks pretty good visually.

Do you want to switch over to video-react? In terms of coding, by just looking at the documentation, I don't see any big complications in replacing with video-react.

evamaxfield commented 4 years ago

If video-react has a ControlBar component then absolutely I think we should switch over. Things like playback rate and styling of the controlbar are huge wins imo.

tohuynh commented 4 years ago

What do you think of the example of PlaybackRateMenuButton, along with other video controls, as an example for what our video player could look like?

evamaxfield commented 4 years ago

I would personally switch the position of the buttons on the bar and learn from YouTubes button placements but that is exactly it. :+1:

tohuynh commented 4 years ago

Cool, I'm going to replace the full-screen button with playback rate button.