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

Attributes

Name Description Type Default
Controls Gets or sets the controls visibility of the player. bool true
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
On this page