Für die Wiedergabe von Videos oder Audio-Inhalten werden verschiedene Arten von Playern verwendet. Die Komponente zeigt lediglich eine grafische Oberfläche und kann je nach Projekt beliebig mit Playern und Frameworks kombiniert werden.

Video player

Wiedergabe- und Pausensteuerungen sind eine Mindestanforderung. Weitere Bedienelemente können hinzugefügt werden, z.B. für Dauer, abgelaufene Zeit, Lautstärke, Displaygröße, Sprache oder Untertitel. Komplexe Steuerelemente können in Popovers platziert werden. Mehrere Steuerelemente eines Video Players können auf kleineren Viewports in einem Flyout-Menü untergebracht werden. Optional kann ein Replay-Button angezeigt werden nachdem das Video beendet ist, oder es wird eine Auswahl empfohlener Videos angezeigt.

Das Vorschaubild verfügt über eine flächendeckende Verdunkelung mit bis zu 50 % Schwarz für eine bessere Sichtbarkeit der Bedienelemente und des Loaders.

system-play-large system-play-small system-pause-large system-pause-small system-audio-on-large system-audio-on-small system-audio-off-large system-audio-off-small system-resize-increase-large system-resize-increase-small system-resize-decrease-large system-resize-decrease-small
HTML
<div class="abp-player abp-player--chrome">
	<video class="abp-video abp-video--fluid" preload="metadata" width="1920" height="1080" poster="https://dev.strichpunkt-design.de/audi/brand-platform-preview/assets/demo-content/intro/video-poster-1920x1080.jpg" data-setup="{}">
		<source src="https://dev.strichpunkt-design.de/audi/brand-platform-assets/videos/colours.mp4" type="video/mp4">
		<source src="https://dev.strichpunkt-design.de/audi/brand-platform-assets/videos/colours.webm" type="video/webm">
		<source src="https://dev.strichpunkt-design.de/audi/brand-platform-assets/videos/colours.ogv" type="video/ogg">
		<p class="abp-video__no-support">
			To view this video please enable JavaScript, and consider upgrading to a web browser that<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.
		</p>
	</video>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-play-large"><title>system-play-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path stroke-linejoin="round" d="M19.5 16.4l10.4 7-10.4 7.2z"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-play-small"><title>system-play-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path stroke-linejoin="round" d="M9.5 7.4l6 4.1-6 4.2z"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-pause-large"><title>system-pause-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M20.5 16v15m6-15v15"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-pause-small"><title>system-pause-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M9.5 7v9m4-9v9" stroke-linejoin="round"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-audio-on-large"><title>system-audio-on-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M14.5 20.5h4v6h-4zM18.5 26.5l4 2.9V17.6l-4 2.9M26 19.9c1.9 2 1.9 5.1 0 7.1M28.5 17.3s6.7 5.9 0 12.3"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-audio-on-small"><title>system-audio-on-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M5.5 9.5h3v4h-3zM8.5 13.5l3 1.9V7.5l-3 2M13.2 9.1s3 1.8 0 4.8M15.5 7.4s4.5 3.9 0 8.3"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-audio-off-large"><title>system-audio-off-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M14.5 20.5h4v6h-4v-6zM14 32.1L27.9 14 14 32.1zM18.5 26.5l4 2.9V17.6l-4 2.9M26 19.9c1.9 2 1.9 5.1 0 7.1M28.5 17.3s6.7 5.9 0 12.3"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-audio-off-small"><title>system-audio-off-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M5.5 9.5h3v4h-3v-4zm12.3-7L3.7 19.3 17.8 2.5zM8.5 13.5l3 1.9V7.5l-3 2M14.1 10c.5.8.8 2.2-.9 3.9M15.9 7.8c1 1.1 3.2 4.4-.4 7.8"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-resize-increase-large"><title>system-resize-increase-large</title><path d="M26 14.5h6.492V21M25 22l7.5-7.5L25 22zm-3 3l-7.5 7.5L22 25zm-7.5 1v6.5h6.492m2.508-31c-12.15 0-22 9.85-22 22s9.85 22 22 22 22-9.85 22-22a22 22 0 0 0-22-22z" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-resize-increase-small"><title>system-resize-increase-small</title><path d="M12 6.5h4.5V11m-4.132-.368L16.5 6.5l-4.132 4.132zm-1.736 1.736L6.5 16.5l4.132-4.132zM6.5 12v4.5H11m.5-16C5.425.5.5 5.425.5 11.5s4.925 11 11 11 11-4.925 11-11a11 11 0 0 0-11-11z" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-resize-decrease-large"><title>system-resize-decrease-large</title><path d="M31.992 21.5H25.5V15m0 6.5L33 14l-7.5 7.5zM14 33l7.5-7.5L14 33zm7.492-1v-6.5H15m8.5-24c-12.15 0-22 9.85-22 22s9.85 22 22 22 22-9.85 22-22a22 22 0 0 0-22-22z" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-resize-decrease-small"><title>system-resize-decrease-small</title><path d="M22.5 11.5c0 6.075-4.925 11-11 11s-11-4.925-11-11 4.925-11 11-11a11 11 0 0 1 11 11zM12.5 6v4.5H17m-4.5 0l4.132-4.132L12.5 10.5zm-2 2l-4.132 4.132L10.5 12.5zm-4.5 0h4.5V17" stroke="currentColor" fill="none"></path></symbol>
	</svg>
</div>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px 30%;
	}
	.abp-player {
		width: 100.1%;
	}
	.icon-sprite {
		width: 0;
		height: 0;
		visibility: hidden;
	}
</style>
HTML
<div class="abp-player abp-player--chromeless">
	<video class="abp-video abp-video--fluid" preload="metadata" width="1920" height="1080" poster="https://dev.strichpunkt-design.de/audi/brand-platform-preview/assets/demo-content/intro/video-poster-1920x1080.jpg" data-setup="{}">
	<source src="https://dev.strichpunkt-design.de/audi/brand-platform-assets/videos/colours.mp4" type="video/mp4">
	<source src="https://dev.strichpunkt-design.de/audi/brand-platform-assets/videos/colours.webm" type="video/webm">
	<source src="https://dev.strichpunkt-design.de/audi/brand-platform-assets/videos/colours.ogv" type="video/ogg">
		<p class="abp-video__no-support">
		To view this video please enable JavaScript, and consider upgrading to a web browser that<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.
		</p>
	</video>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-play-large"><title>play-large</title><path d="M13.5 9.3l20.9 14-20.9 14.4V9.3z" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-play-small"><title>play-small</title><path d="M6.5 3.3l12 8.1-12 8.3z" stroke="currentColor" fill="none" stroke-linejoin="round"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-pause-large"><title>pause-large</title><path d="M17.5 9v29m12-29v29" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-pause-small"><title>pause-small</title><path d="M7.5 3v17m8-17v17" stroke="currentColor" fill="none" stroke-linejoin="round"></path></symbol>
	</svg>
</div>
<style media="screen">
body {
  background-color: #f2f2f2;
  padding: 50px 30%;
}
.abp-player {
  width: 100.1%;
}
.icon-sprite {
  display: none;
}
</style>
HTML
<div class="aui-player aui-js-player is-complete" style="background-image:url('http://dev.strichpunkt-design.de/audi/animation_principles/images/content/section-index-slider-1.4205e277.jpg')">
  <div class="aui-player__video-container"></div>
  <div class="aui-player__overlay"></div>
  <button class="aui-player__large-button aui-js-player-play-toggle aui-button aui-js-response aui-button--icon aui-button--round aui-theme-light" type="button">
  <div class="aui-player__icon-play">
    <svg class="audiicon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-play-small" class="audiicon-small"></use>
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-play-large" class="audiicon-large"></use>
    </svg>
  </div>
  <div class="aui-player__icon-pause">
    <svg class="audiicon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-pause-small" class="audiicon-small"></use>
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-pause-large" class="audiicon-large"></use>
    </svg>
  </div>
  <div class="aui-player__icon-replay">
    <svg class="audiicon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-replay-small" class="audiicon-small"></use>
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-replay-large" class="audiicon-large"></use>
    </svg>
  </div>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-play-large"><title>system-play-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path stroke-linejoin="round" d="M19.5 16.4l10.4 7-10.4 7.2z"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-play-small"><title>system-play-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path stroke-linejoin="round" d="M9.5 7.4l6 4.1-6 4.2z"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-pause-large"><title>system-pause-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M20.5 16v15m6-15v15"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-pause-small"><title>system-pause-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M9.5 7v9m4-9v9" stroke-linejoin="round"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-audio-on-large"><title>system-audio-on-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M14.5 20.5h4v6h-4zM18.5 26.5l4 2.9V17.6l-4 2.9M26 19.9c1.9 2 1.9 5.1 0 7.1M28.5 17.3s6.7 5.9 0 12.3"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-audio-on-small"><title>system-audio-on-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M5.5 9.5h3v4h-3zM8.5 13.5l3 1.9V7.5l-3 2M13.2 9.1s3 1.8 0 4.8M15.5 7.4s4.5 3.9 0 8.3"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-audio-off-large"><title>system-audio-off-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M14.5 20.5h4v6h-4v-6zM14 32.1L27.9 14 14 32.1zM18.5 26.5l4 2.9V17.6l-4 2.9M26 19.9c1.9 2 1.9 5.1 0 7.1M28.5 17.3s6.7 5.9 0 12.3"></path><circle cx="23.5" cy="23.5" r="22"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-audio-off-small"><title>system-audio-off-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path d="M5.5 9.5h3v4h-3v-4zm12.3-7L3.7 19.3 17.8 2.5zM8.5 13.5l3 1.9V7.5l-3 2M14.1 10c.5.8.8 2.2-.9 3.9M15.9 7.8c1 1.1 3.2 4.4-.4 7.8"></path><circle cx="11.5" cy="11.5" r="11"></circle></g></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-resize-increase-large"><title>system-resize-increase-large</title><path d="M26 14.5h6.492V21M25 22l7.5-7.5L25 22zm-3 3l-7.5 7.5L22 25zm-7.5 1v6.5h6.492m2.508-31c-12.15 0-22 9.85-22 22s9.85 22 22 22 22-9.85 22-22a22 22 0 0 0-22-22z" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-resize-increase-small"><title>system-resize-increase-small</title><path d="M12 6.5h4.5V11m-4.132-.368L16.5 6.5l-4.132 4.132zm-1.736 1.736L6.5 16.5l4.132-4.132zM6.5 12v4.5H11m.5-16C5.425.5.5 5.425.5 11.5s4.925 11 11 11 11-4.925 11-11a11 11 0 0 0-11-11z" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="aui-icon-system-resize-decrease-large"><title>system-resize-decrease-large</title><path d="M31.992 21.5H25.5V15m0 6.5L33 14l-7.5 7.5zM14 33l7.5-7.5L14 33zm7.492-1v-6.5H15m8.5-24c-12.15 0-22 9.85-22 22s9.85 22 22 22 22-9.85 22-22a22 22 0 0 0-22-22z" stroke="currentColor" fill="none"></path></symbol>
		<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="aui-icon-system-resize-decrease-small"><title>system-resize-decrease-small</title><path d="M22.5 11.5c0 6.075-4.925 11-11 11s-11-4.925-11-11 4.925-11 11-11a11 11 0 0 1 11 11zM12.5 6v4.5H17m-4.5 0l4.132-4.132L12.5 10.5zm-2 2l-4.132 4.132L10.5 12.5zm-4.5 0h4.5V17" stroke="currentColor" fill="none"></path></symbol>
	</svg>
</div>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px 30%;
	}
	.abp-player {
		width: 100.1%;
	}
	.icon-sprite {
		width: 0;
		height: 0;
		visibility: hidden;
	}
</style>
HTML
<div class="aui-player aui-js-player is-complete" style="background-image:url('http://dev.strichpunkt-design.de/audi/animation_principles/images/content/section-index-slider-1.4205e277.jpg')">
  <div class="aui-player__video-container"></div>
  <div class="aui-player__overlay"></div>
  <div class="aui-player-related-container">
    <div class="aui-player-related-grid">
      <div class="aui-player-related-grid__cell">
        <a href="#" class="aui-player-related-content">
          <img class="aui-player-related-content__image" src="http://dev.strichpunkt-design.de/audi/gui-kit/assets/content/audi-video-1.jpg" alt="">
          <div class="aui-player-related-content__title">Video related content title.</div>
        </a>
      </div>
      <div class="aui-player-related-grid__cell">
        <button class="aui-player-related-content">
          <img class="aui-player-related-content__image" src="http://dev.strichpunkt-design.de/audi/gui-kit/assets/content/audi-video-2.jpg" alt="">
          <div class="aui-player-related-content__title">Pick your side. Then pick your vehicle.</div>
        </button>
      </div>
      <div class="aui-player-related-grid__cell">
        <div class="aui-player-related-content">
          <img class="aui-player-related-content__image" src="http://dev.strichpunkt-design.de/audi/gui-kit/assets/content/audi-video-3.jpg" alt="">
          <div class="aui-player-related-content__title">Heads and tails, you win.</div>
        </div>
      </div>
    </div>
    <button class="aui-player-related-container__replay aui-js-player-replay aui-button aui-js-response aui-button--icon aui-button--round aui-theme-light" type="button">
      <div class="aui-player__icon-replay">
        <svg class="audiicon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-replay-small" class="audiicon-small"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#aui-icon-replay-large" class="audiicon-large"></use>
        </svg>
      </div>
    </button>
  </div>
</div>

Audio Player

Audio Player werden platzsparend als schlichter, einfacher Player eingesetzt oder mit zusätzlichen Inhalten wie Bilder als Cards gruppiert. Ähnlich wie bei Video Playern können die Bedienelemente über einer schwarzen, transparenten Ebene auf einem Bild platziert werden. Alternativ können die Bedienelemente auch unter oder neben dem Bild positioniert werden. Optionale Bedienelemente zum Überspringen von Tracks, zur Lautstärkeregelung oder zum Herunterladen von Audiodateien können hinzugefügt werden. Das Layout von Audio Playern mit vielen Steuerelementen wird an kleinere Viewports angepasst.

Pink Floyd - Wish you were here
0:00
HTML
<div class="aui-audioplayer__chrome">
	<div class="aui-audioplayer__meta">
		<div class="aui-audioplayer__title">Pink Floyd - Wish you were here</div>
		<div class="aui-slider aui-js-slider aui-slider--single" data-min="0" data-max="100">
			<input type="hidden" class="aui-slider__hidden-field" value="0.00" />
		</div>
		<div class="aui-audioplayer__time">0:00</div>
	</div>
	<div class="aui-audioplayer__controls">
		<div class="aui-button-group aui-button-group--icons">
			<button class="aui-audioplayer__play aui-button aui-button--icon--large aui-js-response aui-button--icon aui-button--round" type="button">
				<div class="aui-audioplayer__icon-play">
					<svg class="audiicon">
						<use xlink:href="#aui-icon-system-play-small" class="audiicon-small"></use>
						<use xlink:href="#aui-icon-system-play-large" class="audiicon-large"></use>
					</svg>
				</div>
			</button>
		</div>
	</div>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 48 48" id="aui-icon-system-play-large" xmlns="http://www.w3.org/2000/svg"><title>system-play-large</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path stroke-linejoin="round" d="M19.5 16.4l10.4 7-10.4 7.2z"/><circle cx="23.5" cy="23.5" r="22"/></g></symbol><symbol viewBox="0 0 24 24" id="aui-icon-system-play-small" xmlns="http://www.w3.org/2000/svg"><title>system-play-small</title><g stroke="currentColor" fill="none" fill-rule="evenodd"><path stroke-linejoin="round" d="M9.5 7.4l6 4.1-6 4.2z"/><circle cx="11.5" cy="11.5" r="11"/></g></symbol></svg>
</div>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
	.icon-sprite {
		width: 0;
		height: 0;
		visibility: hidden;
	}
</style>
Audi UI Kit Sketch
Version 1.4 (Releases: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Anwendungsbeispiele

Don’ts

Das Vorschaubild sollte den Nutzer zum Anschauen des Videos einladen und ihm einen schnellen Eindruck zum Inhalt des Videos geben. Das Play Icon muss darauf deutlich sichtbar sein.