Windows Dev Center

Language: HTML | XAML

Schnellstart: Registrieren einer App für Inhalt für die automatische Wiedergabe (HTML)

Sie können Apps als Optionen für Inhaltsereignisse vom Typ Automatische Wiedergabe registrieren. Inhaltsereignisse für die automatische Wiedergabe werden ausgelöst, wenn ein Volumegerät wie etwa die Speicherkarte einer Kamera, ein USB-Speicherstick oder eine DVD in den PC eingelegt bzw. an den PC angeschlossen wird.

Dieses Beispiel zeigt, wie Sie eine App als Option für die automatische Wiedergabe identifizieren, wenn ein Volumegerät einer Kamera angeschlossen wird.

Ziel: Erstellen Sie eine App zum Behandeln eines Inhaltsereignisses für die automatische Wiedergabe.

Voraussetzungen

Microsoft Visual Studio

Anweisungen

1. Erstellen eines neuen Projekts und Hinzufügen von Deklarationen für die automatische Wiedergabe

  1. Öffnen Sie Visual Studio, und wählen Sie im Menü Datei die Option Neues Projekt aus. Wählen Sie im Abschnitt JavaScript die Option Windows Store aus. Versehen Sie die App mit dem Namen AutoPlayDisplayOrCopyImages, und klicken Sie anschließend auf OK.
  2. Öffnen Sie die Datei Package.appxmanifest, und klicken Sie auf die Registerkarte Funktionen. Wählen Sie die Funktionen Wechselmedien und Bildbibliothek aus. Dadurch erhält die App Zugriff auf Wechselmedien für Kameraspeicher und lokale Bilder.
  3. Klicken Sie in der Manifestdatei auf die Registerkarte Deklarationen. Wählen Sie in der Dropdownliste Verfügbare Deklarationen die Option Inhalt automatisch wiedergeben aus, und klicken Sie anschließend auf Hinzufügen. Wählen Sie das neue Element vom Typ Inhalt automatisch wiedergeben aus, das der Liste Unterstützte Deklarationen hinzugefügt wurde.
  4. Eine Deklaration vom Typ Inhalt automatisch wiedergeben identifiziert Ihre App als Option, wenn die automatische Wiedergabe ein Inhaltsereignis auslöst. Das Ereignis basiert auf dem Inhalt eines Volumegeräts (beispielsweise eine DVD oder ein Speicherstick). Die automatische Wiedergabe untersucht den Inhalt des Volumegeräts und ermittelt, welches Inhaltsereignis ausgelöst wird. Das ShowPicturesOnArrival-Ereignis wird von der automatischen Wiedergabe ausgelöst, wenn das Stammverzeichnis des Volumes den Ordner "/DCIM", "/AVCHD" oder "/PRIVATE\ACHD" enthält oder wenn die Option Gewünschte Aktion für jeden Medientyp auswählen vom Benutzer in der Systemsteuerungsoption "Automatische Wiedergabe" aktiviert wurde und Bilder im Stammverzeichnis des Volumes gefunden werden.

    Geben Sie im Abschnitt Startaktionen folgende Werte für die Aktion beim ersten Start ein:

    EinstellungWert
    Verbshow
    Anzeigename der AktionBilder anzeigen
    InhaltsereignisShowPicturesOnArrival

     

    Die Einstellung Anzeigename der Aktion dient zum Angeben der Zeichenfolge, die die automatische Wiedergabe für Ihre App anzeigt. Die Einstellung Verb dient zum Angeben eines Werts, der für die ausgewählte Option an Ihre App übergeben wird. Sie können mehrere Startaktionen für Ereignisse der automatischen Wiedergabe angeben und mit der Einstellung Verb ermitteln, welche Option ein Benutzer für Ihre App ausgewählt hat. Für welche Option sich der Benutzer entschieden hat, erfahren Sie durch Überprüfen der verb-Eigenschaft der an die App übergebenen Startereignisargumente. Für die Einstellung Verb können Sie einen beliebigen Wert verwenden. Einzige Ausnahme ist open: Dieser Wert ist reserviert.

  5. Klicken Sie im Abschnitt Startaktionen für das Element vom Typ Inhalt automatisch wiedergeben auf Neue hinzufügen, um eine zweite Startaktion hinzuzufügen. Geben Sie für die zweite Startaktion folgende Werte ein:
    EinstellungWert
    Verbcopy
    Anzeigename der AktionBilder in die Bibliothek kopieren
    InhaltsereignisShowPicturesOnArrival

     

  6. Wählen Sie in der Dropdownliste Verfügbare Deklarationen die Option Dateitypzuordnungen aus, und klicken Sie anschließend auf Hinzufügen. Legen Sie in den Eigenschaften der neuen Deklaration vom Typ Dateitypzuordnungen das Feld Anzeigename auf AutoPlay Copy or Show Images und das Feld Name auf image_association1 fest. Klicken Sie im Abschnitt Unterstützte Dateitypen auf Neu hinzufügen. Legen Sie im Feld Dateityp die Option .jpg fest. Klicken Sie im Abschnitt Unterstützte Dateitypen erneut auf Neu hinzufügen. Legen Sie das Feld Dateityp der neuen Dateizuordnung auf .png fest. Für Inhaltsereignisse filtert AutoPlay Dateitypen heraus, die nicht explizit Ihrer App zugeordnet sind.
  7. Speichern und schließen Sie die Manifestdatei.

2. Hinzufügen einer HTML-Benutzeroberfläche

  • Öffnen Sie die Datei "Default.html", und fügen Sie im Abschnitt <body> den folgenden HTML-Code hinzu.
    
    <label>File List</label>
    <div id="files" style="position:fixed;top:30px;height:400px;width:600px" ></div>
    
    
    

3. Hinzufügen von Initialisierungscode

Der Code in diesem Schritt prüft den Verb-Wert der verb-Eigenschaft in den Startargumenten, die an die App übergeben wurden. Der Code ruft dann die Funktion für die vom Benutzer ausgewählte Option auf. Für das Kameraspeicherereignis übergibt AutoPlay den Stammordner des Kameraspeichers in den Startargumenten, die ihrerseits an die App übergeben wurden. Sie können diesen Ordner aus dem ersten Element der detail.files-Eigenschaft abrufen.

  • Öffnen Sie den Ordner js. Öffnen Sie die Datei Default.js, und ersetzen Sie die standardmäßige onactivated-Funktion durch den folgenden Code.
    
    var filesDiv;
    
    app.onactivated = function (args) {
        if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.file) {
            filesDiv = document.getElementById("files");
    
            if (args.detail.verb === "show") {
                // Call displayImages with root folder from camera storage.
                displayImages(args.detail.files[0]);
            }
            else if (args.detail.verb === "copy") {
                // Call copyImagesToLibrary with root folder from camera storage.
                copyImagesToLibrary(args.detail.files[0]);
            }
        }
        args.setPromise(WinJS.UI.processAll());
    };
    
    
    

4. Hinzufügen von Code zum Anzeigen von Bildern

  • Fügen Sie in der Datei Default.js den folgenden Code nach der onactivated-Funktion hinzu.
    
    function displayImages(rootFolder) {
        // Display images from first folder in root\DCIM.
        rootFolder.getFolderAsync("DCIM").then(
        function (dcimFolder) {
            dcimFolder.getFoldersAsync().then(
            function (cameraFolders) {
                cameraFolders[0].getFilesAsync().then(
                function (files) {
                    files.forEach(function (file) {
                        filesDiv.innerHTML += file.name + "<br />";
                        displayImage(file);
                    });
                });
            });
        });
    }
    
    function displayImage(file) {
        try {
            var element = document.createElement("img");
            element.src = window.URL.createObjectURL(file, { oneTimeOnly: true });
            element.height = 100;
            element.width = 100;
            filesDiv.appendChild(element);
            filesDiv.innerHTML += "<br>";
        }
        catch (e) {
            filesDiv.innerHTML += e.message;
        }
    }
    
    
    

5. Hinzufügen von Code zum Kopieren von Bildern

  • Fügen Sie in der Datei "Default.js" den folgenden Code nach der displayImage-Funktion ein.
    
    function copyImagesToLibrary(rootFolder) {
        try {
            var now = new Date();
            var folderName =
                "Images " + now.toDateString() + " " + now.getHours() +
                            now.getMinutes() + now.getSeconds();
    
            Windows.Storage.KnownFolders.
            picturesLibrary.createFolderAsync(folderName).then(
                    function (imageFolder) {
                        // Copy images from first folder in root\DCIM.
                        rootFolder.getFolderAsync("DCIM").then(
                    function (dcimFolder) {
                        dcimFolder.getFoldersAsync().then(
                    function (cameraFolders) {
                        cameraFolders[0].getFilesAsync().then(
                    function (files) {
                        files.forEach(function (file) {
                            copyImage(file, imageFolder);
                        });
                    });
                    });
                    });
                    });
        } catch (e) {
            filesDiv.innerHTML = "Failed copy images.<br />" + e.message;
        }
    }
    
    function copyImage(file, imageFolder) {
        try {
            file.copyAsync(
                imageFolder, file.fileName,
                    Windows.Storage.NameCollisionOption.replaceExisting).then(
                        function (newFile) {
                            filesDiv.innerHTML += file.name + " copied.<br />";
                        });
        } catch (e) {
            filesDiv.innerHTML += "Failed to copy image.<br />" + e.message;
        }
    }
    
    
    

6. Erstellen und Ausführen der App

  1. Drücken Sie F5, um die App zu erstellen und bereitzustellen (im Debugmodus).
  2. Legen Sie eine Kameraspeicherkarte oder ein anderes Speichergerät einer Kamera in Ihren PC ein, um die App auszuführen. Wählen Sie dann in der Liste mit den Optionen für die automatische Wiedergabe eine der Inhaltsereignisoptionen aus, die Sie in der Datei package.appxmanifest angegeben haben. Dieser Beispielcode zeigt nur Bilder im Ordner "DCIM" auf der Speicherkarte einer Kamera an, oder er kopiert diese. Wenn die Speicherkarte Ihrer Kamera Bilder in "AVCHD" oder "PRIVATE\ACHD" speichert, müssen Sie den Code entsprechend ändern.
    Hinweis  Falls Sie nicht über eine Kameraspeicherkarte verfügen, können Sie einen Speicherstick verwenden, sofern dieser im Stammverzeichnis einen Ordner mit dem Namen DCIM und der Ordner "DCIM" wiederum einen Unterordner mit Bildern enthält.

Zusammenfassung und nächste Schritte

In diesem Lernprogramm haben Sie eine App erstellt, die Bilddateien anzeigt oder sie in "Bilder" kopiert. Sie haben die App für das ShowPicturesOnArrival-Inhaltsereignis von AutoPlay registriert.

Die automatische Wiedergabe löst Inhaltsereignisse für Inhalte aus, die mittels Näherung (Koppeln) zwischen PCs ausgetauscht werden. Sie können die Schritte und den Code aus dieser Schnellstartanleitung auch für Dateien verwenden, die mittels Näherung zwischen PCs geteilt werden. Die folgende Tabelle enthält die Inhaltsereignisse für die automatische Wiedergabe, die Sie verwenden können, um Inhalte mithilfe der Näherungsfunktion zu teilen.

AktionInhaltsereignis der automatischen Wiedergabe
Teilen von MusikPlayMusicFilesOnArrival
Teilen von VideosPlayVideoFilesOnArrival

 

Falls Dateien mithilfe der Näherungsfunktion geteilt werden, enthält die Files-Eigenschaft des FileActivatedEventArgs-Objekts einen Verweis auf einen Stammordner mit allen geteilten Dateien.

Verwandte Themen

Automatischer Start mit automatischer Wiedergabe

 

 

Anzeigen:
© 2015 Microsoft