wtc-autoplay-video 2.0.4

Autoplaying video class

src/wtc-autoplay-video.js

new AutoplayVideo()

The AutoplayVideo class expects an element (as all wtc-element-controllers do) and can take an optional options argument

Install

$ npm install wtc-autoplay-video

Usage

Import it in your project.

import AutoplayVideo from 'wtc-autoplay-video';

Add the markup.

<div class="autoplay-video">
  <video
    class="autoplay-video__video"
    autoplay
    playsinline
    muted
    loop
  >
    <source
      src="video.mp4"
      type="video/mp4"
    />
  </video>
  <!-- REQUIRED -->
  <img
    class="autoplay-video__fallback"
    src="fallback.png"
    alt="Fallback"
  />
  <!-- OPTIONAL -->
  <img
    class="autoplay-video__preloader"
    src="preloader.png"
    alt="Preloader"
  />
</div>

1. Using ExecuteControllers

If you are using [wtc-controller-element] just data-controller="AutoplayVideo" to your markup.

<div data-controller="AutoplayVideo" class="autoplay-video">
...

You can also instanciate explicitly:

ExecuteControllers.instanciate(document.getElementById('autoplay-video'), AutoplayVideo);

2. Default JS

With the default js version, you have the option to pass the options as an object, or use data-attributes, they both work.

let gallery = new AutoplayVideo(document.getElementById('autoplay-video'), {
  vpOn: 30
});

3. ES5 version

There's also an ES5 version to be used in browser anywhere. It's also really simple. Add you markup, then add the script:

<script src="dist/wtc-autoplay-video.es5.js"></script>

And for last, instanciate the videos:

<script>
  var videos = document.querySelectorAll('.autoplay-video');
  for (var i = 0; i < videos.length; i++) {
    new WTCAutoplayVideo.default(videos[i], { vpOn: 0 });
  }
</script>

Options

The options object is comprised of the following:

Name	HTML Attribute	Type	Description	Default
vpOn	data-vp-on	Number	The point at which the video should start playing after havign scrolled on the screen.	0
startAt	data-autoplay-video--start-at	Number	When the video starts playing again, start at this point, in seconds.	null
loopFrom	data-autoplay-video--loop-from	Number	When the video reaches this part, loop. If this isn't provided, the end of the video will be the loop point.	null
loopTo	data-autoplay-video--loop-to	Number	When the video loops, this is the point that it will start the loop from.	null

Class Documentation

Returns

• A new instance of the AutoplayVideo class

constructor(element, options)

Creates an instance of AutoplayVideo.

Options object is comprised of the following:

Name	Type	Description	Default
vpOn	Number	The point at which the video should start playing after havign scrolled on the screen.	0
startAt	Number	When the video starts playing again, start at this point, in seconds.	null
loopFrom	Number	When the video reaches this part, loop. If this isn't provided, the end of the video will be the loop point.	null
loopTo	Number	When the video loops, this is the point that it will start the loop from.	null

Parameters

Name	Type	Description
element	DOMElement
options	Object

Returns

• Void

init()

This method initialises the loaded video, sets up our ratios and attaches the relevant event listeners.

Returns

• Void

videoResize()

Resize the video to the size of its parent. This is normally called as a part of the window resize handler but can also be called programatically.

Returns

• Void

onPlay()

Responds to the videos playing method. This is responsible for setting the various state properties and starting up the run loop, if we need internal video looping.

Returns

• Void

onFrozen()

If for some reason the video fails to play, this method will be called. This adds an is-frozen class name to the element and sets videoPlaying property to false.

Returns

• Void

onPause()

When the video is paused this method is called. This adds the is-paused class name to the element, sets the hasStarted and videoPlaying properties to false.

Returns

• Void

onEnded()

This responds to the videos ended event and is responsible for looping the video only when a both a loopTo property is provided and a loopFrom property is not.

Returns

• Void

onLoopCheck(delta)

This method is a part of the run loop for the video. It will only run when the video is playing (on screen) and when both the loopTo and loopFrom properties are provided

Parameters

Name	Type	Description
delta	Number

Returns

• Void

pauseVideo()

This method pauses the video and is intended to be called programatically.

Returns

• Void

playVideo()

This method plays the video and is intended to be called programatically.

Returns

• Void

viewportAnimationCallback(topPercent)

This method overrides the parent class' viewportAnimationCallback method and provides play/pause functionality based on the viewport position. Basically this stops the video from playing unless it's on-screen.

Parameters

Name	Type	Description
topPercent	any

Returns

• Void

video()

(getter/setter) The video element itself

Returns

• HTMLElement

fallback()

(getter/setter) The fallback element

Returns

• HTMLElement

hasStarted()

(getter/setter) Whether the video has started playing

Returns

• boolean

initiated()

(getter/setter) Whether the instance has been initiated

Returns

• boolean

loopPeriod()

(getter/setter) Whether the instance is operating over a loop period

Returns

• boolean

videoPlaying()

(getter/setter) Whether the video has started playing. This is specifically for the determination of the run loop.

Returns

• boolean

ratio()

(getter/setter) The video's aspect ratio.

Returns

• number

startAt()

(getter) The place in the video to start at, in seconds. Set from the passed options.

Returns

• number

loopFrom()

(getter) The place in the video to loop from, in second. This should be greater than loopTo (not sure what happens if not ^_^ ). Set from the passed options.

Returns

• number

loopTo()

(getter) The place in the video to loop, in seconds. Set from the passed options

Returns

• number

Documentation generated with doxdox.