Aktionsaufruf

Das Fenster Aktionsaufruf wird angezeigt, wenn das Video beendet wird, und alle interaktiven Muster, die mit dem betreffenden Video verknüpft sind, werden angezeigt.

Das Bedienfeld besteht aus einem Kopfzeilenbereich, der den Videotitel, eine Wiederholungsschaltfläche in der oberen rechten Ecke und tatsächliche interaktive Muster anzeigt, die als bildlauffähiges Raster angezeigt werden. Sie können das Bedienfeld mit dem Konfigurationsattribut callToActionRecap deaktivieren.

Der Aktionsbereich umfasst immer den gesamten verfügbaren Viewer-Bereich.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Hintergrundfarbe im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction

CSS-Eigenschaften der Hintergrundfarbe des Aktionsaufrufs

background-color

Hintergrundfarbe des Aktionsaufrufs.

Beispiel

So richten Sie einen Aktionsaufruf mit dunkelgrauem Hintergrund ein:

.s7interactivevideoviewer .s7calltoaction { 
    background-color: #222222; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Kopfzeile im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7header

CSS-Eigenschaften der Kopfzeile des Aktionsbereichs

background-color

Hintergrundfarbe der Kopfzeile.

height

Höhe der Kopfzeile.

border-bottom

Unterer Rand der Kopfzeile.

Beispiel

So richten Sie eine Kopfzeile ein, die 70 Pixel groß ist, einen dunkelgrauen Hintergrund hat und einen etwas helleren, grauen Rahmen von zwei Pixeln am unteren Rand aufweist:

.s7interactivevideoviewer .s7calltoaction .s7header { 
    height: 70px; 
    border-bottom: 2px solid #444444; 
    background-color: #222222; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild des Kopfzeilentitels im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

CSS-Eigenschaften des Kopfzeilentitels im Aktionsaufruf-Bedienfeld:

color

Textfarbe innerhalb des Banners.

Schriftgröße

Schriftgröße.

line-height

Zeilenhöhe.

Schriftfamilie

Schriftfamilie.

text-align

Ausrichtung des Texts im Banner.

padding-left

Linker Abstand.

padding-right

Rechter Abstand, um Platz für die Schaltfläche "Wiederholen"zu schaffen.

Beispiel

So richten Sie einen Videotitel mit einer Zeilenhöhe von 70 Pixel, einer Schriftgröße von 25 Pixel, einer weißen Farbe und einer Linksausrichtung ein:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title { 
    line-height: 70px; 
    font-size: 25px; 
    color: #ffffff; 
    text-align: left; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Schließen-Schaltfläche im Aktionsbereich:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

CSS-Eigenschaften der Schließen-Schaltfläche im Aktionsaufruf:

Anfang

Position oben in der Kopfzeile, einschließlich Abstand.

rechts

Position rechts neben der Kopfzeile, einschließlich Abstand.

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

background-image

Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf unterschiedliche Schaltflächenzustände angewendet werden können.

Beispiel

Um eine Wiederholungsschaltfläche von 28 x 28 Pixel einzurichten. Die Schaltfläche muss 20 Pixel vom oberen und vom rechten Rand der Kopfzeile entfernt positioniert werden. Außerdem muss für jeden der vier Schaltflächenstatus ein anderes Bild angezeigt werden. nimmt das Bildmaterial aus dem Sprite-Bild der Komponente:

.s7interactivevideoviewer .s7calltoaction .s7closebutton { 
 top: 20px; 
 right: 20px; 
 background-size: 336px; 
 width: 28px; 
 height: 28px;  
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] { 
 background-image: url(images/v2/PlayPauseButton_sprite.png); 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] { 
 background-position: -28px -1260px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] { 
 background-position: -0px -1260px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] { 
 background-position: -28px -1232px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] { 
 background-position: -0px -1232px; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Miniatur-Rasteransicht im Aktionsbereich:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

CSS-Eigenschaften der Miniatur-Rasteransicht im Aktionsbereich:

background-color

Hintergrundfarbe des Bereichs "Miniaturansichten".

Beispiel

So richten Sie einen Bereich für Miniaturansichten mit dunkelgrauem Hintergrund ein:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview { 
    background-color: #222222; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Thumb-Zelle im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

CSS-Eigenschaften der Thumb-Zelle im Aktionsaufruf-Bedienfeld:

margin

Größe des horizontalen und vertikalen Rands um jede Miniaturansicht.

Der tatsächliche horizontale Miniaturansichtabstand entspricht der Summe des linken und rechten Rands, der für .s7thumbcell festgelegt wurde. Dieselbe Regel gilt auch für den vertikalen Abstand.

Beispiel

So legen Sie einen horizontalen Abstand von 24 Pixel und einen vertikalen Abstand von 18 Pixel fest:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell { 
 margin-top: 9px; 
 margin-bottom: 9px; 
 margin-left: 12px; 
 margin-right: 12px; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Miniaturansicht im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7thumb

CSS-Eigenschaften der Miniaturansicht im Aktionsaufruf-Bedienfeld:

width

Breite der Miniaturansicht.

height

Höhe der Miniaturansicht.

rand

Rand der Miniaturansicht.

HINWEIS

Miniaturansichten unterstützen den Attributselektor state, der verwendet werden kann, um verschiedene Skins auf verschiedene Miniaturansichten anzuwenden. Insbesondere state="selected" entspricht der Miniaturansicht für das aktuell ausgewählte Bild; state="default" entspricht dem Rest der Miniaturansichten; state="over" wird beim Bewegen der Maus verwendet.

Beispiel

So richten Sie Miniaturansichten mit 94 x 100 Pixel ein:

.s7interactivevideoviewer .s7calltoaction .s7thumb { 
 width:94px; 
 height:100px; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Miniaturansichtsbeschriftung im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7label

CSS-Eigenschaften der Miniaturansichtsbeschriftung im Aktionsaufruf-Bedienfeld:

color

Textfarbe der Beschriftung.

text-align

Horizontale Ausrichtung des Titels.

Schriftfamilie

Schriftname.

Schriftgröße

Schriftfamilie.

Beispiel

Um Beschriftungen einzurichten, die eine weiße Farbe verwenden, sollten Sie eine zentrierte Ausrichtung von 15 Pixel und eine Arial®-Schriftart verwenden:

.s7interactivevideoviewer .s7calltoaction .s7label { 
 text-align: center; 
 color: #ffffff; 
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 15px; 
}

Wenn mehr Miniaturansichten vorhanden sind, als vertikal in die Ansicht passen, wird über Miniaturansichten ein vertikaler Bildlaufbalken auf der rechten Seite gerendert. Standardmäßig rendert das Fenster Aktionsaufruf einen winzigen vertikalen Balken ohne Daumen- und Bildlauftasten. Sie können die Symbolleiste jedoch anpassen, indem Sie die Viewer-CSS ändern.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild des Bildlaufleistenbereichs im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

CSS-Eigenschaften des Bildlaufleistenbereichs im Bereich "Aktionsaufruf":

width

Breite der Bildlaufleiste.

Anfang

Vertikaler Bildlaufleisten-Versatz vom oberen Rand des Bereichs "Miniaturansichten".

unten

Vertikaler Bildlaufleisten-Versatz vom unteren Rand des Bereichs "Miniaturansichten".

rechts

Horizontaler Bildlaufleisten-Versatz vom rechten Rand des Bereichs "Miniaturansichten".

Beispiel

So richten Sie eine Bildlaufleiste ein, die 22 Pixel breit ist und keine Ränder von oben, rechts oder unten im Bereich für Miniaturansichten aufweist:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar { 
 top:0px; 
 bottom:0px; 
 right:0px; 
 width:22px; 
}

Die Bildlaufleisten-Verfolgung ist der Bereich zwischen den Schaltflächen der oberen und unteren Bildlaufleiste. Die Komponente legt automatisch die Position und Höhe der Spur fest.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild des Bildlaufleisten-Tracks im Aktionsaufruf-Bereich:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS-Eigenschaften der Bildlaufspur-Leiste

width

Breite der Bildlaufspur-Leiste.

background-color

Hintergrundfarbe der Leiste.

Beispiel

So richten Sie eine Bildlaufleiste ein, die 22 Pixel breit und grau ist:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack { 
 width:22px; 
 background-color:#222222; 
}

Der Bildlaufleisten-Daumen bewegt sich innerhalb des Bildlaufverfolgungsbereichs vertikal. Seine vertikale Position wird vollständig durch die Komponentenlogik gesteuert. Die Daumenhöhe ändert sich jedoch nicht dynamisch in Abhängigkeit von der Menge des Inhalts.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Daumenhöhe und anderer Aspekte:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-Eigenschaften der Thumb-Höhe im Aktionsbereich:

width

Daumenbreite.

height

Daumenhöhe.

Auffüllung

Vertikaler Abstand zwischen dem oberen Ende der Spur.

padding-bottom

Vertikaler Abstand zwischen dem unteren Ende der Strecke.

border-radius

Rahmenradius.

background-color

Farbe des Daumens.

background-image

Bild, das für einen gegebenen Daumenstatus angezeigt wird.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Thumb unterstützt den Attributselektor state, mit dem verschiedene Skins auf die folgenden Faustregeln angewendet werden können: "up", "down", "over" und "disabled".

Beispiel

Um einen Bildlaufleisten-Daumen mit einer Größe von 6 x 167 Pixel einzurichten, hat drei Pixel, abgerundete Ecken und eine graue Farbe:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] { 
 width:6px; 
 height:167px; 
 background-color:#666666; 
 background-image:none; 
 border-radius:3px 3px 3px 3px; 
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Schaltflächen für den oberen und unteren Bildlauf:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton 
 
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Es ist nicht möglich, Bildlaufschaltflächen mithilfe der CSS-Eigenschaften oben, links, unten oder rechts zu positionieren. Die Viewer-Logik positioniert sie automatisch. Der Aktionsaufruf im interaktiven Video-Viewer verwendet diese Schaltflächen in der Bildlaufleiste nicht, daher wird ihre Größe im Standard-CSS auf 0 Pixel eingestellt.

CSS-Eigenschaften der Schaltflächen für den oberen und unteren Bildlauf im Aktionsaufruf:

width

Breite der Schaltfläche.

height

Höhe der Schaltfläche.

background-image

Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltflächen unterstützen den Attributselektor state, mit dem verschiedene Skins auf die folgenden Faustregeln angewendet werden können: "up", "down", "over" und "disabled".

Die QuickInfos für Schaltflächen können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen.

Beispiel

Deaktivieren Sie Bildlaufschaltflächen, indem Sie deren Größe auf 0 setzen und sie ausblenden:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton { 
 visibility: hidden; 
 width: 0px; 
 height: 0px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton { 
 visibility: hidden; 
 width: 0px; 
 height: 0px; 
}

Auf dieser Seite