Aktionsaufruf

Das Aktionsaufruf-Bedienfeld wird nach dem Ende des Videos angezeigt und zeigt alle interaktiven Muster an, die mit dem betreffenden Video verknüpft sind.

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

Der Aktionsaufruf-Bereich nimmt immer den gesamten verfügbaren Viewer-Bereich ein.

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 Aussehen der Kopfzeile im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7header

CSS-Eigenschaften des Aktionsbedienfeld-Headers

background-color

Hintergrundfarbe der Kopfzeile.

height

Höhe der Kopfzeile.

border-bottom

Unterer Rand der Kopfzeile.

Beispiel

So richten Sie eine 70 Pixel große Kopfzeile mit dunkelgrauem Hintergrund und einen etwas helleren, zwei Pixel breiten Rand am unteren Rand ein:

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

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

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

CSS-Eigenschaften des Kopfzeilentitels im Aktionsaufruf-Bedienfeld:

color

Textfarbe im Banner.

font-size

Schriftgröße.

line-height

Zeilenhöhe.

font-family

Schriftfamilie.

text-align

Ausrichtung des Texts im Banner.

padding-left

Auffüllung links.

padding-right

Rechte Auffüllung, um Platz für die Schaltfläche "Wiedergabe"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 Schaltfläche zum Schließen im Aktionsaufruf-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

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

Anfang

Position oben in der Kopfzeile, einschließlich Auffüllung.

rechts

Position rechts neben der Kopfzeile, einschließlich Auffüllung.

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

background-image

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

background-position

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

Siehe CSS-Sprites .

HINWEIS

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

Beispiel

So richten Sie eine Wiederholungsschaltfläche von 28 x 28 Pixeln ein. 20 Pixel von oben und von der rechten Kante der Kopfzeile entfernt; zeigt für jeden der vier Schaltflächenzustände ein anderes Bild an; 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; 
}

Mit dem folgenden CSS-Klassenselektor wird das Erscheinungsbild der Ansicht des Miniaturraster im Aktionsaufruf-Bedienfeld gesteuert:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

CSS-Eigenschaften der Ansicht des Miniaturrasters im Aktionsaufruf-Bedienfeld:

background-color

Hintergrundfarbe des Miniaturansichtsbereichs.

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 Thumbcell im Aktionsaufruf-Bedienfeld:

margin

Größe des horizontalen und vertikalen Randes um die einzelnen Miniaturansichten.

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

Beispiel

So richten Sie einen horizontalen Abstand von 24 Pixel und einen vertikalen Abstand von 18 Pixeln ein:

.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

Die Miniaturansicht unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected" der Miniaturansicht für das derzeit 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 der Beschriftung.

font-family

Schriftname.

font-size

Schriftfamilie.

Beispiel

Um Beschriftungen mit einer weißen Farbe einzurichten, müssen Sie 15 Pixel zentriert ausrichten und eine Arial-Schrift 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 können, wird durch Miniaturansichten eine vertikale Bildlaufleiste auf der rechten Seite gerendert. Der Aktionsaufruf rendert standardmäßig einen winzigen vertikalen Balken ohne Daumen- und Bildlaufschaltflächen. Sie können die Leiste jedoch anpassen, indem Sie die CSS des Viewers ändern.

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

CSS-Eigenschaften des Bildlaufleistenbereichs im Aktionsaufruf-Bedienfeld:

width

Breite der Bildlaufleiste.

Anfang

Versatz der vertikalen Bildlaufleiste vom oberen Rand des Bereichs der Miniaturansichten.

unten

Versatz der vertikalen Bildlaufleiste vom unteren Rand des Bereichs der Miniaturansichten.

rechts

Die horizontale Bildlaufleiste wird vom rechten Rand des Bereichs der Miniaturansichten versetzt.

Beispiel

So richten Sie eine Bildlaufleiste ein, die 22 Pixel breit ist und keinen Rand von oben, rechts oder unten im Bereich der Miniaturansichten hat:

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

Die Bildlaufleistenspur ist der Bereich zwischen den Schaltflächen der oberen und unteren Bildlaufleiste. Die Komponente legt automatisch die Position und Höhe der Leiste fest.

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS-Eigenschaften der Bildlaufleiste

width

Breite der Bildlaufleiste.

background-color

Hintergrundfarbe der Leiste.

Beispiel

So richten Sie eine Bildlaufleistenspur mit einer Breite von 22 Pixel und einer grauen Farbe ein:

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

Der Bildlaufleistenminiaturbereich bewegt sich vertikal innerhalb des Bildlaufspurbereichs. Seine vertikale Position wird vollständig durch die Komponentenlogik gesteuert; Die Höhe des Daumens ändert sich jedoch nicht dynamisch je nach Inhaltsmenge.

Der folgende CSS-Klassenselektor steuert das Aussehen der Thumb-Höhe und anderer Aspekte:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-Eigenschaften der Miniaturhöhe im Aktionsaufruf-Bedienfeld:

width

Breite des Daumens.

height

Höhe des Daumens.

padding-top

Vertikale Umrandung zwischen der Oberkante der Spur.

padding-bottom

Vertikale Umrandung zwischen dem unteren Ende der Leiste.

border-radius

Rahmenradius.

background-color

Farbe des Daumens.

background-image

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

background-position

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

Siehe CSS-Sprites .

HINWEIS

Thumb unterstützt die Attributauswahl state, mit der verschiedene Skins auf die folgenden verschiedenen Thumb-Status angewendet werden können: "up", "down", "over" und "disabled".

Beispiel

Um ein Bildlaufleistenminiaturbild mit 6 x 167 Pixeln einzurichten, das drei abgerundete Pixel und eine graue Farbe hat:

.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 top, left, bottom oder right zu positionieren. Die Viewer-Logik positioniert sie automatisch. Im Bedienfeld "Aktionsaufruf"des interaktiven Video-Viewers werden diese Schaltflächen in der Bildlaufleiste nicht verwendet. Daher ist ihre Größe im Standard-CSS auf 0 Pixel eingestellt.

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

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 Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltflächen unterstützen die Attributauswahl state, mit der verschiedene Skins auf die folgenden verschiedenen Thumb-Status angewendet werden können: "up", "down", "over" und "disabled".

Die QuickInfos für Schaltflächen können lokalisiert werden. Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel

Deaktivieren Sie die Bildlaufschaltflächen, indem Sie ihre Größe auf 0 einstellen 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