Soenneker.Blazor.Videojs 4.0.124

Prefix Reserved
.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package Soenneker.Blazor.Videojs --version 4.0.124
                    


                    

                
NuGet\Install-Package Soenneker.Blazor.Videojs -Version 4.0.124
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Soenneker.Blazor.Videojs" Version="4.0.124" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Soenneker.Blazor.Videojs" Version="4.0.124" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Soenneker.Blazor.Videojs" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Soenneker.Blazor.Videojs --version 4.0.124
                    


                    

                
#r "nuget: Soenneker.Blazor.Videojs, 4.0.124"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Soenneker.Blazor.Videojs@4.0.124
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Soenneker.Blazor.Videojs&version=4.0.124
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Soenneker.Blazor.Videojs&version=4.0.124
                    


                            Install as a Cake Tool

alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image

alternate text is missing from this package README image 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.

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
4.0.124 32 5/1/2026
4.0.123 103 4/25/2026
4.0.122 92 4/24/2026
4.0.121 87 4/24/2026
4.0.120 96 4/24/2026
4.0.119 84 4/24/2026
4.0.118 91 4/23/2026
4.0.117 101 4/23/2026
4.0.115 104 4/15/2026
4.0.113 91 4/15/2026
4.0.112 93 4/15/2026
4.0.111 91 4/14/2026
4.0.109 93 4/14/2026
4.0.108 91 4/14/2026
4.0.107 95 4/13/2026
4.0.106 91 4/13/2026
4.0.105 93 4/13/2026
4.0.104 99 4/10/2026
4.0.103 86 4/8/2026
4.0.101 85 4/8/2026
Loading failed

-> lepton