Video Player: Default

NOTICE

This component requires importation of Apart's Javascript Lib!

This component requires importation of /custom/plyr/*.* files!

IMPORTANT

All 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.

Important

The 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>
  • Handle: @snet-video-player--default
  • Preview:
  • Filesystem Path: components/snet/molecules/video-player/video-player.njk
  • Content:
    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;
    
    	}
    	
    }
  • URL: /components/raw/snet-video-player/Plyr2.js
  • Filesystem Path: components/snet/molecules/video-player/Plyr2.js
  • Size: 2.1 KB
  • Content:
    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
    			});
    		});
    
    	}
    
    }
  • URL: /components/raw/snet-video-player/Plyr3.js
  • Filesystem Path: components/snet/molecules/video-player/Plyr3.js
  • Size: 1.6 KB
  • Content:
    /* 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($token-font-size-map, "body", "xs");
    		@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 {
    	}
    
    }
  • URL: /components/raw/snet-video-player/_video-player.scss
  • Filesystem Path: components/snet/molecules/video-player/_video-player.scss
  • Size: 5.8 KB