JWP Integration

Intro

This document outlines the integration of JWP within the project, including the Vue component (SettingJwpPlayerSelector.client.vue), the Twig template, the jwpIframe filter, and the required parameters.

Example Template Usage:

<wf-setting-element v-if="video.id" name="playerID">
    <setting-jwp-player-selector
        :commit-setting="commitSetting"
        :value="settings.playerID"
    ></setting-jwp-player-selector>
</wf-setting-element>
<iframe
        loading="lazy"
        frameborder="0"
        :src="filters.jwpIframe(video.media_id, settings.playerID)"
        scrolling="no">
</iframe>

NOTE:

• The setting-jwp-player-selector component allows the editor to select the JWP player from the list of configured players (retrieved through the API from JWP)
• The jwpIframe filter generate the url with source and player Id. By default, it takes the wf_cms.video.jwplayer_playerId player. See parameters

Read details about using the jwpIframe filter here.

parameters.yml

IMPORTANT: you have to add these parameters in your project

jw_platform_key_id: 'XXX'
jw_platform_secret_access_key: 'XXX'
wf_cms_base_admin.video.jwplatform.urlBase: 'https://cdn.jwplayer.com/v2/sites/site_id/media/media_id/playback.json'
wf_cms.video.jwplayer_playerId: 'XXX'