Verwenden von Multimediadateien in Canvas Apps

Sie können einer Canvas-App Bilder, Audio- und Videodateien hinzufügen. Fügen Sie Videos von Streaming-Diensten wie Microsoft Stream, Azure Media Services oder Streaming-Diensten von Drittanbietern wie YouTube hinzu. Oder verwenden Sie Eingabesteuerungen wie Stifteingabe, um Unterschriften zu erfassen.

Dieser Artikel führt Sie durch die Arbeit mit Multimedia-, Streaming- und Eingabesteuerungsszenarien. Die in diesem Artikel verwendete Datenquelle ist eine Excel-Datei in OneDrive for Business.

Voraussetzungen

Anmeldung bei for Power Apps, und führen dann eine Anmeldung mit denselben Anmeldeinformationen durch, mit denen Sie sich angemeldet haben.

Sehen Sie sich dieses Video an, um zu erfahren, wie Sie Multimedia-Dateien in Canvas Apps verwenden können:

Hinzufügen von Medien aus einer Datei oder aus der Cloud

Zum Hochladen können Sie eine beliebige Art von Mediendatei auswählen (z.B. Bilder, Video oder Audio). Sie können Bilder über den Medienbereich oder über das Bildsteuerelement hinzufügen.

Medienbereich

Hinweis

Wenn Sie Mediendateien per URL hinzufügen:

  • Verwenden Sie HTTPS, um die Kompatibilität mit modernen Browsern sicherzustellen.
  • Stellen Sie sicher, dass die URL anonym und ohne Authentifizierung zugänglich ist. Versuchen Sie, die URL im privaten Browsermodus einzugeben, um sicherzustellen, dass sie ohne Anmeldung zugänglich ist.

Bilder, Audios oder Videos im Medienbereich hinzufügen

So verwenden Sie den Bereich Medien zum Hinzufügen, Entfernen oder Verwenden von Mediendateien in Ihrer App:

  1. Wählen Sie im linken Bereich Medien aus.

    Medien

  2. Wählen Hochladen im Medienbereich aus.

    Medien hochladen

  3. Wählen Sie die hinzuzufügende(n) Datei(en) aus, und wählen Sie dann Öffnen aus.

  4. Wählen Sie die Datei aus dem Medienbereich aus, die in den Bildschirm eingefügt werden soll.

    Medien hinzufügen

  5. Speichern und veröffentlichen Ihre Anwendung.

  6. Geben Sie die App für andere Benutzer frei.

Bilder, Audios oder Videos über die Steuerelemente hinzufügen

So fügen Sie Bilder, Audios oder Videos mit dem Steuerelement Bild, Audio oder Video hinzu:

  1. Klicken Sie in der oberen Menüleiste auf Einfügen.

  2. Wählen Sie die Dropdownliste mit Medien aus.

  3. Wählen Sie aus den Steuerelementen Bild, Audio oder Video aus.

Für das Steuerelement Bild aktualisieren Sie die Eigenschaft Image mit dem Bilddateinamen ohne Erweiterung. Für das Steuerelement Audio oder Video aktualisieren Sie die Eigenschaft Media mit dem Dateinamen oder der URL wie die URL eines YouTube-Videos in doppelten Anführungszeichen.

Hinzufügen von Medien aus Azure Media Services

  1. Laden Sie in Ihrem Azure Media Services-Konto über AMS > Einstellungen > Medienobjekte Ihr Videomedienobjekt hoch, und veröffentlichen Sie es.

  2. Nachdem das Video veröffentlicht wurde, kopieren Sie seine URL.

  3. Fügen Sie in Power Apps über Einfügen > Medien das Video-Steuerelement hinzu.

  4. Legen Sie die Media-Eigenschaft der URL fest, die Sie kopiert haben.

    Wie in dieser Abbildung gezeigt, können Sie jede Streaming-URL auswählen, die von Azure Media Services unterstützt wird:

    Legen Sie die Medieneigenschaft fest.

  5. Speichern und veröffentlichen Ihre Anwendung.

  6. Geben Sie die App für andere Benutzer frei.

Microsoft Stream-Medien hinzufügen

Um zu lernen, wie man ein Microsoft Stream-Videosteuerelement hinzufügt, gehen Sie zu Beispiel für ein Microsoft Stream-Video-Steuerelement.

Hinzufügen von Bildern aus der Cloud zur App

In diesem Szenario speichern Sie Bilder in einem Cloudspeicherkonto, OneDrive for Business. Sie verwenden eine Excel-Tabelle, in der der Pfad zu den Bildern enthalten ist, und Sie zeigen die Bilder in einem Katalog-Steuerelement in der App an.

In diesem Szenario wird die Datei CreateFirstApp.zip verwendet, die einige JPEG-Dateien enthält.

Hinweis

Im Pfad zu diesen Bildern in der Excel-Datei müssen Schrägstriche verwendet werden. Werden Pfade zu Bildern von Power Apps in einer Excel-Tabelle gespeichert, werden im Pfad umgekehrte Schrägstriche verwendet. Wenn Sie Pfade zu Bildern aus einer solchen Tabelle verwenden, ändern Sie die Pfade in der Excel-Tabelle so, dass anstelle der umgekehrten Schrägstriche normale Schrägstriche verwendet werden. Andernfalls werden die Bilder nicht angezeigt.

  1. Laden Sie die Datei CreateFirstApp.zip herunter, und extrahieren Sie den Ordner Assets in Ihr Cloud-Speicherkonto.

  2. Benennen Sie den Ordner Assets in Assets_images um.

  3. Erstellen Sie in einem Excel-Arbeitsblatt eine Tabelle mit einer Spalte, und füllen Sie diese mit den folgenden Daten.

    Tabelle „Jacken“

    Um den Dateipfad von OneDrive for Business zu kopieren, wählen Sie eine Datei aus, und wählen Sie dann Pfad (Direkten Link kopieren) aus dem Detailbereich auf der rechten Seite des Bildschirms.

  4. Benennen Sie die Tabelle Jacken, und benennen Sie die Excel-Datei Assets.xlsx.

  5. Fügen Sie in der App die Tabelle Jacken als Datenquelle hinzu.

  6. Aktualisieren Sie optional Ihre App-Ausrichtung in Querformat.

  7. Wählen Sie Einfügen > Katalog und dann Horizontal.

  8. Wählen Sie optional das Textfeld und dann das Überschriftenfeld unter dem ersten Bild aus, und löschen Sie sie, damit nur Bilder auf dem Bildschirm angezeigt werden.

    Löschen Sie Felder.

    Wenn Sie einen Formelfehler sehen, drücken Sie STRG+Z, um das Löschen rückgängig zu machen. Stellen Sie dann sicher, zuerst das Feld Untertitel und dann das Feld Titel zu löschen.

  9. Legen Sie die Items-Eigenschaft des Katalogs auf Jackets fest.

    Items-Eigenschaft

  10. Wählen Sie das erste Bild im Katalog aus, und legen Sie seine Eigenschaft Image auf ThisItem.Images fest:

    Artikelbilder

    Der Katalog wird automatisch mit den Bildern aktualisiert:

    Bilder „Jacken“

    Wenn Sie die Element-Eigenschaft festlegen, wird der Excel-Tabelle automatisch die Spalte PowerAppsId hinzugefügt.

  11. Speichern und veröffentlichen Ihre Anwendung.

  12. Geben Sie die App für andere Benutzer frei.

Hochladen von Stiftzeichnungen in die Cloud

In diesem Szenario erfahren Sie, wie Sie Stiftzeichnungen in Ihre Datenquelle, OneDrive for Business hochladen und wie die Zeichnungen dort gespeichert werden.

  1. Fügen Sie in Excel Zelle A1 Bild [Bild] hinzu.

  2. Erstellen Sie eine Tabelle, indem Sie folgende Schritte durchführen:

    1. Wählen Sie Zelle A1 aus.

    2. Wählen Sie im Menüband Einfügen Tabelle aus.

    3. Aktivieren Sie im Dialogfeld das Kontrollkästchen Meine Tabelle hat Überschriften, und wählen Sie anschließend OK aus.

      Erstellen Sie eine Tabelle.

      Die Excel-Datei liegt nun im Tabellenformat vor. Weitere Informationen zum Formatieren von Tabellen im Excel-Format finden Sie unter Daten als Tabelle formatieren.

    4. Benennen Sie die Tabelle Zeichnungen:

      Benennen Sie die Tabelle in „Zeichnungen“ um.

  3. Speichern Sie die Excel-Datei in OneDrive for Business unter dem Namen SavePen.xlsx.

  4. Erstellen Sie in Power Apps eine leere App mit Tablet-Layout.

  5. Fügen Sie in der App das OneDrive for Business-Konto als Datenquelle hinzu:

    1. Wählen Sie das Menü Ansicht und dann Datenquellen aus.

      Wählen Sie eine Datenquelle aus.

    2. Wählen Sie Datenquelle hinzufügen und dann OneDrive for Business aus.

    3. Wählen Sie SavePen.xlsx.

    4. Wählen Sie die Tabelle Drawings aus, und wählen Sie Verbinden aus.

      Verbinden

      Nun wird die Tabelle „Zeichnungen“ als Datenquelle aufgelistet.

  6. Wählen Einfügen > Eingabe und dann Stifteingabe aus.

  7. Benennen Sie das neue Steuerelement MyPen:

    Umbenennen

  8. Fügen Sie auf der Registerkarte Einfügen ein Schaltflächen-Steuerelement hinzu, und legen Sie dessen OnSelect-Eigenschaft auf diese Formel fest:

    Pflaster (Zeichnungen, Standardeinstellungen (Zeichnungen), {Image:MyPen.Image})

    Schaltfläche „OnSelect“

  9. Fügen Sie das Katalog-Steuerelement Horizontal hinzu (Registerkarte Einfügen > Katalog).

  10. Wählen Sie optional das Textfeld und dann das Überschriftenfeld unter dem ersten Bild aus, und löschen Sie sie, damit nur Bilder auf dem Bildschirm angezeigt werden.

    Löschen Sie Felder.

    Wenn Sie einen Formelfehler sehen, drücken Sie STRG+Z, um das Löschen rückgängig zu machen. Stellen Sie dann sicher, zuerst das Feld Untertitel und dann das Feld Titel zu löschen.

  11. Legen Sie die Items-Eigenschaft des Katalogs auf Drawings fest. Die Image-Eigenschaft des Katalog-Steuerelements wird automatisch auf ThisItem.Image festgelegt.

    Ordnen Sie die Steuerelemente so an, dass Ihr Bildschirm dem Folgenden ähnelt:

    Beispielbildschirm

  12. Drücken Sie F5, oder wählen Sie die Vorschau ( Schaltfläche „Vorschau“ ).

  13. Zeichnen Sie ein Element im MyPen, und wählen Sie dann die Schaltfläche aus.

    Das erste Bild im Katalog-Steuerelement enthält Ihre soeben erstellte Zeichnung.

  14. Bearbeiten Sie die Zeichnung weiter, und wählen Sie die Schaltfläche aus.

    Das zweite Bild im Katalog-Steuerelement enthält die soeben erstellte Zeichnung.

  15. Schließen Sie das Vorschaufenster, indem Sie ESC drücken.

    In Ihrem Cloud-Speicherkonto wurde automatisch der Ordner SavePen_images erstellt. Dieser Ordner enthält die gespeicherten Bilder sowie die IDs für deren Dateinamen. Zum Anzeigen des Ordners müssen Sie u.U. das Browserfenster aktualisieren, indem Sie beispielsweise F5 drücken.

    Hinweis

    Der Ordnername kann unterschiedlich sein, wenn Ihr Excel-Dateiname unterschiedlich ist. Wenn Ihr Dateiname beispielsweise „Pen.xlsx“ lautet, lautet der Ordnername „Pen_images“.

    In der Datei SavePen.xlsx wird in der Spalte Image der Pfad zu den neuen Bildern angegeben.

  16. Speichern und veröffentlichen Ihre Anwendung.

  17. Geben Sie die App für andere Benutzer frei.

Entfernen Sie ungenutzte Medien

Sie können alle ungenutzten Medien aus der App entfernen, um die App aufzuräumen oder zu verkleinern. Verwenden Sie dazu die Option Medien > Ungenutzte Medien entfernen.

Unbenutzte Medien aus der App entfernen

Bekannte Einschränkungen

  • Um eine bessere Leistung beim Laden einer App zu ermöglichen, gelten folgende Größenbeschränkungen:
    • Die Gesamtgröße aller in eine App hochgeladenen Mediendateien darf 200 MB nicht überschreiten.
    • Die maximale Größe einer einzelnen Mediendatei in einer App darf 64 MB nicht überschreiten.
  • Unterstützte Medientypen: .jpg, .jpeg, .gif, .png, .bmp, .tif, .tiff, .svg, .wav, .mp3, .mp4.
  • Bekannte Einschränkungen von Cloud-Speicher gelten, wenn Sie Ihre App mit Cloud-basiertem Speicher verbinden.

Siehe auch

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).