{"_id":"5697f7a60b09a41900b245d7","project":"564de2dbfe07a81700b5c3a5","user":"568c2f46e111c70d002d84b6","version":{"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z","categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"5666dac5d784a70d00397bcb","__v":8,"pages":["5666dda06819320d000c2e19","567856b9e5da8d0d00591c66","567861b8e5da8d0d00591c7c","568bdbf9e3e30f0d0021e07c","568be56983d2061900d86ce9","5697f7a60b09a41900b245d7","56abb8b49327b30d00f7c234","56d088977c2e100b000af8f0"],"project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-08T13:27:33.662Z","from_sync":false,"order":4,"slug":"tutorials","title":"Tutorials"},"parentDoc":null,"__v":13,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-14T19:31:50.923Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"The Video API lets you build your own video service into your site by providing tools to integrate video uploading and playing. In this tutorial we'll go step by step in getting started. You can skip to the bottom to see the demo in the JSFiddle, which includes customizing the button, polling for status, and embedding the video. \n\nThe video below gives an overview of the Video API and getting started with it. For more details, you can follow the following tutorial. \n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Furl%3Dhttp%253A%252F%252Fv.embedly.com%252FIaJcsEMI%26key%3D64e916cf211846cc92c04e787ee81fe4%26type%3Dtext%2Fhtml%26schema%3Dembio&url=http%3A%2F%2Fv.embedly.com%2FIaJcsEMI&image=http%3A%2F%2Fv.embedly.com%2Fproduction%2FIaJcsEMI%2Fthumbnails%2Fthumbnail_5.png&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=embedly\\\" width=\\\"640\\\" height=\\\"360\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"http://v.embedly.com/IaJcsEMI\",\n  \"title\": null,\n  \"favicon\": \"http://v.embedly.com/static/images/favicon.ico\",\n  \"image\": \"http://v.embedly.com/production/IaJcsEMI/thumbnails/thumbnail_5.png\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Activate Video in your Embedly Dashboard\"\n}\n[/block]\nIf you haven't already, [sign up](https://app.embed.ly/signup) to create an account. Click the *Video* tab and follow the instructions to activate video. Under API you can find your API key. You're automatically added to the free version. Note that for the free version \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Your First Upload\"\n}\n[/block]\nFirst find a movie, any format will work. If you don't have one at hand, you can download this short clip: http://bit.ly/1ZnoMG1, and use it for the upload examples. \n\nFirst we'll upload video through the [Embedly dashboard](app.embed.ly/). Head to the video section and click the 'Upload' button.  The selected video will be uploaded and added to your list of videos. You can manage the video, get the link, and the embed code from there.\n\nThe goal is to integrate video, so you can upload and serve directly from your site.  The next step will be to programmatically upload video. Get your API key from the API section of the dashboard. The first call will be via command line. Open up your terminal and make the following call, adding your API key and the specific file path for the movie. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"curl 'https://upload.embed.ly/1/video?key=YOUR_API_KEY' -F video_file=:::at:::upload.mp4 -v\",\n      \"language\": \"curl\",\n      \"name\": null\n    }\n  ]\n}\n[/block]\nYou'll see a success message in the JSON response. Navigate back to your Embedly dashboard and head to the Videos tab. You'll the video you just pushed right there. You can edit the details and see it's status. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Make a Video Upload Button\"\n}\n[/block]\nNext up we'll make an upload button for videos. The upload consists of a form and a submission. \nHere you'll see the HTML for the form post and submission. Add your API key and upload a video but choosing one and clicking submit. The percentage upload is logged in the console.  You can see the video uploaded in your Embedly dashboard. \n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fubnf57r3%2F&src=https%3A%2F%2Fjsfiddle.net%2Fubnf57r3%2Fembedded%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"400\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/ubnf57r3/\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\nWhile this is a great place to start, there are a few things to make it better. \n * Customize the look of the button. \n * Automatically submit after a video is selected, instead of selecting and then submitting. \n * Display the percentage upload. \n * Display the iFrame only when the video is finished processing. \n\nThe demo below makes these improvements. You can make a custom button with HTML and trigger the form buttons when your custom button is clicked. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<form action=\\\"https://upload.embed.ly/1/video?key=YOUR_API_KEY\\\" method=\\\"POST\\\" enctype=\\\"multipart/form-data\\\" name=\\\"upload_form\\\">\\n  <div id=\\\"upload-button\\\" class=\\\"button\\\">Upload Video</div>\\n  <div id=\\\"upload-input\\\">\\n    <input id=\\\"video_file\\\" name=\\\"video_file\\\" type=\\\"file\\\">\\n  </div>\\n</form>\",\n      \"language\": \"html\"\n    },\n    {\n      \"code\": \"$(\\\"#upload-button\\\").click(function(e) {\\n    $('#video_file').click();\\n  })\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n A change event on the form triggers the form submission, no need for two clicks. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"  $(\\\"#video_file\\\").change(function(e) {\\n    $(\\\"form[name='upload_form']\\\").submit();\\n    e.preventDefault();\\n  })\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe progress of the upload is displayed, and there is polling of the status endpoint to determine when the video is done processing. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"//Query the status endpoint \\nvar call = \\\"https://upload.embed.ly/1/status?key=\\\" + emb_key + \\\"&video_id=\\\" + data.video_id;\\n\\npollForFinished(call, function(){renderIframe(data);});\\n\\nvar checkProcessed = function(_call, cb) {\\n  $.ajax({\\n    url: _call,\\n    type: 'GET',\\n    success: function(d) {\\n      cb(d);\\n    },\\n    error: function(d) {\\n      console.log('error!' + JSON.stringify(d));\\n      cb(d);\\n    }\\n  });\\n}\\n\\nvar pollForFinished = function(_call, cb) {\\n  checkProcessed(_call, function(res) {\\n    if (res.status == \\\"finished\\\") {\\n      cb();\\n    } \\n    else if(res.status == \\\"cancelled\\\" || res.status ==\\\"failed\\\"){\\n\\t\\t   $(\\\".video-display\\\").html('<h1>Video</h1><p>' + res.status + '</p>');\\n\\t\\t}\\n    else {\\n      setTimeout(pollForFinished(_call,cb), 10000);\\n    }\\n  });\\n}\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou can see the full demo below, and see the [API documentation](doc:video).\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fsnvfyz82%2F4%2F&src=https%3A%2F%2Fjsfiddle.net%2Fsnvfyz82%2F4%2Fembedded%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"400\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/snvfyz82/4/\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]","excerpt":"Get started with Embedly's Video API with this tutorial.","slug":"video-upload-button","type":"basic","title":"Video Upload Button"}

Video Upload Button

Get started with Embedly's Video API with this tutorial.

The Video API lets you build your own video service into your site by providing tools to integrate video uploading and playing. In this tutorial we'll go step by step in getting started. You can skip to the bottom to see the demo in the JSFiddle, which includes customizing the button, polling for status, and embedding the video. The video below gives an overview of the Video API and getting started with it. For more details, you can follow the following tutorial. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Furl%3Dhttp%253A%252F%252Fv.embedly.com%252FIaJcsEMI%26key%3D64e916cf211846cc92c04e787ee81fe4%26type%3Dtext%2Fhtml%26schema%3Dembio&url=http%3A%2F%2Fv.embedly.com%2FIaJcsEMI&image=http%3A%2F%2Fv.embedly.com%2Fproduction%2FIaJcsEMI%2Fthumbnails%2Fthumbnail_5.png&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=embedly\" width=\"640\" height=\"360\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "http://v.embedly.com/IaJcsEMI", "title": null, "favicon": "http://v.embedly.com/static/images/favicon.ico", "image": "http://v.embedly.com/production/IaJcsEMI/thumbnails/thumbnail_5.png" } [/block] [block:api-header] { "type": "basic", "title": "Activate Video in your Embedly Dashboard" } [/block] If you haven't already, [sign up](https://app.embed.ly/signup) to create an account. Click the *Video* tab and follow the instructions to activate video. Under API you can find your API key. You're automatically added to the free version. Note that for the free version [block:api-header] { "type": "basic", "title": "Your First Upload" } [/block] First find a movie, any format will work. If you don't have one at hand, you can download this short clip: http://bit.ly/1ZnoMG1, and use it for the upload examples. First we'll upload video through the [Embedly dashboard](app.embed.ly/). Head to the video section and click the 'Upload' button. The selected video will be uploaded and added to your list of videos. You can manage the video, get the link, and the embed code from there. The goal is to integrate video, so you can upload and serve directly from your site. The next step will be to programmatically upload video. Get your API key from the API section of the dashboard. The first call will be via command line. Open up your terminal and make the following call, adding your API key and the specific file path for the movie. [block:code] { "codes": [ { "code": "curl 'https://upload.embed.ly/1/video?key=YOUR_API_KEY' -F video_file=@upload.mp4 -v", "language": "curl", "name": null } ] } [/block] You'll see a success message in the JSON response. Navigate back to your Embedly dashboard and head to the Videos tab. You'll the video you just pushed right there. You can edit the details and see it's status. [block:api-header] { "type": "basic", "title": "Make a Video Upload Button" } [/block] Next up we'll make an upload button for videos. The upload consists of a form and a submission. Here you'll see the HTML for the form post and submission. Add your API key and upload a video but choosing one and clicking submit. The percentage upload is logged in the console. You can see the video uploaded in your Embedly dashboard. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fubnf57r3%2F&src=https%3A%2F%2Fjsfiddle.net%2Fubnf57r3%2Fembedded%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/ubnf57r3/", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block] While this is a great place to start, there are a few things to make it better. * Customize the look of the button. * Automatically submit after a video is selected, instead of selecting and then submitting. * Display the percentage upload. * Display the iFrame only when the video is finished processing. The demo below makes these improvements. You can make a custom button with HTML and trigger the form buttons when your custom button is clicked. [block:code] { "codes": [ { "code": "<form action=\"https://upload.embed.ly/1/video?key=YOUR_API_KEY\" method=\"POST\" enctype=\"multipart/form-data\" name=\"upload_form\">\n <div id=\"upload-button\" class=\"button\">Upload Video</div>\n <div id=\"upload-input\">\n <input id=\"video_file\" name=\"video_file\" type=\"file\">\n </div>\n</form>", "language": "html" }, { "code": "$(\"#upload-button\").click(function(e) {\n $('#video_file').click();\n })\n", "language": "javascript" } ] } [/block] A change event on the form triggers the form submission, no need for two clicks. [block:code] { "codes": [ { "code": " $(\"#video_file\").change(function(e) {\n $(\"form[name='upload_form']\").submit();\n e.preventDefault();\n })", "language": "javascript" } ] } [/block] The progress of the upload is displayed, and there is polling of the status endpoint to determine when the video is done processing. [block:code] { "codes": [ { "code": "//Query the status endpoint \nvar call = \"https://upload.embed.ly/1/status?key=\" + emb_key + \"&video_id=\" + data.video_id;\n\npollForFinished(call, function(){renderIframe(data);});\n\nvar checkProcessed = function(_call, cb) {\n $.ajax({\n url: _call,\n type: 'GET',\n success: function(d) {\n cb(d);\n },\n error: function(d) {\n console.log('error!' + JSON.stringify(d));\n cb(d);\n }\n });\n}\n\nvar pollForFinished = function(_call, cb) {\n checkProcessed(_call, function(res) {\n if (res.status == \"finished\") {\n cb();\n } \n else if(res.status == \"cancelled\" || res.status ==\"failed\"){\n\t\t $(\".video-display\").html('<h1>Video</h1><p>' + res.status + '</p>');\n\t\t}\n else {\n setTimeout(pollForFinished(_call,cb), 10000);\n }\n });\n}\n", "language": "javascript" } ] } [/block] You can see the full demo below, and see the [API documentation](doc:video). [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fsnvfyz82%2F4%2F&src=https%3A%2F%2Fjsfiddle.net%2Fsnvfyz82%2F4%2Fembedded%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/snvfyz82/4/", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block]