Video component

A streaming video component.

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 example

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

Attributes

Name Description Type Default
Controls Gets or sets the controls visibility of the player. bool true
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 current poster image for the player. 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
ProtectionHttpRequestHeaders Defines the protection token for the http header that is sent to the server. string null