Wie man Videos hochlädt, ist eine der häufigsten Fragen, die wir von neuen Kunden erhalten. Für Entwickler ist die Implementierung von Datei-Uploads etwas, das sie wahrscheinlich schon ein paar Mal gemacht haben, aber es ist immer ein Problem.
Filepicker eingeben
Filepicker (jetzt Filestack) macht das Hochladen von Dateien einfach. Und zwar wirklich einfach. Sie sind auch nicht nur auf lokale Dateien beschränkt, sondern unterstützen eine breite Palette von Quellen, von Dropbox und Google bis hin zur Aufnahme eines Videos direkt von Ihrer Webcam. Das Beste daran ist, dass Sie all dies tun können, ohne das Frontend zu verlassen.
Bevor wir etwas anderes tun, müssen Sie sich für ein Filepicker-Konto anmelden. Erstellen Sie anschließend eine neue App in Ihrem Dashboard, falls noch keine vorhanden ist. Notieren Sie sich den API-Schlüssel, den Sie sehen, denn wir werden ihn später verwenden. Filepicker stellt netterweise einen S3-Bucket für den Anfang zur Verfügung, aber nehmen Sie sich eine Sekunde Zeit, um einen S3-Ziel-Bucket für Ihre Uploads einzurichten.
Beginnen wir auf derselben Seite mit einer einfachen HTML5-Vorlage. Wir werden jQuery verwenden, um die Dinge einfach zu machen, also werden wir das in unsere Boilerplate zusammen mit der Filepicker-Bibliothek aufnehmen.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Zencoder Dropzone</title>
<!-- jQuery Include -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Filepicker.io Include -->
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
</head>
<body>
<div id="content">
<h1>Upload all the things!</h1>
</div>
</body>
</html>Jetzt können wir die Filepicker JavaScript-API verwenden, um unseren Nutzern die Möglichkeit zu geben, eine Datei auszuwählen und sie in unserem S3-Bucket zu speichern. Wir müssen dies auch mit einem Link im Textkörper verknüpfen, damit der Benutzer etwas zum Klicken hat. Fügen Sie diesen unterhalb des Filepicker-JavaScript-Includes hinzu. Fügen wir zunächst den Upload-Link hinzu. Da wir bereits ein großes, prominentes h1 Tag, fügen wir einfach den Link dazu hinzu.
<h1><a href="#" id="upload-link">Upload all the things!</a></h1>Jetzt wollen wir diesen Link verwenden, um die filepicker.pickAndStore wenn Sie darauf klicken. Hier wird der API-Schlüssel verwendet, den Sie sich zuvor notiert haben. Platzieren Sie dieses Snippet unterhalb des Filepicker-JavaScript-Includes im Kopf der Seite.
<script type="text/javascript">
$(function() {
filepicker.setKey('The_Key_From_Your_Dashboard');
$('a').click(function(e) {
e.preventDefault(); // This keeps the normal link behavior from happening
filepicker.pickAndStore({},{location: 's3'},function(fpfiles){
console.log(JSON.stringify(fpfiles));
});
});
});
</script>Sie müssen eine Art Webserver verwenden, um den HTML-Code bereitzustellen, sonst können Sie die externen JavaScript-Dateien nicht laden. Sie können etwas wie http-server verwenden, aber es gibt auch eine einfache Node-Anwendung, die statische Dateien im GitHub-Repository bereitstellt.
Wählen Sie eine beliebige Datei (am besten eine relativ kleine) und laden Sie sie hoch. Momentan wird bei einem erfolgreichen Upload nur die fpfiles Objekt in die Konsole übertragen. Nachdem Sie also eine Datei hochgeladen haben, werfen Sie einen Blick auf die Konsole. Wenn alles nach Plan gelaufen ist, sollten Sie ein Objekt mit einigen Informationen über Ihre neu hochgeladene Datei haben.
Sie haben soeben eine Datei von Ihrem Computer mit insgesamt nur 27 Zeilen Code hochgeladen, einschließlich einfacher HTML-Auszeichnung. Dateien einfach nur hochzuladen und dort zu belassen, ist jedoch nicht sinnvoll. Also sollten wir es so gestalten, dass Nutzer Videos hochladen und kodieren können.
Hinzufügen von Zencoder
Zunächst müssen wir unseren Uploader so ändern, dass er nur Videodateien akzeptiert. Filepicker erlaubt es uns, nach Mimetyp einzuschränken, wenn Sie also wie ich sind, könnten Sie versucht sein, zu versuchen {mimetype: 'video/*'}. In Chrome funktioniert dies einwandfrei, aber Ihre Safari-Benutzer sehen eine viel kleinere Teilmenge von Dateien, die sie hochladen können. Bei Videos ist es viel zuverlässiger, sie über die Erweiterung einzuschränken, also lassen Sie uns diesen Weg gehen.
$('a').click(function(e) {
e.preventDefault(); // This keeps the normal link behavior from happening
var acceptedExtensions = ['3g2','3gp','3gp2','3gpp','3gpp2','aac','ac3','eac3','ec3','f4a','f4b','f4v','flv','highwinds','m4a','m4b','m4r','m4v','mkv','mov','mp3','mp4','oga','ogg','ogv','ogx','ts','webm','wma','wmv'];
filepicker.pickAndStore({extensions: acceptedExtensions},{location: 's3'},function(fpfiles){
console.log(JSON.stringify(fpfiles));
});
});Du kannst diese Menge an akzeptierten Dateien einschränken oder weitere hinzufügen, aber ich habe den einfachen Weg gewählt und einfach die Liste der gültigen Ausgabeformate aus der Zencoder-Formatdokumentation verwendet. Darunter sind auch einige Audiodateien, aber da Zencoder nur die Audiokodierung unterstützt, können wir sie drin lassen. Wenn Sie nun auf den Link klicken und Ihre lokalen Dateien durchsuchen, sollten Sie feststellen, dass Sie nur Dateien mit einer Erweiterung in der Liste auswählen können. Wenn Sie versuchen, eine inakzeptable Datei zu ziehen und abzulegen, erhalten Sie eine Fehlermeldung.
Da wir nun wissen, dass wir nur Dateien hochladen werden, die Zencoder unterstützt, müssen wir dafür sorgen, dass ein erfolgreicher Upload die Datei zur Kodierung an Zencoder sendet. Bevor wir das tun können, müssen wir unseren Zencoder-API-Schlüssel festlegen. Du kannst diesen einfach direkt unter deinem Filepicker-Schlüssel einfügen.
filepicker.setKey('The_Key_From_Your_Dashboard');
var zenKey = 'Zencoder_API_Key';Jetzt werden wir jQuery's $.ajax um unsere API-Anfrage nach erfolgreichem Upload an Zencoder zu senden.
filepicker.pickAndStore({extensions: acceptedExtensions},{location: 's3'},function(fpfiles){
// This is the simplest Zencoder API call you can make. This will output an h.264 mp4 with AAC audio and
// save it to Zencoder's temporary storage on S3.
var request = {
"input": fpfiles[0].url
}
// Let's use $.ajax instead of $.post so we can specify custom headers.
$.ajax({
url: 'https://app.zencoder.com/api/v2/jobs',
type: 'POST',
data: JSON.stringify(request),
headers: { "Zencoder-Api-Key": zenKey },
dataType: 'json',
success: function(data) {
$('body').append('Job created! <a href="https://app.zencoder.com/jobs/'+ data.id +'">View Job</a>')
},
error: function(data) {
console.log(data);
}
});
});Aktualisieren Sie nun Ihre Seite und laden Sie ein Video hoch. Wenn alles nach Plan verlaufen ist, sollten Sie eine Erfolgsmeldung mit einem Link zu Ihrem neu erstellten Job sehen.
Nur 47 Zeilen Code später haben Sie eine Webseite, mit der Sie ein Video hochladen und zur Kodierung senden können.
Hinweise und Warnungen
Es ist eine schlechte Idee, deinen Zencoder-API-Schlüssel im Klartext innerhalb von JavaScript zu verwenden. Nur um das noch einmal zu wiederholen: Verwende ihn nicht in Code, auf den andere Personen möglicherweise zugreifen könnten. Nichts würde andere davon abhalten, deinen API-Schlüssel zu nehmen und alle Videos zu kodieren, die sie wollen.
Eine viel bessere Idee wäre es, Filepicker wie beschrieben zu verwenden, aber den Zencoder-API-Aufruf in deinem Backend durchzuführen, wo dein API-Schlüssel vor neugierigen Blicken sicher ist.
Einen Schritt weiter gehen
Drag and Drop ist wirklich cool, deshalb wollten wir eine ganze Seite erstellen, die Filepicker's makeDropPane. Die Nutzer müssen ihren API-Schlüssel eingeben, bevor sie etwas tun können, und er ist nicht im Code gespeichert, so dass die Demo sicher online gestellt werden kann.
Diese Version validiert den API-Schlüssel, enthält einen Verlauf Ihrer letzten Zencoder-Aufträge und ermöglicht Ihnen, die Anforderungsvorlage zu ändern. Alle diese Einstellungen werden im localStorage Ihres Browsers gespeichert, damit Sie bei einer Aktualisierung nicht alles verlieren.
