-
The idea of a Youtube streaming player with an elastic synchronization mechanism sounds interesting.
-
To make it more understandable, here are some possible use cases:
- A Youtube player that automatically fast-forwards slightly if it is lagging behind during Youtube Live streaming.
- Development of a game creation support tool to realize a autonomously decentralized playground - I thought of this when I saw it.
-
It is common to experience small delays when pausing or rewinding during playback.
- It’s troublesome to always double the playback speed to compensate for the delay.
- So, I created a player that adjusts the speed automatically and nicely.
-
And it’s done!
Implementation Notes:
-
It seems that implementing it fairly easily is possible using React and the Youtube Player API (blu3mo).
-
Let’s try using Chakra UI or React+Firebase.
-
It seems easy to implement using react-player.
- It’s difficult to retrieve the overall duration of the stream.
- The Youtube iFrame API seems a bit unreliable.
- It’s difficult to retrieve the overall duration of the stream.
-
I got stuck due to a lack of understanding of how state works.
- Accessing state from setTimeout, setInterval, and others with react Hooks | Kisarabo
- React + TypeScript: Rewrite setInterval() to a hook that fits React’s programming model - useInterval - Qiita
- It seems like replacing setInterval with useInterval should work.
- It’s great to have resources like these available.
-
It’s tough that I can’t catch onSeek.
- Because of this, the speed remains unchanged when seeking, resulting in a non-intuitive UI.
- It’s possible to create a custom solution by checking for a significant change in seconds during click events, but it’s a hassle.