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