Blazorise Video component

Play local files or streaming media with the Video component.

To use the Video component, install the Blazorise.Video package first.

The extension uses Video.js v10 for browser playback. Its JavaScript, styles, streaming integrations, and skin assets are served from the package and loaded on demand, so normal usage does not require CDN references.

Structure

Type Purpose
Video Hosts the player, coordinates playback state, and exposes controls, events, streaming, and DRM options.
VideoSource Describes the media type, title, poster, media files, and text tracks used by the player.
VideoMedia Defines one media URL, MIME type, and optional dimensions. Multiple entries can represent selectable quality levels.
VideoTrack Defines captions, subtitles, chapters, descriptions, or metadata associated with the media.

Installation

NuGet

Install the Video extension package. 
dotnet add package Blazorise.Video

Imports

Add the extension namespace to the application's main _Imports.razor. 
@using Blazorise.Video

Runtime assets

No service registration, script tag, stylesheet link, or CDN reference is required. Blazorise loads the locally packaged Video.js core, styles, and the media adapter required by the current source.

Localization

The player follows the culture selected through the Blazorise localization service. Changing the application language updates both the Blazorise-owned labels and the locally packaged Video.js translations automatically. Set the standard lang attribute on an individual Video when that player needs a different culture.

YouTube and Vimeo hosting requirements

Pass a regular public YouTube or Vimeo page URL to Source. The component detects the provider and creates the corresponding Video.js media element. The provider video must allow embedding and the browser must be able to reach that provider.
  • A restrictive Content Security Policy must include https://www.youtube.com, https://www.youtube-nocookie.com, and https://player.vimeo.com in frame-src. YouTube playback also requires https://www.youtube.com in script-src for its IFrame Player API.
  • Private videos, videos whose owner disabled embedding, and provider restrictions such as age, region, or authentication requirements cannot be bypassed by the component.
  • Content blockers can block the provider iframe or YouTube API even though all Blazorise and Video.js package assets are served locally.

Examples

Basic

Set Source to a browser-supported media file to create a player with the default controls.
Something went wrong.
OK
Quality Speed Captions
Quality
Speed
Captions 
<Video Source="@("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4")" />

YouTube

Set Source to a regular YouTube watch URL. The provider is detected automatically and its locally packaged adapter is loaded on demand.
Something went wrong.
OK
Quality Speed Captions
Quality
Speed
Captions 
<Video Source="@("https://www.youtube.com/watch?v=M7lc1UVf-VE")" />

Vimeo

Set Source to a regular Vimeo video URL. The provider is detected automatically and its locally packaged adapter is loaded on demand.
Something went wrong.
OK
Quality Speed Captions
Quality
Speed
Captions 
<Video Source="@("https://vimeo.com/76979871")" />

Streaming DASH

Set StreamingLibrary to StreamingLibrary.Dash when Source points to a DASH manifest.
Something went wrong.
OK
Quality Speed Captions
Quality
Speed
Captions 
<Video Source="@("https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd")" StreamingLibrary="StreamingLibrary.Dash" />

Streaming HLS

Set StreamingLibrary to StreamingLibrary.Hls when Source points to an HLS playlist.
Something went wrong.
OK
Quality Speed Captions
Quality
Speed
Captions 
<Video Source="@("https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8")" StreamingLibrary="StreamingLibrary.Hls" />

Widevine DRM

This example shows how to use Video to play streams with Widevine DRM protection.
Something went wrong.
OK
Quality Speed Captions
Quality
Speed
Captions 
<Video Source="@("https://storage.googleapis.com/shaka-demo-assets/sintel-widevine/dash.mpd")"
       StreamingLibrary="StreamingLibrary.Dash"
       ProtectionType="VideoProtectionType.Widevine"
       ProtectionServerUrl="https://cwip-shaka-proxy.appspot.com/no_auth" />

Multiple files

Add several VideoMedia entries to a VideoSource to offer multiple versions of the same video. Their heights become quality choices, and DefaultQuality selects the initial version.
Something went wrong.
OK
Quality Speed Captions
Quality
Speed
Captions 
<Video Source="@videoSource" DefaultQuality="720" />

@code {
    VideoSource videoSource = new VideoSource()
    {
        Medias = new ValueEqualityList<VideoMedia>
        {
            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4", "video/mp4", 576),
            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4", "video/mp4", 720),
            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4", "video/mp4", 1080),
        }
    };
}

Best practices

  • Provide a Poster and stable Ratio when possible to avoid layout movement before media metadata loads.
  • Add caption or subtitle VideoTrack entries for accessible playback, and identify their language and label.
  • Use native media files for simple playback and select HLS or DASH only when the source is a matching streaming manifest.
  • YouTube and Vimeo adapter files are served by Blazorise, but their iframe players and media require network access and permission from browser content blockers.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page