A Svelte 3 component-wrapper for Plyr.js
This component is released under a MIT license.
Examples: https://github.com/benwoodward/svelte-plyr/blob/master/src/App.svelte
Install the plugin + required dependencies:
npm install --save svelte-plyr plyr rollup-plugin-postcss node-sassAdd postcss to your rollup.config.js (or webpack.config.js)
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
postcss(),
]
};You may then begin to write a parent component that leverages the <Plyr> component:
components/YoutubePlyr.svelte
<script>
import { Plyr } from "svelte-plyr";
export let videoId;
function logEvent(event) {
console.log(event)
}
let player
</script>
<div class="youtube-plyr">
<button on:click={() => player.play()}>PLAY</button>
<button on:click={() => player.pause()}>PAUSE</button>
<Plyr on:timeupdate={logEvent} bind:player={player}>
<div class="plyr__video-embed">
<iframe
src="https://www.youtube.com/embed/{videoId}?iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
allowfullscreen allowtransparency allow="autoplay">
</iframe>
</div>
</Plyr>
</div>
<style>
.youtube-plyr {
max-width: 800px;
}
</style>The <Plyr> component is equipped with all of Plyr's options! Just pass them in as props. Example:
<Plyr autoplay=true muted=false />The <Plyr /> component can be configured to emit specified events. In this example, the logEvent function is called whenever the plyr.js emits the timeupdate logEvent event.
<script>
import { Plyr } from "svelte-plyr";
function logEvent(event) {
console.log(event)
}
let player
let eventsToEmit = ['timeupdate']
</script>
<Plyr on:timeupdate={logEvent} eventsToEmit={eventsToEmit} bind:player={player}>
// video embed code omitted
</Plyr>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent