L'une des questions les plus fréquentes que nous posent les nouveaux clients est de savoir comment télécharger des vidéos. Pour les développeurs, la mise en œuvre des téléchargements de fichiers est quelque chose qu'ils ont probablement fait plusieurs fois, mais c'est toujours un problème.
Entrer dans Filepicker
Filepicker (désormais Filestack) facilite le téléchargement de fichiers. Vraiment facile. Vous n'êtes pas non plus limité aux fichiers locaux ; l'application prend en charge un large éventail de sources, de Dropbox à Google, en passant par l'enregistrement d'une vidéo directement à partir de votre webcam. Le plus beau, c'est que vous pouvez faire tout cela sans jamais quitter le front-end.
Avant toute chose, vous devez créer un compte Filepicker. Une fois que vous l'avez fait, créez une nouvelle application dans votre tableau de bord s'il n'y en a pas. Prenez note de la clé API que vous voyez, nous l'utiliserons plus tard. Filepicker est assez sympathique pour fournir un seau S3 pour commencer, mais prenez une seconde pour configurer un seau S3 de destination pour vos téléchargements.
Commençons par la même page avec un modèle HTML5 de base. Nous allons utiliser jQuery pour simplifier les choses, nous l'inclurons donc dans notre modèle ainsi que la bibliothèque Filepicker.
<!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>Nous pouvons maintenant utiliser l'API JavaScript Filepicker pour permettre à nos utilisateurs de sélectionner un fichier et de l'enregistrer dans notre panier S3. Nous devrons également associer cela à un lien dans le corps de la page pour que l'utilisateur ait quelque chose à cliquer. Ajoutez ceci sous l'inclusion JavaScript Filepicker. Commençons par ajouter le lien de téléchargement. Puisque nous avons déjà un grand et proéminent h1 il suffit d'ajouter le lien vers cette étiquette.
<h1><a href="#" id="upload-link">Upload all the things!</a></h1>Nous voulons maintenant utiliser ce lien pour déclencher filepicker.pickAndStore lorsqu'on clique dessus. C'est ici que nous utiliserons la clé API que vous avez notée plus tôt. Placez cet extrait sous l'inclusion JavaScript Filepicker dans l'en-tête de la page.
<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>Vous devrez utiliser une sorte de serveur web pour servir le HTML, sinon vous ne pourrez pas charger les fichiers JavaScript externes. Vous pouvez utiliser quelque chose comme http-server, mais il existe une application Node basique qui servira les fichiers statiques dans le dépôt GitHub.
Choisissez n'importe quel fichier (vous pouvez choisir quelque chose de relativement petit) et téléchargez-le. Pour l'instant, un téléchargement réussi ne fait qu'enregistrer le fichier fpfiles à la console, donc après avoir téléchargé un fichier, jetez un coup d'œil à la console. Si tout s'est déroulé comme prévu, vous devriez avoir un objet contenant des informations sur le fichier que vous venez de télécharger.
Vous venez de télécharger un fichier depuis votre ordinateur avec seulement 27 lignes de code au total, y compris un simple balisage HTML. Cependant, il n'est pas utile de simplement télécharger des fichiers et de les laisser là, alors faisons en sorte que les utilisateurs puissent télécharger des vidéos et les encoder.
Ajout de Zencoder
Tout d'abord, modifions notre téléchargeur pour qu'il n'accepte que les fichiers vidéo. Filepicker nous permet de restreindre par mimetype, donc si vous êtes comme moi, vous pourriez être tenté d'essayer {mimetype: 'video/*'}. Cela fonctionnera parfaitement dans Chrome, mais les utilisateurs de Safari verront un sous-ensemble beaucoup plus restreint de fichiers qu'ils peuvent télécharger. Pour les vidéos, il est beaucoup plus fiable d'imposer une restriction par extension, c'est pourquoi nous avons opté pour cette solution.
$('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));
});
});Vous pouvez restreindre cet ensemble de fichiers acceptés ou en ajouter d'autres, mais j'ai choisi la solution de facilité en utilisant la liste des formats de sortie valides de la documentation sur les formats de Zencoder. Cela inclut quelques fichiers audio, mais comme Zencoder supporte l'encodage audio uniquement, nous pouvons les laisser là. Maintenant, si vous cliquez sur le lien et parcourez vos fichiers locaux, vous devriez remarquer que vous ne pouvez sélectionner que les fichiers avec une extension dans la liste. Si vous essayez de glisser-déposer un fichier inacceptable, vous obtiendrez une erreur.
Maintenant que nous savons que nous ne téléchargerons que des fichiers que Zencoder peut prendre en charge, faisons en sorte qu'un téléchargement réussi envoie le fichier à Zencoder pour qu'il soit encodé. Avant cela, nous devons définir notre clé API Zencoder. Vous pouvez l'inclure juste en dessous de votre clé Filepicker.
filepicker.setKey('The_Key_From_Your_Dashboard');
var zenKey = 'Zencoder_API_Key';Nous allons maintenant utiliser la fonction $.ajax pour envoyer notre demande d'API à Zencoder en cas de téléchargement réussi.
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);
}
});
});Actualisez maintenant votre page et téléchargez une vidéo. Si tout s'est déroulé comme prévu, vous devriez voir apparaître un message de réussite avec un lien vers votre emploi nouvellement créé.
Seulement 47 lignes de code plus tard, vous avez une page web qui vous permet de télécharger une vidéo et de l'envoyer pour encodage.
Notes et avertissements
C'est une mauvaise idée de mettre votre clé d'API Zencoder en texte clair à l'intérieur de JavaScript. Répétons-le encore une fois : Ne l'utilisez pas dans un code auquel d'autres personnes pourraient avoir accès. Rien n'empêcherait les gens de prendre votre clé API et d'encoder toutes les vidéos qu'ils veulent.
Une bien meilleure idée serait d'utiliser Filepicker comme décrit mais de faire l'appel à l'API de Zencoder dans votre back-end où votre clé API est à l'abri des regards indiscrets.
Aller plus loin
Le glisser-déposer est vraiment cool, c'est pourquoi nous avons voulu créer une page entière qui utilise les fonctions de Filepicker. makeDropPane. Les utilisateurs doivent entrer leur clé API avant de faire quoi que ce soit et celle-ci n'est pas stockée dans le code. démo peut être mis en ligne en toute sécurité.
Cette version valide la clé API, inclut un historique de vos derniers travaux Zencoder et vous permet de modifier le modèle de demande. Tous ces paramètres sont enregistrés dans le localStorage de votre navigateur afin que vous ne perdiez pas tout lors d'une actualisation.
