Blazored Video

The easiest html5 video implementation for Blazor applications.

Changelog

2022-24-12 Version 1.1

• Bump dotnet version to 6.0 as 3.x and 5.x are now out of support.
• Add standard Methods and Properties (big thanks to https://github.com/JPVenson) and Async versions (for Server/WASM). (Issues #17 #9)
• Include video element id ("Id") and component object ref ("Video") in VideoState and VideoEventData (Issue #19) for identifying which component triggered an event.

Getting Setup

You can install the package via the nuget package manager - just search for Blazored.Video. You can also install via powershell using the following command.

Install-Package Blazored.Video

Or via the dotnet CLI.

dotnet add package Blazored.Video

Internet Explorer 11

This package can be used with Internet Explorer 11, but some special care should to be taken.

• Only Blazor Server works with IE11. Blazor WebAssembly does not work with any IE version. See this
• A polyfill is necessary for this component to work. See this page for an explanation on how to install and use it. The sample project for Blazor Server uses the polyfill and thus should work on IE11

Taking these things into account, Blazored.Video will work on IE11.

Note: The sample projects in this repo have IE11 support baked in.

Note: This package is no longer tested on IE 11 - as IE support has been dropped - it may work - it's up to you to test it.

Add Imports

Add the following to your _Imports.razor

@using Blazored.Video
@using Blazored.Video.Support

Usage

Please checkout the sample projects in this repo to see working examples of the features in the Video component.

Displaying a Video

Just use BlazoredVideo in place of any video tags.

<BlazoredVideo Play="OnPlay"
        class="w-100"
        style="max-width:800px;"
        controls="controls">
    <source src="videos/elephants.mp4" type="video/mp4" />
</BlazoredVideo>

This will render the html (id is auto-generated by default but you can supply your own)

<video class="w-100" id="361044add13e438cb3de299cd74272a6" controls="controls" _bl_796fa517-712e-4cf5-b8d6-7a4d940f2947=""><!--!-->
    <source src="videos/elephants.mp4" type="video/mp4">
</video>

Media Events

This component maps every media event on the video tag using either an Action or an EventCallback - depending on your preference.

Note: EventCallback events will automatically call StateHasChanged on the parent component, while Action events do not - it is your choice which you use for any event

Event Data

You are in control of the data sent with every event, if the video element you have on your page has the data, you can request it for any event.

Event data is requested by supplying a dictionary to the VideoEventOptions parameter.

[Parameter] public Dictionary<VideoEvents, VideoStateOptions> VideoEventOptions { get; set; }

Each entry defines the VideoStateOptions you require to be populated for any VideoEvents value.

VideoEvents is an enum of the Media Event names (see table above).

VideoStateOptions is a struct listing all the properties of the video element.

Let's look at an example.

Suppose you want to subscribe to the Play and TimeUpdate events so that you can remember the position in the video and restore it when the user comes back to this video.

There are two pieces of information we might want from the video

1. The name/url of the video file
2. The current timeline position

So, we create a dictionary and populate it with those options

Dictionary<VideoEvents, VideoStateOptions> options = new Dictionary<VideoEvents, VideoStateOptions>();

options[VideoEvents.TimeUpdate] = new VideoStateOptions { CurrentTime = true, CurrentSrc = true };

options[VideoEvents.Play] = new VideoStateOptions { CurrentSrc = true };

Note: I don't really need the CurrentSrc property in both events - it's just to show having more than one selected.

Now, we can pass that to the BlazoredVideo component.

<BlazoredVideo PlayEvent="OnPlay" TimeUpate="OnTimeUpdate"
        VideoStateOptions="options"
        class="w-100"
        style="max-width:800px;"
        controls="controls">
    <source src="videos/elephants.mp4" type="video/mp4" />
</BlazoredVideo>

Notice: I have use an EventCallback for the play event and an action for the timeupdate event - because in this case I don't want a re-render every time the timeupdate fires

This will render the html

<video class="w-100" id="361044add13e438cb3de299cd74272a6" style="max-width: 800px;" controls="controls" _bl_796fa517-712e-4cf5-b8d6-7a4d940f2947=""><!--!-->
    <source src="videos/elephants.mp4" type="video/mp4">
</video>

Now, every time the play or timeupdate media events fire, they will retrieve the currentSrc and/or currentTime properties from the video element and pass that data in a VideoState struct.

void OnPlay(VideoState state)
{
    var url = state.CurrentSrc;
    // do something with this
}
void OnTimeUpdate(VideoState state)
{
    var url = state.CurrentSrc;
    var currentTime = state.CurrentTime;
    // do something with this
}

Calling Standard Methods

** Added 2022-12-24 **

The component now supports four standard methods

Get/Set Standard Properties

** Added 2022-12-24 **

The component now supports most standard properties directly from C# code.

Example - WASM only int duration = videoRef.Duration

Note: Attempting to read/write Properties from Blazor Server will throw a runtime exception telling you to use the Async versions instead. I would advise always using the async Get/Set methods as they are able to use Asynchronous or Synchronous (under WebAssembly) calls at runtime automatically, while the Properties are Synchronous only.

Example - Remote JS (Server) and WASM int duration = await videoRef.GetDurationAsync()

Customising the html

The Video can be customised using standard CSS techniques.

All attributes are passed straight through to the HTML.