This component requires importation of Apart's Javascript Lib!
This component requires importation of /custom/plyr/*.* files!
IMPORTANTAll data-* attributes set the initial configuration for embedded vimeo/youtube. For "data-type" you can choose between "vimeo" and "youtube". For "data-video-id" enter the video id from the related video link (e.g. https://www.youtube.com/watch?v=0TPdGICw-Fc).
When displaying custom videos you can add different sources and tracks. According the tracksyou need to add asingle-caption.
ImportantThe new version of Plyr does not support IE11 anymore and needs polyfills to work properly.
If you want to use the new player, add this to your headers between script tags:
https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent
<!-- Error rendering component -->
<!-- (unknown path)
TypeError: Cannot read properties of undefined (reading 'startsWith') -->
<!-- Template render error: (unknown path)
TypeError: Cannot read properties of undefined (reading 'startsWith')
at Object._prettifyError (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/nunjucks/src/lib.js:32:11)
at /home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/nunjucks/src/environment.js:464:19
at Template.root [as rootRenderFunc] (eval at _compile (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:66:3)
at Template.render (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/nunjucks/src/environment.js:454:10)
at Environment.renderString (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/nunjucks/src/environment.js:313:17)
at Environment.tryCatcher (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/bluebird/js/release/util.js:16:23)
at Environment.ret [as renderStringAsync] (eval at makeNodePromisifiedEval (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/bluebird/js/release/promisify.js:184:12), <anonymous>:14:23)
at NunjucksAdapter.render (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/@frctl/nunjucks/src/adapter.js:96:28)
at ComponentSource._renderVariant (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
at _renderVariant.next (<anonymous>)
at onFulfilled (/home/apart/fractal_projects/spuerkeess-design-system-production/node_modules/co/index.js:65:19) -->
<div class="{{ namespace }}videoPlayer{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" data-svg="{{ svg | path }}">
<div data-type="{{ type }}" data-video-id="{{ id }}"></div>
</div>
export default class Plyr2 {
constructor(){
this.attachPlayers();
}
attachPlayers(){
$('.js-videoPlayer').each((aIndex, aElement) => {
let captionsVisible = false;
let element = $(aElement);
if(element.hasClass('js-videoPlayerV3')){
return;
}
let players = plyr.setup(aElement, {
iconUrl: '/libs/plyr/plyr.svg',
debug: false,
captions: {
defaultActive: false
},
controls: [
'progress',
'play',
'fullscreen',
'captions'
],
storage: {
enabled: false
},
showPosterOnEnd: true,
autoplay: false
});
let player = players[0];
let footer = element.find('.player-footer');
let captions = element.find('.js-videoPlayer__captions');
let button = element.find('.player-footer .video-button');
let started = false;
if (this.isIE9orLess()) {
captions.hide();
}
player.on('playing', () => {
footer.hide();
element.addClass('-isStarted');
if (!started) {
started = true;
}
});
footer.on('click', () => {
footer.hide();
element.addClass('-isStarted');
player.play();
});
player.on('ended', () => {
// TODO: add ga event
// video.ended
});
captions.find('.js-videoPlayer__singleCaption').each((aIndex, aElement) => {
let singleCaption = $(aElement);
singleCaption.on('click', () => {
let index = parseInt(singleCaption.attr('data-index'), 10);
if ((captionsVisible === false && index >= 0) || (captionsVisible === true && index == -1)) {
player.toggleCaptions();
}
if (index >= 0) {
captionsVisible = true;
player.setCaptionIndex(index);
} else {
captionsVisible = false;
}
captions.find('.js-videoPlayer__singleCaption').removeClass('-isActive');
singleCaption.addClass('-isActive');
});
});
});
}
isIE9orLess(){
let browserIEInfo = navigator.userAgent.match(/MSIE (([0-9]+)(\.[0-9]+)?)/);
if (browserIEInfo === null || parseInt(browserIEInfo[2]) > 9){
return;
}
return parseInt(browserIEInfo[2]) <= 9;
}
}
export default class Plyr3 {
constructor() {
this.attachPlayers();
}
attachPlayers() {
$('.js-videoPlayerV3').each((aIndex, aElement) => {
let element = $(aElement);
let videoElement = element.find('VIDEO');
let embedElement = element.find('.plyr__video-embed');
let selectedElement = null;
if (videoElement.length > 0) {
selectedElement = videoElement;
}
if (embedElement.length > 0) {
selectedElement = embedElement;
}
if (selectedElement === null) {
console.error('bcee-player : No video element found');
return false;
}
let player = new window.Plyr(selectedElement, {
iconUrl: '../../libs/plyr3/plyr.svg',
debug: false,
controls: [
'play-large',
'play',
'progress',
//'current-time',
//'mute',
//'volume',
'captions',
'settings',
//'pip',
//'airplay',
'fullscreen'
],
settings: [
'captions',
'quality',
'speed',
//'loop'
],
storage: {
enabled: false
},
showPosterOnEnd: true,
autoplay: false
});
//debug
window.player = player;
let footer = element.find('.player-footer');
let started = false;
player.on('playing', () => {
footer.hide();
element.addClass('-isStarted');
if (!started) {
started = true;
}
});
footer.on('click', () => {
footer.hide();
element.addClass('-isStarted');
player.play();
});
player.on('ended', () => {
// TODO: add ga event
// video.ended
});
});
}
}
/* variables specific to current element */
.#{$namespace}videoPlayer {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("background", "sys-color-elevation-surface-flat");
border-radius: map-deep-get($token-radius-map, "16");
overflow: hidden;
position: relative;
z-index: z("zero");
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// videoPlayer__video
&__video {
// follows same logic as parent
width: 100%;
background-color: inherit;
display: block;
}
#{$self}__captions {
position: absolute;
top: map-deep-get($token-spacer-unit-map, "12");
right: map-deep-get($token-spacer-unit-map, "12");
display: none;
&:hover {
#{$self}__singleCaption {
display: block;
&.-isActive {
@include custom-prop-fallback("background", "sys-color-background-primary-100");
@include custom-prop-fallback("background", "sys-color-text-neutral-inverse");
cursor: pointer;
}
}
}
}
#{$self}__singleCaption {
display: none;
text-align: center;
cursor: pointer;
width: map-deep-get($token-sizes-unit-map, "120");
font-size: map-deep-get($design-tokens, "sys-font-size-helper-small");
@include custom-prop-fallback("background", "sys-color-background-neutral-100");
padding: map-deep-get($token-spacer-unit-map, "8");
&.-isActive {display: inline-block;}
&:hover {
@include custom-prop-fallback("background", "sys-color-background-primary-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
#{$self}__disclaimerWrapper {
position: absolute;
z-index: z("medium");
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: inherit;
@include custom-prop-fallback("background", "sys-color-background-primary-140");
@include custom-prop-fallback("color", "sys-color-text-primary-inverse");
overflow: hidden;
&::before,
&::after {
content: "";
position: absolute;
z-index: z("high");
left: 0;
width: 100%;
height: 3em;
pointer-events: none;
transition: opacity 0.15s linear;
}
&::before {
top: 0;
}
&::after {
bottom: 0;
}
&.-shadowBottom {
#{$self}__disclaimerScrollBtn {
opacity: 1;
visibility: visible;
}
}
&.-shadowTop::before {
opacity: 1;
@include gradient-directional(var(--sys-color-background-primary-140), rgba(0,0,0, var(--sys-effect-opacity-0)), 0, 100%, 180deg, false);
}
&.-shadowBottom::after {
opacity: 1;
@include gradient-directional(var(--sys-color-background-primary-140), rgba(0,0,0, var(--sys-effect-opacity-0)), 0, 100%, 0deg, false);
}
}
#{$self}__disclaimerWrapperInner {
position: absolute;
z-index: z("zero");
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
padding: map-deep-get($token-spacer-inset-map, "md");
scroll-behavior: smooth;
@include media-breakpoint-up("md") {
padding: map-deep-get($token-spacer-inset-map, "lg");
}
@include media-breakpoint-up("lg") {
padding: map-deep-get($token-spacer-inset-map, "xl")*1.75;
}
}
&__disclaimerScrollBtn {
position: absolute;
z-index: z("high")+1;
bottom: map-deep-get($token-spacer-inset-map, "md");
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s linear, visibility 0s 0.15s linear;
}
/* modifiers */
// videoPlayer -isStarted
&.-isStarted {
// follows same logic as base element
&:hover {
#{$self}__captions {
display: block;
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
// plyr vendor style overrides
.plyr__controls {
z-index: z("low");
BUTTON[data-plyr=play],
BUTTON[data-plyr=pause],
BUTTON[data-plyr=fullscreen],
BUTTON[data-plyr=captions] {
border-radius: 0;
&:hover {
@include custom-prop-fallback("background", "sys-color-background-primary-100");
}
}
input[type="range"]:active::-moz-range-thumb {@include custom-prop-fallback("background", "sys-color-background-primary-100");}
BUTTON[data-plyr=captions] {display: none;}
.plyr__progress {
input[type=range] {@include custom-prop-fallback("color", "sys-color-background-primary-100");}
.plyr__progress--seek {border-radius: 0;}
.plyr__progress--played {@include custom-prop-fallback("color", "sys-color-background-primary-100");}
.plyr__progress--buffer,
.plyr__progress--seek {}
}
.plyr__volume {
.plyr__volume--display {@include custom-prop-fallback("color", "sys-color-background-primary-100");}
}
.plyr__menu {
.plyr__control {
border-radius: 0;
&[aria-expanded=true],
&:hover {@include custom-prop-fallback("background", "sys-color-background-primary-100");}
}
}
}
.plyr__play-large {@include custom-prop-fallback("background-color", "sys-color-background-primary-100");}
.plyr__menu__container label.plyr__control input[type="radio"]:checked + span {
@include custom-prop-fallback("background", "sys-color-background-primary-100");
}
.plyr__menu__container label.plyr__control input[type="radio"]:focus + span {
box-shadow: none;
}
&.-posterImg {
position: relative;
#{$self}__fakePlayer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}