╭───╮╭─╮
│ ││ │╭─╮╭──┬──┬─╮╭───╮╭───╮
│ ││ │├─┤│ ╭╮ ╭╮ ││ ─ ││╭╮ │ ╭────────┬─────────────────────╮
╰╮ ╰╯╭╯│ ││ ││ ││ ││ ─┤│╰╯ │ | UPLOAD │ ▒▒▒▒▒▒▒▒▒▒▒░░░░ %75 |
╰────╯ ╰─╯╰─╯╰─╯╰─╯╰───╯╰───╯ ╰────────┴─────────────────────╯
Upload videos to your Vimeo account and update their metadata directly from a browser or a Node.js app.
Try it LIVE
Using Bower
bower install vimeo-upload
Or npm
npm install vimeo-upload
Include vimeo-upload.js in your index.html.
<script src="bower_components/vimeo-upload/dist/vimeo-upload.min.js"></script>
Create a new VimeoUpload initialized with a Blob or File and Vimeo Access Token then call start() to start the upload process.
var options = {
token: "TOKEN_STRING_HERE", //Required
file: null, //Required
videoData: {
name: "My awesome title", //Optional
description: "My awesome description" //Optional
}
}
var uploader = new VimeoUpload();
uploader.start(options);List of options that can be overriden.
| Properties | Description | Default | Required |
|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------|----------|
| token | Authentication token created on Vimeo, must have an UPLOAD scope (to be able to upload), and an EDIT scope(to add meta data after upload is complete) | YOUR_TOKEN_HERE | Required |
| file | The File or Blog to upload. | null | Required |
| videoData | Object that supports all video data properties. See link for more info: https://developer.vimeo.com/api/endpoints/videos#PATCH/videos/{video_id} | {} | Optional
| preferredUploadDuration | The preferred chunk upload duration. The chunk size will be updated after each chunk upload to best fit the prefferedUploadDuration. | 20 [seconds] | Optional |
| chunkSize | The size of the chunk to be uploaded | 1024*1024 | Optional |
| upgrade_to_1080 | Upgrade the video to 1080 | false | Optional |
| timeInterval | Time interval for event data to be dispatched. | 150 [miliseconds] | Optional |
| maxAcceptedFails | The number of failures that can occur before the upload is terminated. Fails occur whenever a request fails. Setting this to 0 will allow for unlimited amount of fails. | 20 | Optional |
| maxAcceptedUploadDuration | If the maxAcceptedUploadDuration for a chunk is exceeded, the upload request is aborted and the chunkSize is updated before sending picking up where the upload was left. | 60 [seconds] | Optional |
| useDefaultFileName | Use the file's default name as the video name. | false | Optional |
| retryTimeout | The time before the upload process is resumed when a fail occurs. | 5000 [miliseconds] | Optional |
//All Default options that can be overriden
var options = {
token: "TOKEN_STRING_HERE", //Required
file: null, //Required
videoData: {}, //Check link to see all supported properties | https://developer.vimeo.com/api/endpoints/videos#PATCH/videos/{video_id}
preferredUploadDuration: 20,
chunkSize: 1024*1024,
upgrade_to_1080: false,
timeInterval: 150,
maxAcceptedFails: 20,
maxAcceptedUploadDuration: 60,
useDefaultFileName: false,
retryTimeout: 5000
};
var uploader = new VimeoUpload();
uploader.start(options);VimeoUpload comes with different events that can be binded.
| Event Names | Description | Frequency | [Object object] sent |
|----------------------|---------------------------------------------------------|---------------|-------------------------------------------------------------------------------------------|
| chunkprogresschanged | Regularly sends the current percent of a chunk upload | Default 150ms | { detail: number } |
| totalprogresschanged | Regularly sends the current percent of the total upload | Default 150ms | { detail: number } |
| vimeouploaderror | Emits if any errors occurs | N/A | { detail: { message: string, error: [Object object] } } |
| vimeouploadcomplete | Called once when the upload is completed | Once | { detail: { id: number, link: string, name: string, uri: string, createdTime: string } } |
//Get the progress bar elements
var totalProgress = document.getElementById("progress-total");
var chunkProgress = document.getElementById("progress-chunk");
//Create the VimeoUpload object
var vimeoUpload = new VimeoUpload();
vimeoUpload.on("chunkprogresschanged", function(event){
var progress = event.detail;
chunkProgress.setAttribute('style', 'width:' + progress + '%');
chunkProgress.innerHTML = ' ' + progress + '%'
});
vimeoUpload.on("totalprogresschanged", function(event){
var progress = event.detail;
totalProgress.setAttribute('style', 'width:' + progress + '%');
totalProgress.innerHTML = ' ' + progress + '%'
});
vimeoUpload.on("vimeouploaderror", function(event){
console.log(event.detail.message, event.detail.error);
});
id: vimeoId,
link: data.link,
name: data.name,
uri: data.uri,
createdTime: data.created_time
vimeoUpload.on("vimeouploadcomplete", function(event){
console.log("Meta data", event.detail);
//Properties returned
//var vimeoId = event.detail.id;
//var link = event.detail.link;
//var name = event.detail.name;
//var uri = event.detail.uri;
//var createdTime = event.detail.created_time;
});
//Start upload
vimeoUpload.start(options);Your access token need to be authorized by Vimeo. Ensure it has an "EDIT" and "UPLOAD" scope. Create new Vimeo access token here.
Check index.html for details and additional parameters you can include when initializing VimeoUpload.
Sample code for uploading files directly with XHR/CORS: cors-upload-sample