# @benshi.ai/bs-video

> Stencil Component Starter

Latest version **0.1.0** (published 2022-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @benshi.ai/bs-video
pnpm add @benshi.ai/bs-video
yarn add @benshi.ai/bs-video
bun add @benshi.ai/bs-video
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-08-01 |
| First published | 2022-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 308.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | benshi.ai |
| Maintainers | moizh, aecostas, sergiobenshi, sergiocarracedo, dxe.tang |

## Links

- npm: https://www.npmjs.com/package/@benshi.ai/bs-video
- Homepage: https://docs.benshi.ai/
- npm.io page: https://npm.io/package/@benshi.ai/bs-video

## Dependencies (1)

- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.13.0

## Recent versions

- 0.1.0 (latest) — 2022-08-01
- 0.0.7 — 2022-07-29

## README

# 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

<!-- Auto Generated Below -->


## 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>`

---
_Source: https://npm.io/package/@benshi.ai/bs-video · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._