@benshi.ai/bs-video NPM

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`