bs-video

bs-video is a wrapper over the native video element that automatically tracks the interactions (play, pause, etc) and sends the corresponding logs through @benshi.ai/js-sdk, which must be installed in the main application

Usage

In the main file of the project, import the module:

import '@benshi.ai/bs-video'

There is also need to include the polyfills to use the component within a framework:

import { applyPolyfills, defineCustomElements } from '@benshi.ai/bs-video/loader';


applyPolyfills().then(() => {
    defineCustomElements(window);
});

Finally, insert the <bs-video> tag in your HTML template:

<bs-video 
    ref={videoRef}
    media-id='video_123'
    src='<path to video>' 
    width='500' 
    controls
    content-block={ContentBlock.ELearning}
/>

Note the reference to the element. The reason for that is the need of an initialization:

import {
    Navigation,
    ContentBlock,
} from '@benshi-ai/js-sdk'

videoRef.current.injectNavigation(Navigation)

API

Properties

| Property | Attribute | Description | Type | Default | | -------------- | --------------- | ---------------------------------------------------------------------------------------- | --------- | ----------- | | autoplay | autoplay | Inherited from native component | boolean | undefined | | contentBlock | content-block | Block where the video is inserted (i.e.: ContentBlock.ELearning, ContentBlock.ECommerce) | string | undefined | | controls | controls | Inherited from native component | boolean | undefined | | height | height | Inherited from native component | string | undefined | | loop | loop | Inherited from native component | boolean | undefined | | mediaId | media-id | Identifier for this video, as defined in the catalog | string | undefined | | metadata | metadata | Object with all the known properties of this media element | any | undefined | | poster | poster | Inherited from native component | string | undefined | | src | src | Inherited from native component | string | undefined | | width | width | Inherited from native component | string | undefined |

Methods

injectNavigation(navigationModule: any) => Promise<void>

Call this method is mandatory to initialize the logger, otherwiser the component will be unable to send logs automatically

Returns

Type: Promise<void>