動画のアップロード方法は、新規のお客様からよくいただく質問の一つです。開発者にとって、ファイル・アップロードの実装は何度かやったことがあることでしょうが、大変な作業です。
Filepickerを使用する
Filepicker（現在はFilestack）はファイルのアップロードを簡単にします。本当に簡単なのです。ローカルファイルだけに限らず、DropboxやGoogleからや、ウェブカメラからの直接ビデオ録画まで、幅広いソースをサポートしています。何より素晴らしいのは、フロントエンドを離れることなく、これらすべてを行えることです。
何か作業をする前に、Filepickerアカウントにサインアップする必要があります。登録が完了したら、ダッシュボードに新しいアプリを作成してください。表示されるAPIキーをメモしておいてください。FilepickerはS3バケットを提供してくれますが、アップロード先のS3バケットを設定するのに少し時間がかかります。
基本的なHTML5テンプレートで同じページから始めましょう。シンプルにするためにjQueryを使うつもりなので、Filepickerライブラリと一緒にボイラープレートにもjQueryを含めます。
<!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>Filepicker JavaScript APIを使って、ユーザーがファイルを選択してS3バケットに保存できるようにしよう。また、ユーザーがクリックできるように、本文中にリンクを関連付ける必要があります。これを Filepicker JavaScript include の下に追加します。最初にアップロードリンクを追加しましょう。すでに大きくて目立つ h1 タグにリンクを追加しましょう。
<h1><a href="#" id="upload-link">Upload all the things!</a></h1>では、そのリンクを使って filepicker.pickAndStore をクリックします。ここで、先ほどメモしたAPIキーを使います。このスニペットを、ページのheadにあるFilepicker JavaScript includeの下に置きます。
<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>何らかのウェブサーバーを使って HTML を提供しないと、外部の JavaScript ファイルを読み込むことができません。http-server のようなものを使うこともできますが、GitHub リポジトリの静的ファイルを配信する基本的な Node アプリケーションがあります。
任意のファイル（比較的小さいものを選ぶとよいでしょう）を選んでアップロードしてください。 fpfiles ファイルをアップロードしたら、コンソールを見てみてください。すべてが計画通りに進んでいれば、新しくアップロードしたファイルに関する情報を持ったオブジェクトがあるはずです。
あなたは、シンプルなHTMLマークアップを含む、合計わずか27行のコードで、コンピュータからファイルをアップロードしただけです。しかし、ただファイルをアップロードして置いておくだけでは役に立たないので、ユーザーが動画をアップロードしてエンコードできるようにしましょう。
Zencoderの追加
まず、アップローダーを動画ファイルのみ受け付けるように変更しましょう。Filepickerでは、mimetypeで制限することができます。 {mimetype: 'video/*'}.これはChromeでは問題なく動作しますが、Safariユーザーにはアップロードできるファイルのサブセットがかなり少なく表示されます。動画の場合は、拡張子で制限する方がはるかに信頼性が高いので、その方法を取りましょう。
$('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));
});
});私は簡単な方法で、Zencoderのフォーマット・ドキュメントにある有効な出力フォーマットのリストを使いました。この中には音声ファイルも含まれていますが、Zencoderは音声のみのエンコードをサポートしているので、そのままにしておくことができます。リンクをクリックしてローカルファイルをブラウズすると、リストにある拡張子を持つファイルしか選択できないことに気づくはずです。選択できないファイルをドラッグ＆ドロップしようとすると、エラーになります。
Zencoderがサポートするファイルのみをアップロードできるということがわかったので、アップロードに成功したら、そのファイルをZencoderに送信してエンコードするようにしましょう。その前に、Zencoder APIキーを設定する必要があります。これはFilepickerキーのすぐ下に記述してください。
filepicker.setKey('The_Key_From_Your_Dashboard');
var zenKey = 'Zencoder_API_Key';jQueryの $.ajax アップロードに成功したら、API リクエストを Zencoder に送信します。
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);
}
});
});ページを更新し、ビデオをアップロードしてください。すべてが計画通りに進んでいれば、新しく作成したジョブへのリンクとともに成功のメッセージが表示されるはずです。
わずか47行のコードで、ビデオをアップロードしてエンコードするためのウェブページが完成できます。
注意と警告
ZencoderのAPIキーをJavaScriptの中にプレーンテキストで記述するのはよくありません。もう一度言いますが、他の人がアクセスできる可能性のあるコードは使用しないでください。他の人がアクセスできる可能性のあるコードでこのキーを使用しないでください。
ここでのより良いアイデアは、説明したようにFilepickerを使用することですが、実際にはAPIキーが詮索されないように安全なバックエンドでZencoder APIコールを行うことです。
さらなるステップへ
ドラッグ＆ドロップは本当に素晴らしいものなので、Filepickerの makeDropPaneユーザーは何か作業をする前にAPIキーを入力しなければなりません。 デモの依頼 はネットに載せても安全です。
このバージョンでは、APIキーの検証を行い、最近のZencoderジョブの履歴を含み、リクエスト・テンプレートを変更することができます。これらの設定はすべてブラウザのlocalStorageに保存されるので、更新時にすべてを失うことはありません。
