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

feat: add DASH support using Video.js #179

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

pimlie
Copy link
Contributor

@pimlie pimlie commented Jul 7, 2024

I guess the biggest question you'll have is why I used Video.js http-streaming and not dash.js. To clarify, I started with dash.js actually, but the reason I switched to use Video.js is that dash.js seems more of a high level implementation. Also

  • it's a huge dependency by default without rebuilding it manually (~800kb)
  • it doesn't support preload="none"
  • it also uses the native interface which means that similar to HLS playback you need to manually implement rate switching which also seems bugged, as it didn't work for me not even on the official example page.
  • I might have done something wrong, but I couldn't get dash.js to load in a nice/predictable manner. It basically always started with the lowest bitrate then worked itself up to whatever was supported. But that also meant that you we're downloading a 720p video for a player that only had a height of 360p. Video.js starts at the bitrate/representation that closest fit the player height, then lowers the bitrate if needed which seemed much nicer.

After looking at https://github.com/iv-org/invidious I decided to follow their use of Video.js and even copied some of their work (their player theme in the file player-invidious.css is a direct copy). Using a full fletched player like Video.js should hopefully result in a lower maintenance load for this project.

Differences with native playback:

  • the Video.js player doesn't nicely retain it's aspect ratio, so the control bar is as width as the original video width. Which for some video's is a good thing as the minimum width of the current control bar is 312px and some video's are smaller after resizing due to the height constraint.
  • on mobile you can't click on the video itself to pause/play the video, there is an issue open for this at Video.js
  • as I used a IntersectionObserver to lazy load the Video.js player, we can now also pause the video automatically when you scroll down on a video that's playing.

Btw, this is not a breaking change. USE_HLS should still work as previously. If you enable both then USE_VJS has preference

@pimlie
Copy link
Contributor Author

pimlie commented Jul 9, 2024

If you have a strong preference for trying out dash.js I could take another go at that, should be relatively easy using the same building blocks from this pr. We could also add USE_DASH and look at what works best/easiest in the long run

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

Successfully merging this pull request may close these issues.

1 participant