Toolbar-Menu
 
Sie sind hier: Start Komponenten
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Pictures
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

5.15 Tonaufnahmen

Medien dienen der Visualisierung und können im Inhaltsbereich eingesetzt werden. Die verknüpften Dateien der Videos und Tonaufnahmen sollen erst zum Zeitpunkt der Wiedergabe geladen werden. Auf die Urheberrechtsangabe ist zu achten. Die Steuerungselemente von Wiedergabe-Plugins sollen in der Grundfarbe gestaltet sein. Hierbei ist auf den Kontrast zum Inhalt zu achten. Alternativ sind diese in DUNKELGRAU oder WEIß auszuführen.

„Holger Klein/Helmholtz-Gemeinschaft“ cc-by-3.0



  • Quelltext
    Quelltext kopieren 
    <audio id="audio1" data-lang="de" data-show-now-playing="false" data-able-player preload="metadata">

    <!-- audio files -->
    <source src="style.brandenburg.de/media/exampleAudio/potsdam-podcast.mp3">

    <!-- optional text track file -->
    <track kind="descriptions" src="text-track-file.vtt" srclang="de"/>
    <track kind="captions" src="text-track-file.vtt" srclang="de"/>

    <!-- fallback for browsers that don't support the video element -->
    <div>
        <a href="style.brandenburg.de/media/exampleAudio/potsdam-podcast.mp3">
            Link zum direkten Download der Audiodatei.
        </a>
    </div>
</audio>
<p class="bb-image-caption-left">Das ist eine Audio-Datei zum Abspielen </p>

  • Benötigtes Javascript

     
    <script type="text/javascript" src="style.brandenburg.de/js/vendor/jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/vendor/jquery.mobile-events.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/vendor/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/vendor/ableplayer.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/app.js"></script>

  • Benötigtes CSS

     
    <link type="text/css" rel="stylesheet" href="style.brandenburg.de/css/vendors/ableplayer.css"/>
Aufbau

keine Beschränkungen

Spezifische Anforderungen
  • Die Einbindung erfolgt mit validem HTML5.
  • Es darf kein Adobe-Flash verwendet werden.
Barrierefreiheit

Medien sollten grundsätzlich barrierefrei angeboten werden. Wenn technisch möglich, sollten alternative Videos mit Untertiteln angeboten sowie alternative Beschreibungstexte oder Meta-Informationen verfasst werden, die mit Hilfe von Screen-Readern vorgelesen werden können.

Aktionsverhalten
  • Die Standardaktionen für Multimedia-Dateien werden unterstützt. Videos und Tonaufnahmen müssen explizit durch den Betrachter gestartet werden. Es erfolgt kein automatisches Abspielen bei Seitenaufruf.
  • Jedes Medium kann stets angehalten werden.
Responsive Design

Medien skalieren auf volle Breite in dem zur Verfügung stehenden Viewport.

Weiteres

Für weitere Informationen und Dokumentation dieser Komponente besuchen Sie bitte folgende Website:
https://ableplayer.github.io/ableplayer/

Seite drucken