Blazorise Video component

Play local files or streaming media with the Video component.

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

Installation

NuGet

Install extension from NuGet.

dotnet add package Blazorise.Video

Imports

In your main _Imports.razor add:

@using Blazorise.Video

Examples

Basic

To play the video you just need to define the Source of the video.

<Video Source="@("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")" />

Streaming Dash

We also support streaming videos. To stream the video you just define the Source as usual, along with the StreamingLibrary used to handle the video media type.

<Video Source="@("https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd")" StreamingLibrary="StreamingLibrary.Dash" />

Streaming HLS

We also support streaming of HLS videos. To stream the video you just define the Source as usual, along with the StreamingLibrary used to handle the video media type.

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

<Video Source="@("https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd")"
       StreamingLibrary="StreamingLibrary.Dash"
       ProtectionType="VideoProtectionType.Widevine"
       ProtectionServerUrl="https://drm-widevine-licensing.axtest.net/AcquireLicense"
       ProtectionHttpRequestHeaders="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImZpcnN0X3BsYXlfZXhwaXJhdGlvbiI6NjAsInBsYXlyZWFkeSI6eyJyZWFsX3RpbWVfZXhwaXJhdGlvbiI6dHJ1ZX0sImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.FAbIiPxX8BHi9RwfzD7Yn-wugU19ghrkBFKsaCPrZmU" />

Multiple files

The VideoSource object contains a list of VideoMedia instances, each representing a different quality of the same video. Each VideoMedia is initialized with a unique URL that points to the video source, a media type, and a quality represented as resolution (in pixels).

Here, three versions of the same video are provided: a 576p, a 720p, and a 1080p. These different versions give users the ability to choose the video quality according to their network conditions or preferences.

The DefaultQuality property set on the Video component dictates which version of the video is loaded by default when the component is rendered. In this case, it is set to "720", meaning the 720p version of the video will be the default.

<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),
        }
    };
}

API

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

<Video />