Wtc-controller-video NPM

wtc-controller-video

A class to handle the different browser support for videos, specially fullscreen ambient videos.

Install

$ npm install wtc-controller-video --save

Usage

Example

You can find an example inside dist/demo.

Using ExecuteControllers

Please refer to the ExecuteController docs.

Add the CSS and JS

  <!DOCTYPE html>
  <html>
  <head>
    <title>Demo</title>
    <link rel="stylesheet" href="wtc-controller-video.css">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
  </html>

Instanciate the class on an element

import Video from 'wtc-controller-video'

let myFullsreenVideo = new Video(document.querySelector('video')

Options

You can use data attributes or pass the options when instanciating. PS: When using ExecuteControllers you MUST use data attributes, also, the onLoad hook is not available.

fullscreen: Boolean. Default = false
Sets the video to be fullscreen

fallback: String. Default = poster or data-fallback attributes
Sets the fallback image, this will be shown when there's an error with the video.

onLoad: Function. Default = null
Fires when the video loads.

wtc

wtc-controller-element wtc-utility-helpers

@everything-registry/sub-chunk-3168

0.1.1

7 years ago

0.1.0

7 years ago