What Is Vidazor?

Vidazor = Video + Blazor

Vidazor is a Blazor library (RCL) that allows you to seamlessly work with the HTML5 video API, which normally you'd have to work with manually via JS interop.

Checkout the demo here

Vidazor currently only supports Blazor WebAssembly, due to the fact that it uses JSInProcessRuntime, it won't work on Blazor Server projects at the moment.

Getting Setup

You can set up Vidazor in your project in just 3 simple steps:

1. Install the NuGet package:

You can install the package via NuGet Package Manager, just search for "Vidazor".

Or if running commands is your thing, you can:

Install-Package Vidazor

Or via the .NET CLI:

dotnet add package Vidazor

2. Add the imports:

After having installed the package, add the following @using directives either to the _Imports.razor file in your Blazor project, or if you intend to use Vidazor in a specific component, add the directives to the top of that component:

@using Vidazor
@using Vidazor.Types

3. Start using the <VidazorVideo> component with a reference:

Now you're all set up! You can start using Vidazor! In your components, use the <VidazorVideo> tag, and reference the component to a private field. Through the private field, you can access the properties and methods that Vidazor offers.

<VidazorVideo @ref="video" OnTimeUpdate="@(() => Console.WriteLine($"Current time is: {video.CurrentTime}"))">
    <source src="/sample.mp4" />
</VidazorVideo>

<button type="button" @onclick="() => video.Play()">Play</button>
<button type="button" @onclick="() => video.Pause()">Pause</button>
<button type="button" @onclick="() => video.Muted = !video.Muted">Toggle Sound</button>

@code {
    VidazorVideo video;
}

Using HTML attributes on the <video> tag:

Vidazor supports attribute splatting, which means you can pass in any number of HTML attributes you want to the <VidazorVideo> component, and those attributes will then be captured and splatted onto the <video> element when the component is rendered.

<VidazorVideo @ref="video" class="foo bar" preload="auto">
    <source src="/sample.mp4" />
</VidazorVideo>

HTML ouput:

<video class="foo bar" preload="auto">
    <source src="/sample.mp4" />
</video>

Features:

Vidazor provides nearly all the methods, properties, and events that the JavaScript HTMLMediaElement object provides:

• Methods
• Properties
• Events

Methods:

The following methods can be called easily through the VidazorVideo object:

Vidazor Method	JavaScript Equivalent	Description
.Play()	.play()	Plays the video playback.
.Pause()	.pause()	Pauses the video playback.
.Load()	.load()	Reloads the video.
.CanPlayType(string)	.canPlayType(string)	Checks if the browser can play a video with the specified MIME media type.

Properties:

The following properties can be accessed easily through the VidazorVideo object:

Vidazor Property	Data Type	Get & Set	JavaScript Equivalent	Description
.Autoplay	bool	✔	.autoplay	Gets or sets a Boolean indicating whether playback automatically begins as soon as enough of the video is available to do so without interruption.
.Buffered	TimeRange[]	Read-only	.buffered	Gets an array of TimeRange objects representing the parts of the video that the browser has buffered (i.e. loaded).
.Controls	TimeRange[]	✔	.controls	Gets or sets a Boolean reflecting the "controls" HTML attribute, indicating whether browser's default UI controls are displayed for the video.
.CrossOrigin	string	✔	.crossorigin	Gets or sets the CORS settings of the video.
.CurrentSrc	string	Read-only	.currentSrc	Gets the source URL of the current video. Tip: To set the source URL, use the Src property.
.CurrentTime	double	✔	.currentTime	Gets or sets a double indicating the current playback time in seconds.
.DefaultMuted	bool	✔	.defaultMuted	Gets or sets a Boolean reflecting the "muted" HTML attribute, indicating whether the video is muted by default.
.DefaultPlaybackRate	double	✔	.defaultPlaybackRate	Gets or sets a double indicating the default playback rate (i.e. speed) for the video.
.Duration	double	Read-only	.duration	Gets a double indicating the total length of the video in seconds.
.Ended	bool	Read-only	.ended	Gets a Boolean indicating whether the video has ended.
.Loop	bool	✔	.loop	Gets or sets a Boolean reflecting the "loop" HTML attribute, indicating whether the video should start over again after it has ended.
.MediaGroup	string	✔	.mediaGroup	Gets or sets the name of the media group that the video belongs to.
.Muted	bool	✔	.muted	Gets or sets a Boolean indicating whether the video is muted or not.
.NetworkState	NetworkdState enum	Read-only	.networkState	Gets a NetworkState enum indicating the current state of fetching the media over the network.
.Paused	bool	Read-only	.paused	Gets a Boolean indicating whether the video is paused or not.
.PlaybackRate	double	✔	.playbackRate	Gets or sets a double indicating the current playback rate (i.e. speed) of the video. Can be a negative number, which indicates backward playback.
.Played	TimeRange[]	Read-only	.played	Gets an array of TimeRange objects representing the parts of the video that has been played by the user.
.Preload	Preload enum	✔	.preload	Gets or sets a Preload enum reflecting the "preload" HTML attribute, indicating what content should be loaded before the video is played by the user.
.ReadyState	ReadyState enum	Read-only	.readyState	Gets a ReadyState enum indicating the readiness state of the video (e.g. whether enough of the video has been downloaded to be able to play the video, etc.)
.Seekable	TimeRange[]	Read-only	.seekable	Gets an array of TimeRange objects representing the parts of the video that the user can seek to (i.e. move the playback position to).
.Seeking	bool	Read-only	.seeking	Gets a Boolean indicating whether the user is currently seeking in the video.
.Src	string	✔	.src	Gets or sets a URL reflecting the "src" HTML attribute, indicating the source URL of the video.
.Volume	double	✔	.volume	Gets or sets a double indicating the volume level, from 0.0 (silent) to 1.0 (loudest).

Events:

The following events can be hooked into through the <VidazorVideo> component. The type of all the events is the standard Blazor EventCallback struct:

Vidazor Event	JavaScript Equivalent	Description
OnAbort	abort	Fires when the loading of a video is aborted.
OnCanPlay	canplay	Fires when the browser can start playing the video, but estimates that it will have to stop for further buffering (i.e. loading).
OnCanPlayThrough	canplaythrough	Fires when the browser can play through the video without stopping for buffering (i.e. loading).
OnDurationChange	durationchange	Fires when the duration of the video is updated.
OnEmptied	emptied	Fires when the current playlist is empty.
OnEnded	ended	Fires when the video has finished, and no further data is available.
OnError	error	Fires when the video could not be loaded due to an error.
OnLoadedData	loadeddata	Fires when the browser has loaded the current frame of the video.
OnLoadedMetadata	loadedmetadata	Fires when the browser has loaded the video's metadata (e.g. length, etc.)
OnLoadStart	loadstart	Fires when the browser has started to load the video.
OnPause	pause	Fires when the video has been paused.
OnPlay	play	Fires when the video has been started or is no longer paused.
OnPlaying	playing	Fires when the video has been started to play after having been paused OR stopped for buffering (i.e. loading).
OnProgress	progress	Fires preiodically when the browser loads the video.
OnRateChanged	ratechanged	Fires when the playback rate (i.e. speed) of the video has changed.
OnSeeked	seeked	Fires when the user has finished moving/skipping to a new position in the video.
OnSeeking	seeking	Fires when the user begins moving/skipping to a new position in the video.
OnStalled	stalled	Fires when the browser is trying to get media data, but data is unexpectedly not forthcoming.
OnSuspend	suspend	Fires when the browser is intentionally not getting media data.
OnTimeUpdate	timeupdate	Fires when the current time has changed.
OnVolumeChange	volumechange	Fires when the volume level has been changed.
OnWaiting	waiting	Fires when the video stops because it needs to buffer (i.e. load) the next frame.

Copyright and License

This software is released under the MIT license.