npm install media-hub-video-player --saveImport the styles
import 'media-hub-video-player/dist/style.css'
Create a target element
<div class="smh-player"></div>Use one of the following approaches
const player = new MediaHubPlayer(document.querySelector('smh-player') as HTMLElement,
{
poster: 'https://picsum.photos/800/600',
asset: { eid: '094569b6f59ad0de' }
})This will fetch asset streaming links and meta data from the Media Hub API.
Note: Verify CSP before using this approach
If communication is blocked by CSP, please provide sufficcent parameters for playing and tracking the usage:
const player = new MediaHubPlayer(document.getElementById('third') as HTMLElement, {
poster: 'https://picsum.photos/800/600',
asset: {
mpd_url: 'https://video.skfmediahub.skf.com/.../input-0901d19680c9f6da.ism/manifest(format=mpd-time-csf)',
m3u8_url: 'https://video.skfmediahub.skf.com/.../input-0901d19680c9f6da.ism/manifest(format=m3u8-aapl)',
assetType: 'Training module',
eid: '0901d19680c9f6da',
languages: ['en-US'],
publishingUnit: 'EMEA sales',
title: 'SKF WCL Instruction Video'
}
})const player = new MediaHubPlayer(document.querySelector('smh-player') as HTMLElement,
{
poster: 'https://picsum.photos/800/600',
youtubeId: 'yCRY2Ny2jU'
})