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 EventCallbacks.

The options closely mirror the Video.js options surface. Refer to the Video.js options guide for configuration details.

Installation

dotnet add package Soenneker.Blazor.Videojs

Register services

public void ConfigureServices(IServiceCollection services)
{
    services.AddVideoJsInteropAsScoped();
}

Usage

@using Soenneker.Blazor.Videojs
@using Soenneker.Blazor.Videojs.Configuration
@using Soenneker.Blazor.Videojs.Dtos

<VideoJs Configuration="@_config" OnPlay="HandlePlay" />

@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:

<VideoJs Configuration="@_config" Sources="@_sources" />

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:

var config = new VideoJsConfiguration
{
    UseCdn = false
};

Events

The component exposes common Video.js events as EventCallbacks, including OnReady, OnPlay, OnPause, OnEnded, OnTimeUpdate, OnLoadedMetadata, OnSeeking, OnSeeked, OnWaiting, OnPlaying, OnRateChange, and more.