Video player
Videos in ImageVault uses the Video js player and is included in all urls to videos.
Note
Previously we used Azure Media Player but since Azure dropped support for this player in July 2024, we switched over to video js.
Version
Since we bundle the Video player with ImageVault, what version that you use depends on the version of ImageVault.
| ImageVault version | Video player |
|---|---|
| 5.32 | Video js version 8.10.0 |
| 5.20 | Azure Media Player version 2.3.8 |
| 5.16 | Azure Media Player version 2.3.6 |
| 5.15 | Azure Media Player version 2.3.3 |
- Changelog for Video js can be found on the videojs github repository website.
- Changelog for Azure Video player can be found on the amp.azure.net website.
Skinning
To customize the appearance of the Video player, you can supply your own theme css file.
The css files are installed by adding them to the styles/override/embed folder.
To be able to select the skin we recommend using the skin querystring parameter to enable the skin.
Video js player
Available from ImageVault v5.32 Skinning for Video js is described on the video js website
Create a css per those definitions and place it in the aforementioned folder.
Then pass the css class name of the skin to the player by adding the skin parameter to the url.
https://imagevault.local/embed/publishedmedia/btttohz1vsm1wlml3cby/?skin=my-skin
Azure media player
Available from ImageVault v5.21
For instance, if your url to the video is
https://imagevault.local/embed/publishedmedia/btttohz1vsm1wlml3cby/
and you install the amp-flush skin
in the styles/override/embed folder, you enable the skin by adding skin=amp-flush-skin parameter as below.
https://imagevault.local/embed/publishedmedia/btttohz1vsm1wlml3cby/?skin=amp-flush-skin
The amp-flush skin is an alternative skin introduced in Azure Media Player v2.0 and can be used as an example for creating own skins.
Skinning and media renderer
When using the MediaRenderer concept you can set the skin parameter by code.
Observe that the Skin parameter will be passed along to the video player but the Class parameter will be used on the iframe itself.
var video = client.Load<Video>(11477)
.Resize(200, 200)
.Single();
var context = new RenderContext(video);
//customize render context to toggle video player features
context.Set(ContextKey.Controls, false);
context.Set(ContextKey.Autoplay);
context.Set(ContextKey.Muted);
//using skin will pass the skin argument along to the player
context.Set(ContextKey.Skin, "amp-flush-skin");
//using class will only affect the iframe hosting the player
context.Set(ContextKey.Class, "some-nice-iframe-skin");
var html = MediaRenderer.Render(context);
Console.WriteLine(html);