\r\n A video player component for playing a variety of URLs, including HLS and YouTube. It can be installed via NPM or as a standalone library.\r\n
\r\n\r\n### Usage\r\n\r\n#### Installation through NPM\r\n\r\n```bash\r\nnpm install @camtv/video-player --save\r\n```\r\n\r\n```js\r\nimport { RenderVideoCamTV, PlayerManager } from \"@camtv/video-player\";\r\n\r\nconst player = RenderVideoCamTV({\r\n\tid: \"my-container-id\",\r\n\tvideoURL: \"https://camtv.ams3.cdn.digitaloceanspaces.com/original/CID000016/video/VID0048A6\",\r\n\tposterURL: \"https://media.cam.tv/CID000016/video/VID0048A6/cover.jpg?t=1561462730\",\r\n\t// ...other options\r\n});\r\nplayer.on(\"init\", () => {\r\n\tconsole.log(\"initialized!\");\r\n});\r\n```\r\n\r\n#### Installation as Standalone\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### Configuration\r\n\r\nThe player can be configured with an object, as you can see below\r\n\r\n```js\r\nvar player = RenderVideoCamTV({\r\n\tid: \"\",\r\n\tvideoURL: \"\",\r\n\tposterURL: \"\",\r\n\tautoplay: false,\r\n\tmuted: false,\r\n\tpreload: \"auto\",\r\n\tsmall: false,\r\n\tbookmarks: false,\r\n\toverlays: false,\r\n\theaders: {\r\n\t\tAuthorization: \"Bearer xxxxx\",\r\n\t},\r\n\tfloatingControls: {\r\n\t\tplayToggle: true,\r\n\t\taudioToggle: {\r\n\t\t\trestart: false,\r\n\t\t\thtml: \"\",\r\n\t\t},\r\n\t},\r\n\tcontrols: {\r\n\t\tplayToggle: true,\r\n\t\tseekButtons: {\r\n\t\t\tforward: 30,\r\n\t\t\tback: 30,\r\n\t\t},\r\n\t\tvolumePanel: {\r\n\t\t\tinline: false,\r\n\t\t\tvertical: false,\r\n\t\t},\r\n\t\tcurrentTimeDisplay: true,\r\n\t\ttimeDivider: true,\r\n\t\tdurationDisplay: true,\r\n\t\trotation: false,\r\n\t\tvideoFit: true,\r\n\t\tsourceMenu: true,\r\n\t\tfullscreenToggle: true,\r\n\t\tpictureInPictureToggle: false,\r\n\t},\r\n});\r\n```\r\n\r\n#### Main video parameters\r\n\r\nThe first parameters defines all base options about video, such as autoplay or preload.\r\nYou can find all possible values in the table below:\r\n\r\n| Name | Props | Default | Description |\r\n| ------------------ | ----------- | ------- | ------------------------------------------------------------------------------------------ |\r\n| `id` | string | none | Container id |\r\n| `videoURL` | string | none | Video URL |\r\n| `posterURL` | string | none | Cover URL |\r\n| `autoplay` | bool/string | false | true, false, \"muted\" |\r\n| `muted` | bool | false | true, false |\r\n| `preload` | string | auto | \"auto\", \"metadata\", \"none\" |\r\n| `small` | bool | false | Small controls |\r\n| `bookmarks` | bool | false | Stores and shows bookmarks dialog which allow the resume of video |\r\n| `overlays` | bool/array | false | Overlays object. Includes specific controls' elements. To disable controlBar use false |\r\n| `headers` | object | null | Http request headers |\r\n| `floatingControls` | bool/object | object | Floating controls object. Includes specific controls that are not inside the controls' bar |\r\n| `controls` | bool/object | object | Controls object. Includes specific controls' elements. To disable controlBar use false |\r\n\r\n#### Floating controls\r\n\r\nThis options refers to all controls that are not inside the controls' bar, such as big play button or volume toggle button.\r\nSetting floatingControls to false will disable all floating buttons.\r\n\r\nTo enable fine tuning, you have to set an object. Here, you can find all the options:\r\n\r\n| Name | Props | Description |\r\n| ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------- |\r\n| `playToggle` | bool | Show play/pause big center button. |\r\n| `audioToggle` | bool/object | Show and configure mute/unmute top right button. Object includes restart (restarts video if unmuted), html (inner html content) |\r\n\r\n#### Controls' bar\r\n\r\nThe controls bar can be completely disabled or fine tuned through an object.\r\nTo disable controls' bar you have to set controls: false. This will display only play and mute overlay buttons on the video, but disables entirely the control bar.\r\n\r\nTo enable fine tuning for bar, you have to set an object in order to express wich component you want to show or hide.\r\nHere, you can find all the options:\r\n\r\n| Name | Props | Description |\r\n| ------------------------ | ----------- | -------------------------------------------------------------------------------- |\r\n| `playToggle` | bool | Show play/puase button. |\r\n| `seekButtons` | bool/object | Show and configure seek buttons. Object includes forward: seconds, back: seconds |\r\n| `volumePanel` | bool/object | Show and configure volume panel. |\r\n| `currentTimeDisplay` | bool | Show played time indicator |\r\n| `timeDivider` | bool | Show / time divider. |\r\n| `durationDisplay` | bool | Show video duration. |\r\n| `rotation` | bool | Show rotation button. |\r\n| `videoFit` | bool | Show video fit (cover/contain) button. |\r\n| `sourceMenu` | bool | Show video quality source selector if available by video stream (hls only). |\r\n| `fullscreenToggle` | bool | Show fullscreen button. |\r\n| `pictureInPictureToggle` | bool | Show picture-in-picure mode button. |\r\n\r\n#### Overlay elements\r\n\r\nThis options enables some overlay elements during playing, pause, timeupdate or any other event.\r\nThis options inherits from [videojs-overlay library](https://github.com/brightcove/videojs-overlay) and you could have a looke at that options.\r\nThis is basically an array of objects. You can set content (inner html), start/end time in seconds or event, div's classes and optionally alignment\r\n\r\n```js\r\noverlays: [\r\n\t{\r\n\t\tcontent: \"The video is playing\",\r\n\t\tstart: \"play\",\r\n\t\tend: \"pause\",\r\n\t\tclass: \"my-css-class overlayA\",\r\n\t\talign: \"bottom-right\",\r\n\t},\r\n\t{\r\n\t\tcontent: \"The video is paused\",\r\n\t\tstart: \"pause\",\r\n\t\tend: \"play\",\r\n\t\tclass: \"my-css-class overlayE\",\r\n\t\talign: \"top\",\r\n\t},\r\n\t{\r\n\t\tcontent: \"The video is ended\",\r\n\t\tstart: \"ended\",\r\n\t\tend: \"play\",\r\n\t\tclass: \"my-css-class overlayD\",\r\n\t\talign: \"bottom-right\",\r\n\t},\r\n\t{\r\n\t\tcontent: \"The video is 0-40\",\r\n\t\tstart: 0,\r\n\t\tend: 40,\r\n\t\tclass: \"my-css-class overlayB\",\r\n\t\talign: \"top-left\",\r\n\t},\r\n\t{\r\n\t\tcontent: \"The video is 15-30\",\r\n\t\tstart: 15,\r\n\t\tend: 30,\r\n\t\tclass: \"my-css-class overlayC\",\r\n\t\talign: \"bottom-left\",\r\n\t},\r\n];\r\n```\r\n\r\nHere, you can find all the options:\r\n\r\n| Name | Props | Default | Description |\r\n| --------- | ---------- | -------- | ---------------------------------- |\r\n| `content` | string | null | Html string content |\r\n| `start` | int/string | null | Seconds or events to show overlay. |\r\n| `end` | int/string | null | Seconds or events to hide overlay. |\r\n| `class` | string | null | Overlay div's class to merge |\r\n| `align` | string | top-left | Alignment of the balloon. |\r\n\r\nIf you want to simply show a full-player overlay, seta custom css class and overlay css properties.\r\n\r\n### Methods\r\n\r\nThis is a list of all public methods for player instance.\r\n\r\n| Method | Description |\r\n| ----------------------- | ------------------------------------------------------------------------------------------ |\r\n| `destroy()` | Removes player events and instance |\r\n| `addEvents()` | Add player events. This is done automatically on player init constructor |\r\n| `removeEvents()` | Removes player events |\r\n| `playVideo(seconds)` | Start playing video. If seconds is passed it start from the given seconds amount |\r\n| `pauseVideo()` | Pauses video |\r\n| `setMute(toMute)` | Set mute |\r\n| `getStateVideo()` | Retrurns the state of video in string format: not_ready, buffering, playing, paused, ended |\r\n| `getBufferPercent()` | Returns the buffering amount in percent |\r\n| `getVideoDuration()` | Returns video total duration if available, zero otherwise |\r\n| `getVideoCurrentTime()` | Returns the number of seconds that have been played. |\r\n| `getFullscreen()` | Returns if player is in fullscreen |\r\n| `setFullscreen(val)` | Enables or disables fullscreen mode |\r\n| `isInViewport()` | Returns if player is visible in viewport |\r\n\r\n### Events and errors handling\r\n\r\nYou can access player events like a jQuery \"on\" / \"off\" method. Replace \"eventname\" with one of the following names. Props means the elements passed through callback.\r\n\r\n```js\r\nplayer.on(\"eventname\", (evt, ...props) => {\r\n\t/*...do something*/\r\n});\r\n```\r\n\r\nHere, you can find all the events:\r\n\r\n| Name | Props | Description |\r\n| ----------- | -------------- | ------------------------------------------------------------------------------------------------- |\r\n| `init` | null | The player is initialized and the video is ready |\r\n| `ready` | null | Video is ready |\r\n| `play` | null | Video is playing |\r\n| `pause` | null | Video is in pause |\r\n| `ended` | null | Video is ended |\r\n| `buffering` | null | Video is buffering |\r\n| `tracking` | object | Tracking played chunks and effectively amount of time. Returns an object like { seconds, chunks } |\r\n| `error` | int: errorCode | There was an error. The events pass an error code. See below. |\r\n\r\n### Contributors\r\n\r\n- Thanks to [video.js](https://github.com/videojs/video.js) for base library\r\n- Thanks to [videojs-http-source-selector](https://github.com/jfujita/videojs-http-source-selector) for videojs http source selector component\r\n- Thanks to [videojs-seek-buttons](https://github.com/mister-ben/videojs-seek-buttons) for videojs seek buttons\r\n- Thanks to [videojs-overlay](https://github.com/brightcove/videojs-overlay) for videojs overlay library\r\n","readmeFilename":"README.md"}