coffeekraken-s-plyr-component v1.0.3
Coffeekraken s-plyr-component
Table of content
- Demo
- Install
- Get Started
- Base props
- API
- Getters/Setters
- Events
- Javascript API
- SASS API
- Sugar Web Components Documentation
- Browsers support
- Code linting
- Contribute
- Who are Coffeekraken?
- 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:
- Set the
loadCss
prop totrue
.- This will load the standard plyr css from a CDN for your
- 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 eventsonce(event, callback)
off(event, callback)
support(type)
destroy
Getters / Setters
The webcomponent proxies all these getters/setters from the plyr instance:
isHTML5
: getterisEmbed
: getterplaying
: getterpaused
: getterstopped
: getterended
: getterbuffered
: gettercurrentTime
: getter/setterseeking
: getterduration
: gettervolume
: getter/settermuted
: getter/setterhasAudio
: getterspeed
: getter/setterquality
: getter/setterloop
: getter/settersource
: getter/setterposter
: getter/setterautoplay
: getter/settercurrentTrack
: getter/setterlanguage
: getter/setterfullscreenActive
: getterfullscreenEnabled
: getterpip
: 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:
- StandardJS for javascript files
- 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:
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...