Toolbar-Menu
 
Sie sind hier: Start Komponenten
Theme "lightTurquoise" erfolgreich aktiviert
Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:


<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/%VERSION_ALIAS%/css/app.css" -->

<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/%VERSION_ALIAS%/css/themes/lightTurquoise.css"/>
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.16 Videos

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.

  • Quelltext
    Quelltext kopieren 
    <video id="video1" data-lang="de" data-able-player preload="none"
       poster="/media/exampleVideo/Maerker_kurz/maerker_kurz.png">

    <!-- video files -->
    <source src="/media/exampleVideo/Maerker_kurz/small/Maerker_kurz.mp4">
    <source src="/media/exampleVideo/Maerker_kurz/small/Maerker_kurz.ogv">
    <source src="/media/exampleVideo/Maerker_kurz/Maerker_kurz.ogv">
    <source src="/media/exampleVideo/Maerker_kurz/Maerker_kurz.webm">

    <!-- text track file -->
    <track kind="captions" label="German captions"
           src="/media/exampleCaption/SprachdateiMaerker.vtt" srclang="de" />

    <!-- fallback for browsers that don't support the video element -->
    <div>
        <a href="/media/exampleVideo/Maerker_kurz/Maerker_kurz.mp4">
            Link zum direkten Download des Videos.
        </a>
    </div>
</video>

  • Benötigtes Javascript

     
    <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/3jquery.mobile-events.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/ableplayer.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/finalApp.js"></script>

  • Benötigtes CSS

     
    <link type="text/css" rel="stylesheet" href="style.brandenburg.de/2_3/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