https://github.com/soenneker/soenneker.blazor.videojs
A Blazor interop library for Video.js
https://github.com/soenneker/soenneker.blazor.videojs
blazor blazorlibrary csharp dotnet html5 interop js video videojs videojsinterop
Last synced: about 2 months ago
JSON representation
A Blazor interop library for Video.js
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.blazor.videojs
- Owner: soenneker
- License: mit
- Created: 2026-01-25T16:33:02.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-04-05T09:04:26.000Z (3 months ago)
- Last Synced: 2026-04-05T11:02:31.225Z (3 months ago)
- Topics: blazor, blazorlibrary, csharp, dotnet, html5, interop, js, video, videojs, videojsinterop
- Language: CSS
- Homepage: https://soenneker.com
- Size: 514 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.blazor.videojs/)
[](https://github.com/soenneker/soenneker.blazor.videojs/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.blazor.videojs/)
[](https://soenneker.github.io/soenneker.blazor.videojs)
[](https://github.com/soenneker/soenneker.blazor.videojs/actions/workflows/codeql.yml)
#  Soenneker.Blazor.Videojs
### A Blazor interop library for Video.js
This library wraps Video.js with a strongly-typed Blazor component and configuration model. It auto-loads Video.js assets (CDN or local) and exposes common player events as `EventCallback`s.
The options closely mirror the Video.js options surface. Refer to the [Video.js options guide](https://videojs.com/guides/options/) for configuration details.
## Installation
```
dotnet add package Soenneker.Blazor.Videojs
```
### Register services
```csharp
public void ConfigureServices(IServiceCollection services)
{
services.AddVideoJsInteropAsScoped();
}
```
## Usage
```razor
@using Soenneker.Blazor.Videojs
@using Soenneker.Blazor.Videojs.Configuration
@using Soenneker.Blazor.Videojs.Dtos
@code {
private readonly VideoJsConfiguration _config = new()
{
Controls = true,
Autoplay = "muted",
Muted = true,
Fluid = true,
Responsive = true,
AspectRatio = "16:9",
Poster = "https://vjs.zencdn.net/v/oceans.png",
PlaybackRates = [0.5, 1, 1.5, 2],
ControlBar = new VideoJsControlBarOptions
{
SkipButtons = new VideoJsSkipButtonsOptions { Backward = 10, Forward = 10 }
},
Sources =
[
new VideoJsSource { Src = "https://vjs.zencdn.net/v/oceans.mp4", Type = "video/mp4" },
new VideoJsSource { Src = "https://vjs.zencdn.net/v/oceans.webm", Type = "video/webm" }
]
};
private void HandlePlay()
{
// Your event logic here
}
}
```
## Sources
You can provide sources through the configuration object (shown above) or via the component parameter:
```razor
```
`Sources` overrides `Configuration.Sources` when provided.
## CDN vs local assets
The interop will load Video.js from the CDN by default. To use the packaged static files instead, set:
```csharp
var config = new VideoJsConfiguration
{
UseCdn = false
};
```
## Events
The component exposes common Video.js events as `EventCallback`s, including `OnReady`, `OnPlay`, `OnPause`, `OnEnded`, `OnTimeUpdate`, `OnLoadedMetadata`, `OnSeeking`, `OnSeeked`, `OnWaiting`, `OnPlaying`, `OnRateChange`, and more.