Limbo
video-player 2.0.0
Install from the command line:
Learn more about npm packages
$ npm install @limbo-works/video-player@2.0.0
Install via package.json:
"@limbo-works/video-player": "2.0.0"
About this version
This Nuxt3 layer adds a VideoPlayer component (and internally used sub-components) with support for various video providers as they are used with the Skybrud.VideoPicker at Limbo.
yarn add @limbo-works/video-playerMake the component globally usable by extending the layer in nuxt.config.js.
export default defineNuxtConfig({
extends: [
'@limbo-works/video-player',
...
],
...
});Then you can use the VideoPlayer component in your project:
<!-- As written in Vue -->
<VideoPlayer :picker="dreamBrokerVideo" :embed-on-play="true" autoplay>
<template #overlay="{ overlay, service }">
<div
v-if="overlay.isVisible"
style="
width: 100%;
height: 100%;
background-color: gray;
cursor: pointer;
"
@click="
() => {
overlay.hide();
service.play();
}
"
>
Video<br />
Click to play
</div>
</template
>
</VideoPlayer>
<!-- As it may appear in the dom -->
<div class="c-video-player c-video-player--is-dreambroker">
<div class="c-video-player__overlay">
<div
style="width:100%;height:100%;background-color:gray;cursor:pointer;"
>
Video<br />
Click to play
</div>
</div>
</div>
<!-- ...and when clicked (not a real url) -->
<div class="c-video-player c-video-player--is-dreambroker">
<iframe
class="c-video-player-dream-broker c-video-player__player"
title="Juleudsmykning på rådhuset i Højby 2021"
allow="autoplay"
src="[https://dreambroker.com/channel/.../iframe/...?autoplay=true](https://dreambroker.com/channel/.../iframe/...?autoplay=true)"
></iframe>
</div>| Prop | Description | Default value | Data type |
|---|---|---|---|
| picker | The most important (and required!) property: an object containing all the video informationion needed. This should always contain a picker.provider.alias string value corresponding to one of the available providers, and a picker.details object (the contents of this differ between providers). It can also contain other things, like picker.embed and picker.html. More on the providers and requirements of these below. |
undefined | Object |
| playerAttrs | Attribute bindings to apply on the video player itself. Other attributes will be applied to the wrapper. Due to how Nuxt works, this also means you can add attributes like onClick to add event listeners directly on the video.As an added feature, you can also add a key named as one of the provider aliases with an object as a value. By doing so, the attrs in that object will only be applied if that's the alias in use. |
{} | Object |
| autoplay | A direct prop for adding the autoplay attribute (nothing different than putting it in playerAttrs, just easy access). | undefined | Boolean |
| muted | A direct prop for adding the muted attribute (nothing different than putting it in playerAttrs, just easy access). (Doesn't work in DreamBroker) | undefined | Boolean |
| loop | A direct prop for adding the loop attribute (nothing different than putting it in playerAttrs, just easy access). (Doesn't work in DreamBroker) | undefined | Boolean |
| controls | A direct prop for adding the controls attribute (nothing different than putting it in playerAttrs, just easy access). (Doesn't work in DreamBroker) | undefined | Boolean |
| embedOnPlay | If set to true the specific video service will not be embedded until a play is triggered. Great when using a custom overlay and play button. | false | Boolean |
| useHtml5Player | Ignore the provider in the picker and use html5 as provider instead. |
false | Boolean |
All providers require both picker.provider.alias and picker.details to function properly, and all providers will make use of the values in the picker.embed object if available, though not necessarily in the exact same way internally. Video thumbnails will be looked for at picker.details.thumbnails.
What else each provider needs specifically is listed below.
| Alias | Description |
|---|---|
| dreambroker | DreamBroker uses a direct iframe to insert the video, which should be located (as a string) on picker.details.embed. If a title is present at picker.details.title, it will be used for the iframe if none is there. |
| html5 | Html5 requires an array of sources at picker.details.files. Each source should contain src, type, width and height. Parameters can be added to all src-urls through the srcParameters prop.If picker.details.width and/or picker.details.height exist and the element's width and height is not otherwise set, these values will be used. Ultimate fallback value for either attribute is "100%". |
| vimeo | Vimeo also loads an iframe, which is to be found at picker.html or picker.embed.html. If a title is present at picker.details.title, it will be used for the iframe if none is there. Remember to add the package @vimeo/player for it to work. |
| youtube | YouTube also ultimately creates an iframe, but here we only need picker.details.id to set it up. |
There's one slot to use with the video player, which is named "overlay". This slot is passed a series of slot props:
| Prop | Description |
|---|---|
| overlay.hide([callback]) | Function to trigger the overlay to hide, with the possibility to add a callback for afterwards. |
| overlay.show([callback]) | Function to trigger the overlay to show, with the possibility to add a callback for afterwards. |
| overlay.isVisible | The current state of whether the overlay is visible (true) or not (false). |
| service.poster | The url for the computed poster for the video (if any). |
| service.thumbnails | An array of thumbnails for the video. |
| service.state | The last registered state of play for the video. |
| service.provider | The alias for the service provider in use. |
| service.play([callback]) | Function to start the video\*, with the possibility to add a callback for afterwards. |
| service.pause([callback]) | Function to pause the video\*, with the possibility to add a callback for afterwards. |
| service.stop([callback]) | Function to stop the video\*, with the possibility to add a callback for afterwards. |
| misc.isEmbedded | Whether the video player itself has been embedded on the site yet. |
| misc.embed() | Function to embed the video player on the site. |
| misc.unembed() | Function to remove the video player from the site again. |
\* The function only actually does anything for the video services that supports it, ie. html5, vimeo and YouTube. If embedOnPlay is set to true, the play function will still trigger this. The autoplay attribute can be set on DreamBroker, Html5, Vimeo and YouTube and will work, so autoplay, embedOnPlay and an overlay makes for a fine play-on-first-click.
More service providers could possible be added, like:
- Skyfish
- TwentyThree
- VideoTool (data-example can be found here at the time of writing)
- JwPlayer
But before that, further streamlining of the data output from backend would probably be in order.
