Skip to content

feat: web support#4724

Merged
moskalakamil merged 64 commits intoTheWidlarzGroup:masterfrom
zoriya:feat/web
Mar 30, 2026
Merged

feat: web support#4724
moskalakamil merged 64 commits intoTheWidlarzGroup:masterfrom
zoriya:feat/web

Conversation

@zoriya
Copy link
Copy Markdown
Contributor

@zoriya zoriya commented Oct 7, 2025

Summary

Initial implementation for the web. I decided to use video.js to support more advanced features (like hls/dash/ads/drm...)

Missing features i don't plan on implementing:

  • buffer config
  • drm
  • ads

Motivation

Fixes #4605

Note that i found some missing APIs while implementing this (crossed items are those I added an api & implementation but only on the web):

  • missing mimeType in source
  • missing startTime
  • missing audio/video selections
  • missing metadata in text tracks (default, forced, cc, codecs)
  • multi-source setup (give two uris + mimetype for the same video & let the player determine which one it can play)
  • multi audios
  • multi variants (hls/dash only)
  • next/prev custom actions for the media notification

Test plan

I've been using this PR for a few months on https://github.com/zoriya/kyoo and it works perfectly. This should be ready to merge.

@zoriya
Copy link
Copy Markdown
Contributor Author

zoriya commented Oct 13, 2025

I switched the implementation to videojs instead of shaka because it was a pain to switch between html5 video for mp4/basic videos & shaka for hls/dash.
videojs offers a unifed api for that and offer even more features through plugins.

@zoriya
Copy link
Copy Markdown
Contributor Author

zoriya commented Oct 20, 2025

I added new public APIs that are only used for the web right now:

  • mimeType in the source.
  • getAvailableAudioTracks(), selectAudioTrack(track | null) & get selectedAudioTrack() on the player
  • getAvailableVideoTracks(), selectVideoTrack(track | null) & get selectedVideoTrack() on the player
  • getAvailableQualities(), selectQuality(track | null), get currentQuality() & get autoQualityEnabled() on the player
  • onQualityChange, onVideoTrackChange & onAudioTrackChange events

@zoriya
Copy link
Copy Markdown
Contributor Author

zoriya commented Mar 26, 2026

I'll personally wait for those features to be available to update and keep kyoo on my branch in the meantime.

I skimmed through videojs's issues/milestone and it probably won't be long before they implement those features. They also have some nice features planned like keyboard control, chromecast/airplay...

@moskalakamil moskalakamil changed the title Web implementation feat: web support Mar 26, 2026
@moskalakamil moskalakamil requested a review from Copilot March 26, 2026 15:39
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 42 out of 47 changed files in this pull request and generated 8 comments.

Comments suppressed due to low confidence (1)

packages/react-native-video/src/core/events/VideoPlayerEventsBase.ts:101

  • onBandwidthUpdate is part of VideoPlayerEvents (no @platform restriction) but VideoPlayerEventsBase.addEventListener doesn’t handle it anymore, so on web it will currently throw Unsupported event: onBandwidthUpdate. Either route this event here (like other shared events) via eventEmitter.addOnBandwidthUpdateListener, or explicitly mark it as native-only in Events.ts and ensure web doesn’t advertise support.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@moskalakamil moskalakamil requested a review from fnwk March 26, 2026 21:30
Comment on lines +77 to +79
"dependencies": {
"@videojs/react": "^10.0.0-beta.11"
},
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@videojs/react is added as a dependency instead of peerDependency to simplify DX for web users - no extra install needed. This package is only imported from .web.tsx files, which are never resolved by Metro when bundling for native platforms, so it has zero impact on native bundle size

Copy link
Copy Markdown
Collaborator

@fnwk fnwk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, thanks for the PR @zoriya @moskalakamil

@moskalakamil moskalakamil merged commit 9ed72c9 into TheWidlarzGroup:master Mar 30, 2026
1 check failed
@moskalakamil
Copy link
Copy Markdown
Collaborator

let's go 🎉🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

[Alpha v7] Missing Feature - Basic Web Support

5 participants