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>