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

Parameters

Parameter	Description	Type	Default
`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`
`AutoPause`	Only allow one player playing at once.	`bool`	`true`
`AutoPlay`	Gets or sets the autoplay state of the player.	`bool`	`false`
`AvailableQualities`	Defines the list of available quality options. Defaults to [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240].	`int[]`	`null`
`ChildContent`	Specifies the content to be rendered inside this Video.Video.	`RenderFragment`	`null`
`ClickToPlay`	Click (or tap) of the video container will toggle play/pause.	`bool`	`true`
`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`	Defines the customized list of player controls.	`string[]`	`new string[] { VideoControlsType.PlayLarge, VideoControlsType.Play, VideoControlsType.Progress, VideoControlsType.CurrentTime, VideoControlsType.Mute, VideoControlsType.Volume, VideoControlsType.Captions, VideoControlsType.Settings, VideoControlsType.Pip, VideoControlsType.Airplay, VideoControlsType.Fullscreen }`
`CurrentTime`	Gets or sets the currentTime for the player.	`double`	`0`
`DefaultQuality`	Gets or sets the default quality for the player.	`int?`	`null`
`DisableContextMenu`	Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content.	`bool`	`true`
`DoubleClickToFullscreen`	If defined the player will go fullscreen when the video is double-clicked.	`bool`	`true`
`InvertTime`	Display the current time as a countdown rather than an incremental counter.	`bool`	`true`
`Muted`	Whether to start playback muted.	`bool`	`false`
`Poster`	Gets or sets the the URL of media poster or thumbnail image, generally before playback begins.	`string`
`ProtectionData`	Defines the manual structure of the protection data. If defined, it will override the usage of Video.Video.ProtectionServerUrl and Video.Video.ProtectionHttpRequestHeaders.	`object`	`null`
`ProtectionHttpRequestHeaders`	Defines the protection token for the http header that is sent to the server.	`string`
`ProtectionServerCertificateUrl`	Defines the server certificate url of the DRM protection (currently used only with FairPlay).	`string`
`ProtectionServerUrl`	Defines the server url of the DRM protection.	`string`
`ProtectionType`	Defines the encoding type used for the DRM protection. Possible values:`None`, `PlayReady`, `Widevine`, `FairPlay`	`VideoProtectionType`	`VideoProtectionType.None`
`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`
`ResetOnEnd`	Reset the playback to the start once playback is complete.	`bool`	`false`
`SeekTime`	The time, in seconds, to seek when a user hits fast forward or rewind.	`int`	`10`
`SettingsList`	If the default controls are used, you can specify which settings to show in the menu.	`VideoSettingsType[]`	`new VideoSettingsType[] { VideoSettingsType.Captions, VideoSettingsType.Quality, VideoSettingsType.Speed, VideoSettingsType.Loop }`
`Source`	Gets or sets the current source for the player.	`VideoSource`	`null`
`StreamingLibrary`	If defined the video will run in streaming mode. Possible values:`None`, `Dash`, `Hls`	`StreamingLibrary`	`StreamingLibrary.None`
`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`
`Volume`	A number, between 0 and 1, representing the initial volume of the player.	`double`	`1`

Events

Event	Description	Type
`CaptionsDisabled`	Sent when captions are disabled.	`Func<Task>`
`CaptionsEnabled`	Sent when captions are enabled.	`Func<Task>`
`ControlsHidden`	Sent when the controls are hidden.	`Func<Task>`
`ControlsShown`	Sent when the controls are shown.	`Func<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>`
`LanguageChange`	Sent when the caption language is changed.	`Func<string, Task>`
`Paused`	Sent when playback is paused.	`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>`
`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>`
`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>`
`QualityChanged`	The quality of playback has changed. If the quality argument is `null` it is considered that a default quality value was selected.	`Func<int?, Task>`
`RateChange`	Sent when the playback speed changes.	`Func<double, Task>`
`Ready`	Triggered when the instance is ready for API calls.	`Func<Task>`
`Seeked`	Sent when a seek operation completes.	`Func<double, Task>`
`Seeking`	Sent when a seek operation begins.	`Func<double, 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>`

Methods

Method	Description	Return	Parameters
`UpdateSource`	Updates the media source.	`Task`	`VideoSource source, VideoProtectionType protectionType, object protectionData, string protectionServerUrl, string protectionHttpRequestHeaders, string protectionServerCertificateUrl`
`Play`	Start playback.	`Task`
`Pause`	Pause playback.	`Task`
`TogglePlay`	Toggle playback, if no parameters are passed, it will toggle based on current status.	`Task`
`Stop`	Stop playback and reset to start.	`Task`
`Restart`	Restart playback.	`Task`
`Rewind`	Rewind playback by the specified seek time.	`Task`	`double seekTime`
`Forward`	Fast forward by the specified seek time. If no parameter is passed, the default seek time will be used.	`Task`	`double seekTime`
`IncreaseVolume`	Increase volume by the specified step. If no parameter is passed, the default step will be used.	`Task`	`double step`
`DecreaseVolume`	Decrease volume by the specified step. If no parameter is passed, the default step will be used.	`Task`	`double step`
`ToggleCaptions`	Toggle captions display.	`Task`
`EnterFullscreen`	Enter fullscreen. If fullscreen is not supported, a fallback "full window/viewport" is used instead.	`Task`
`ExitFullscreen`	Exit fullscreen.	`Task`
`ToggleFullscreen`	Toggle fullscreen.	`Task`
`Airplay`	Trigger the airplay dialog on supported devices.	`Task`
`ToggleControls`	Toggle the controls (video only). Takes optional truthy value to force it on/off.	`Task`
`ShowTextTrack`	Show the track from the list of tracks.	`Task`	`int textTrackId`
`HideTextTrack`	Hide the track from the list of tracks.	`Task`	`int textTrackId`
`AddTextTrack`	Adds a new text track to the list of tracks.	`Task`	`VideoTrack track`
`ClearTextTracks`	Clear all the text tracks.	`Task`
`SetPlaybackRate`	Dispatch an event to change the media playback rate.	`Task`	`double playbackRate`
`NotifyProgress`	Notifies the video component of the media progress so far. Should not be called directly by the user!	`Task`	`double buffered`
`NotifyPlaying`	Notifies the video component that the media is playing. Should not be called directly by the user!	`Task`
`NotifyPlay`	Notifies the video component that the media is started to play. Should not be called directly by the user!	`Task`
`NotifyPause`	Notifies the video component that the media is paused. Should not be called directly by the user!	`Task`
`NotifyTimeUpdate`	Notifies the video component how much time has passed since the media started playing. Should not be called directly by the user!	`Task`	`double currentTime`
`NotifyVolumeChange`	Notifies the video component that the volume has changed. Should not be called directly by the user!	`Task`	`double volume, bool muted`
`NotifySeeking`	Notifies the video component that the media is in seeking mode. Should not be called directly by the user!	`Task`	`double currentTime`
`NotifySeeked`	Notifies the video component that the media has ended seeking. Should not be called directly by the user!	`Task`	`double currentTime`
`NotifyRateChange`	Notifies the video component that the media speed rate has changed. Should not be called directly by the user!	`Task`	`double speed`
`NotifyEnded`	Notifies the video component that the media has ended. Should not be called directly by the user!	`Task`
`NotifyFullScreenEntered`	Notifies the video component that the video is entered the fullscreen mode. Should not be called directly by the user!	`Task`
`NotifyFullScreenExited`	Notifies the video component that the video is exited from fullscreen mode. Should not be called directly by the user!	`Task`
`NotifyCaptionsEnabled`	Notifies the video component that the video has enabled captions. Should not be called directly by the user!	`Task`
`NotifyCaptionsDisabled`	Notifies the video component that the video has disabled captions. Should not be called directly by the user!	`Task`
`NotifyLanguageChange`	Notifies the video component that the language has changed. Should not be called directly by the user!	`Task`	`string language`
`NotifyControlsHidden`	Notifies the video component that the controls are now hidded. Should not be called directly by the user!	`Task`
`NotifyControlsShown`	Notifies the video component that the controls are now visible. Should not be called directly by the user!	`Task`
`NotifyReady`	Notifies the video component that the player is now ready. Should not be called directly by the user!	`Task`
`NotifyQualityChange`	Notifies the video component that the quality has changed. Should not be called directly by the user!	`Task`	`int? quality`