This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Coffeekraken s-plyr-component

Simple webcomponent wrapper around the nice [plyr](https://github.com/sampotts/plyr) library

Table of content

1. Demo
2. Install
3. Get Started
4. Base props
5. API
6. Getters/Setters
7. Events
8. Javascript API
9. SASS API
10. Sugar Web Components Documentation
11. Browsers support
12. Code linting
13. Contribute
14. Who are Coffeekraken?
15. Licence

Install

npm install coffeekraken-s-plyr-component --save

Get Started

First, import the component into your javascript file like so:

import SPlyrComponent from "coffeekraken-s-plyr-component"

Then simply use it inside your html like so:

<!-- HTML5 video -->
<s-plyr
  src="my-cool-video.mp4"
  poster="my-cool-poster.jpg"
  autoplay
  muted
></s-plyr>
<!-- Youtube -->
<s-plyr
  src="https://www.youtube.com/watch?v=8kVI621fZug"
  autoplay
  muted
></s-plyr>
<!-- Vimeo -->
<s-plyr src="https://player.vimeo.com/video/127200914" autoplay muted></s-plyr>

To load the CSS you have two choices. You can:

1. Set the loadCss prop to true.
   • This will load the standard plyr css from a CDN for your
2. Generate the css using sass by yourself like so:

@import "node_modules/coffeekraken-s-plyr-component/index";
@include s-plyr-classes($colors: default primary);

Then you will be able to set a color on your video player like so:

<!-- default color -->
<s-plyr src="..."
  ><s-plyr>
    <!-- primary color -->
    <s-plyr src="..." color="primary"></s-plyr></s-plyr
></s-plyr>

Base props

This webcomponent support all the options that plyr support. Their's a lot so here the most common ones:

src

• {String} - null Required

Specify the video source. Can be a local video file, a youtube or a vimeo url

loadCss

• {Boolean} - false

Specify if want to load the css of plyr from a cdn or not

poster

• {String} - null

Specify the poster image to use. This is usable only with local video. Youtube and vimeo will provide their own poster picture

controls

• {Array} - ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']

Specify the controls you want for your player

autoplay

• {Boolean} - false

Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers.

volume

• {Number} - 1

A number, between 0 and 1, representing the initial volume of the player.

muted

• {Boolean} - false

Whether to start playback muted.

ratio

• {String} - 16:9

The aspect ratio you want to use for embedded players.

loop

• {Boolean} - `false``

Whether to loop the current video.

API

The webcomponent expose some function for you to use. Here's the list:

• play
• pause
• togglePlay(toggle)
• stop
• restart
• rewind(seetTime)
• forward(seekTime)
• increaseVolume(step)
• decreaseVolume(step)
• toggleCaptions(toggle)
• enterFullscreen
• exitFullscreen
• toggleFullscreen
• airplay
• toggleControls(toggle)
• on(event, callback): Listen to one of these events
• once(event, callback)
• off(event, callback)
• support(type)
• destroy

Getters / Setters

The webcomponent proxies all these getters/setters from the plyr instance:

• isHTML5: getter
• isEmbed: getter
• playing: getter
• paused: getter
• stopped: getter
• ended: getter
• buffered: getter
• currentTime: getter/setter
• seeking: getter
• duration: getter
• volume: getter/setter
• muted: getter/setter
• hasAudio: getter
• speed: getter/setter
• quality: getter/setter
• loop: getter/setter
• source: getter/setter
• poster: getter/setter
• autoplay: getter/setter
• currentTrack: getter/setter
• language: getter/setter
• fullscreenActive: getter
• fullscreenEnabled: getter
• pip: getter/setter

Events

All the plyr events are proxied. This mean that you can listen to them directly on the s-plyr component using your plain old addEventListener. Here's an example:

const $myPlyr = document.querySelector("s-plyr")
$myPlyr.addEventListener("ended", e => {
  // do something on video end
})

Browsers support

IE / Edge	Firefox	Chrome	Safari
IE11+	last 2 versions	last 2 versions	last 2 versions

As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.

The webcomponent API (custom elements, shadowDOM, etc...) is not supported in some older browsers like IE10, etc... In order to make them work, you will need to integrate the corresponding polyfill.

Code linting

This package uses some code linting rules. Here's the list:

1. StandardJS for javascript files
2. Stylelint with stylelint-config-standard for scss files

Your commits will not been accepted if the code style is not respected!

Contribute

This is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:

1. Share the love ❤️
2. Declare issues
3. Fix issues
4. Add features
5. Build web component

Who are Coffeekraken

We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.

More on who we are

License

The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...