Blazorise Video Component

A Video component used to play a regular or streaming media.

Installation

NuGet

Install extension from NuGet.

Install-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="@("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")" />

Streaming

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" />

Widevine DRM instantiation

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

Events

Name	Description	Type
`Progress`	Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's buffered attribute.	`Func<double, Task>`
`Playing`	Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).	`Func<Task>`
`Played`	Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.	`Func<Task>`
`Paused`	Sent when playback is paused.	`Func<Task>`
`TimeUpdate`	The time indicated by the element's currentTime attribute has changed.	`Func<double, Task>`
`VolumeChange`	Sent when the audio volume changes (both when the volume is set and when the muted state is changed).	`Func<double, bool, Task>`
`Seeking`	Sent when a seek operation begins.	`Func<double, Task>`
`Seeked`	Sent when a seek operation completes.	`Func<double, Task>`
`RateChange`	Sent when the playback speed changes.	`Func<double, Task>`
`Ended`	Sent when playback completes. Note: This does not fire if autoplay is true.	`Func<Task>`
`FullScreenEntered`	Sent when the player enters fullscreen mode (either the proper fullscreen or full-window fallback for older browsers).	`Func<Task>`
`FullScreenExited`	Sent when the player exits fullscreen mode.	`Func<Task>`
`CaptionsEnabled`	Sent when captions are enabled.	`Func<Task>`
`CaptionsDisabled`	Sent when captions are disabled.	`Func<Task>`
`LanguageChange`	Sent when the caption language is changed.	`Func<string, Task>`
`ControlsHidden`	Sent when the controls are hidden.	`Func<Task>`
`ControlsShown`	Sent when the controls are shown.	`Func<Task>`
`Ready`	Triggered when the instance is ready for API calls.	`Func<Task>`
`QualityChanged`	The quality of playback has changed.	`Func<int?, Task>`

Methods

Name	Description	Return	Parameters
`Play`	Starts playback.	`Task`
`Pause`	Pauses playback.	`Task`
`TogglePlay`	Toggles playback based on current status if no parameters are passed.	`Task`
`Stop`	Stops playback and resets to the start.	`Task`
`Restart`	Restarts playback.	`Task`
`Rewind`	Rewinds playback by the specified seek time.	`Task`	`double seekTime`
`Forward`	Fast forwards playback by the specified seek time.	`Task`	`double seekTime`
`IncreaseVolume`	Increases volume by the specified step.	`Task`	`double step`
`DecreaseVolume`	Decreases volume by the specified step.	`Task`	`double step`
`ToggleCaptions`	Toggles captions display.	`Task`
`EnterFullscreen`	Enters fullscreen or falls back to full window/viewport if not supported.	`Task`
`ExitFullscreen`	Exits fullscreen.	`Task`
`ToggleFullscreen`	Toggles fullscreen mode.	`Task`
`Airplay`	Triggers the AirPlay dialog on supported devices.	`Task`
`ToggleControls`	Toggles the video controls, with optional parameter to force on/off.	`Task`
`ShowTextTrack`	Shows a text track by its index from the list of tracks.	`Task`	`int textTrackId`
`HideTextTrack`	Hides a text track by its index from the list of tracks.	`Task`	`int textTrackId`
`AddTextTrack`	Adds a new text track to the list of tracks.	`Task`	`VideoTrack track`
`ClearTextTracks`	Clears all text tracks from the list.	`Task`
`SetPlaybackRate`	Changes the media playback rate. A value of 1.0 represents normal speed, 0.5 is half speed, and 2.0 is double speed.	`Task`	`double playbackRate`

Attributes

Name	Description	Type	Default
`Controls`	Gets or sets the controls visibility of the player.	`bool`	`true`
`ControlsDelay`	The default amount of delay in milliseconds while media playback is progressing without user activity to indicate an idle state and hide controls.	`double`	`2000`
`ControlsList`	Gets or sets the list of controls that are rendered by the player. Possible list of values are contained in `VideoControlsType`.	`string[]`	`null`
`AutomaticallyHideControls`	Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.	`bool`	`false`
`AutoPlay`	Gets or sets the autoplay state of the player.	`bool`	`false`
`AutoPause`	Only allow one player playing at once.	`bool`	`true`
`Muted`	Whether to start playback muted.	`bool`	`false`
`Source`	Gets or sets the current source for the player.	`string`	`null`
`Poster`	Gets or sets the the URL of media poster or thumbnail image, generally before playback begins.	`string`	`null`
`Thumbnails`	Gets or sets the URL of thumbnails which will be used to display preview images when interacting with the time slider and in the chapters menu.	`string`	`null`
`StreamingLibrary`	If defined the video will run in streaming mode.	`StreamingLibrary`	`Html5`
`SeekTime`	The time, in seconds, to seek when a user hits fast forward or rewind.	`int`	`10`
`Volume`	A number, between 0 and 1, representing the initial volume of the player.	`double`	`1`
`ClickToPlay`	Click (or tap) of the video container will toggle play/pause.	`bool`	`true`
`DisableContextMenu`	Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content.	`bool`	`true`
`ResetOnEnd`	Reset the playback to the start once playback is complete.	`bool`	`false`
`Ratio`	Force an aspect ratio for all videos. The format is 'w:h' - e.g. '16:9' or '4:3'. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default.	`string`	`null`
`InvertTime`	Display the current time as a countdown rather than an incremental counter.	`bool`	`true`
`ProtectionType`	Defines the encoding type used for the DRM protection.	`VideoProtectionType`	`None`
`ProtectionData`	Defines the manual structure of the protection data. If defined, it will override the usage of `ProtectionServerUrl` and `ProtectionHttpRequestHeaders`.	`object`	`null`
`ProtectionServerUrl`	Defines the server url of the DRM protection.	`string`	`null`
`ProtectionServerCertificateUrl`	Defines the server certificate url of the DRM protection (currently used only with FairPlay).	`string`	`null`
`ProtectionHttpRequestHeaders`	Defines the protection token for the http header that is sent to the server. The request headers are optional; if left out, the server will not receive them.	`string`	`null`
`DefaultQuality`	Gets or sets the default quality for the player. Defaults to `576` if unspecified.	`int?`	`null`
`AvailableQualities`	Defines the list of available quality options. Defaults to `[4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]` if unspecified.	`string`	`null`
`SettingsList`	If the default controls are used, you can specify which settings to show in the menu.	`VideoSettingsType[]`	`Captions, Quality, Speed, Loop`
`DoubleClickToFullscreen`	If defined the player will go fullscreen when the video is double-clicked.	`bool`	`true`