Edge Animate unterstützt native HTML5-Videos, wodurch die Verwendung eigener Videoclips in den Kompositionen vereinfacht wird. Sie können die Wiedergabe von Videos mit grundlegenden Wiedergabeaktionen und JavaScript steuern. Sie können auch Videoelemente an Berührungs- und Mausereignisse binden und so eine eindrucksvolle interaktive Anwendung schaffen. 

Die Wiedergabefunktionen für Videos werden im HTML-DOM unterstützt. Das heißt, die Videos können auf jedem modernen Desktop- oder Gerätebrowser abgespielt werden, ohne dass ein Plug-In erforderlich ist.

 

Sie können MP4- und OGV-Dateien in Edge Animate importieren.

Um eine optimale Kompatibilität zwischen verschiedenen Browsern zu erzielen, fügen Sie Videoelemente als MP4- und OGG-Ressourcen in Ihr Projekt ein. Eine ausführliche Beschreibung der unterstützten Videotypen finden Sie unter Media formats supported by the HTML audio and video elements (Von den HTML-Elementen „audio“ und „video“ unterstützte Medienformate).

Hinzufügen von Videos zu Kompositionen

Führen Sie einen der folgenden Schritte aus:

  • Wählen Sie „Datei“ > „Importieren“ oder ziehen Sie die Videodateien aus dem Dateisystem direkt auf die Bühne, um sie dort abzulegen. In der Bibliothek wird eine „Videogruppe“ mit dem Namen der Videodatei erstellt. Diese Videogruppe enthält die Videodatei und die Fallback-Dateien, die Sie für die browserübergreifende Kompatibilität hinzufügen.

Hinweis: Fallback-Dateien werden automatisch nach Namen unter der Videogruppe angeordnet, wenn Sie sie in die Komposition importieren.

  • Klicken Sie in der Projektbibliothek auf „Video hinzufügen“ und wählen Sie die Videodatei aus. Ziehen Sie dann die Videogruppe aus der Bibliothek auf die Bühne. 
Option „Video hinzufügen“ in der Bibliothek
Option „Video hinzufügen“ in der Bibliothek

Nachdem Sie der Komposition ein Video hinzugefügt haben, wird im Elemente-Bedienfeld ein „Videoelement“ angezeigt. Wenn Sie im Elemente-Bedienfeld das Videoelement auswählen, werden im Eigenschaften-Bedienfeld Optionen zur Steuerung der Videowiedergabe angezeigt.

Wiedergabe und Steuerung des Videos

Sie können das Video mit den folgenden Optionen abspielen und steuern:

  • Bedienfeld „Eigenschaften“
    • Automatisch abspielen: Ermöglicht die automatische Wiedergabe der Videodatei auf der Zeitleiste und in Desktopbrowsern.
    • Schleife: Spielt die Videodatei in einer Schleife wieder von vorne ab, nachdem sie am Ende angelangt ist.
Videosteuerelemente im Eigenschaften-Bedienfeld
Videosteuerelemente im Eigenschaften-Bedienfeld

  • Zeitleiste
    • Abspielen: Gibt die Videodatei ab der aktuellen Position des Abspielkopfs wieder.
    • Abspielen von: Ermöglicht es Ihnen, die Zeitmarkierung anzugeben, bei der die Wiedergabe des Videos beginnen soll.
    • Pause: Ermöglicht es Ihnen, das Video anzuhalten. Verwenden Sie die Funktion „play“, um die Wiedergabe fortzusetzen.
Videowiedergabeoptionen auf der Zeitleiste
Videowiedergabeoptionen auf der Zeitleiste

  • Videoaktionen: Hier haben Sie die Möglichkeit, Codefragmente in den Aktions-Editor einzubinden, um die Videowiedergabe mithilfe von Ereignissen zu steuern.

Videoaktionen

  1. Öffnen Sie den Aktions-Editor, indem Sie auf der Zeitleiste neben „Bühne“ auf „{}“ klicken.

  2. Klicken Sie auf einen Auslöser (Ereignis).

  3. Klicken Sie in der Liste „Aktion auswählen“ auf „Video“ und dann auf die erforderliche Aktion.

    Sie können auch im Abschnitt „Aktion auswählen“ mit dem Suchfeld eine Aktion suchen.

    Videoaktionen im Aktions-Editor
    Videoaktionen im Aktions-Editor

  4. Klicken Sie im Abschnitt „Ziel auswählen“ auf „Bühne“ und doppelklicken Sie dann auf das Element oder Symbol, dem Sie die ausgewählte Aktion zuweisen möchten.

    Sie können das Element oder Symbol auch mit dem Suchfeld im Abschnitt „Ziel auswählen“ suchen.

Vorausladen von Videos

Damit Videodateien vorausgeladen werden, bevor die Komposition geladen wird, wählen Sie „Video vorausladen“ im Abschnitt „Preloader“ des Bedienfelds „Eigenschaften“ auf der Bühne.

Hinweis: Das Vorausladen von Videos steht auf den meisten mobilen Geräten nicht zur Verfügung. Informationen zu den Einschränkungen finden Sie unter Verwenden von Videos auf Geräten

Vorausladen von Videos
Vorausladen von Videos

Aktivieren des Standard-Videoplayers

Sie können den Standard-Medienplayer des Browsers verwenden, um Videosteuerelemente anzuzeigen. Der Standard-Videoplayer ist standardmäßig ausgeblendet. Um den Standardplayer zu aktivieren, wählen Sie das Videoelement aus und wählen Sie im Abschnitt „Video“ des Eigenschaften-Bedienfelds die Option „Steuerelemente“. 

Aktivieren des Standard-Videoplayers im Bedienfeld „Eigenschaften“
Aktivieren des Standard-Videoplayers im Bedienfeld „Eigenschaften“

Die Playerskin wird vom Browser gerendert und die Darstellung hängt daher vom verwendeten Browser ab. Der Player, der in Chrome angezeigt wird, unterscheidet sich beispielsweise von dem in Firefox.

Wenn der Player auf der Bühne angezeigt wird, können Sie auf den Player wie auf jedes andere Objekt, Bewegungs-, Transformations- und andere Eigenschaften anwenden.

Verwenden von Videos auf Geräten

iOS

In Safari unter iOS (alle Geräte einschließlich iPad), wo die Möglichkeit besteht, dass Benutzer ein Mobilfunknetz nutzen und Gebühren nach Datenvolumen anfallen, sind die Aktionen für das Vorausladen, Abspielen und das automatische Abspielen deaktiviert. Daten werden erst geladen, wenn der Benutzer die Videodaten abspielt.

Sie können mit den Videoaktionen ein Videoelement aufrufen, das von einem Benutzerereignis ausgelöst wurde. Weitere Informationen zu Videoaktionen finden Sie unter Videoaktionen.

Android

Android weist im Allgemeinen dieselben Einschränkungen für Videos auf wie iOS.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie