├── composer.json
├── index.php
├── .DS_Store
├── upload.png
├── changelog.md
├── playVideoLocally.html
├── playRemoteVideo.html
├── LICENSE
├── README.md
├── style.css
├── indexNew.html
├── index.html
└── many.html
/composer.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apivideo/blobUpload/HEAD/.DS_Store
--------------------------------------------------------------------------------
/upload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apivideo/blobUpload/HEAD/upload.png
--------------------------------------------------------------------------------
/changelog.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 | All notable changes to this project will be documented in this file.
3 |
4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6 |
7 |
8 |
9 | ## 2021-11-18
10 | ### Added a changelog!!
--------------------------------------------------------------------------------
/playVideoLocally.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Add a video here:
6 |
7 |
8 |
9 | ..and it will playback here, without any upload:
10 |
11 |
12 |
13 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/playRemoteVideo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 api.video
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://twitter.com/intent/follow?screen_name=api_video)
2 |
3 | [](https://github.com/apivideo/blobUpload)
4 |
5 | [](https://community.api.video)
6 |
7 | 
8 |
9 |
api.video upload a videoE
10 |
11 | [api.video](https://api.video) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
12 |
13 | Creating a video uploader with JavaScript and [api.video](https://api.video)
14 |
15 | Videos are very large files, and all servers have a limit on filesize upload. The last thing you want your users to see (after waiting for the file to upload) is a "413: request too large" error.
16 |
17 | The fix is to use the HTML 5 File API to slice the video into smaller bits, and to upload each smaller chunk.
18 |
19 | In this demo, videos are split into 1 MB chunks, but larger sizes are ok (at api.video, we suggest staying under 100MB per chunk).
20 |
21 |
22 | ## Getting started
23 |
24 | All HTML5 and vanilla JS.
25 |
26 | All you need is a delegated upload token from [api.video](https://api.video). Replace the token parameter in the variable ```url```, nad your own version will be running in no time.
27 |
28 | [delegated upload docs](https://docs.api.video/reference#videos-delegated-upload)
29 |
30 | ## Test it out!
31 |
32 | [upload.a.video](https://upload.a.video)
33 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {background-color: white;
2 | color:white;
3 |
4 | text-align: center;
5 |
6 | }
7 | #title{
8 | width:50%;
9 |
10 | margin: auto;
11 | text-align: center;
12 | border-radius: 25px;
13 | padding-top: 30px;
14 | color: #fa5B30;
15 | font-size: x-large;
16 |
17 | }
18 |
19 | #action__upload{
20 | margin: auto;
21 | text-align: center;
22 | width: 50%;
23 | height: 30%;
24 | padding:10px;
25 |
26 |
27 | }
28 | #uploadFile__icon{
29 | margin: auto;
30 | vertical-align: center;
31 | padding: 20px;
32 | text-align: center;
33 |
34 | }
35 | #video-file-label{
36 | background-color: #fa5B30;
37 | width:50%;
38 | height: 30%;
39 | margin: auto;
40 | display: inline-block;
41 | text-align: center;
42 | border-radius: 25px;
43 | padding-top: 30px;
44 | font-size: large;
45 | }
46 | #video-information{
47 | width:50%;
48 | height: 10%;
49 | margin: auto;
50 | text-align: center;
51 | border-radius: 25px;
52 | padding-top: 30px;
53 | color: #fa5B30;
54 | font-size: x-large;
55 |
56 | }
57 | #chunk-information{
58 | width:50%;
59 | height: 10%;
60 | margin: auto;
61 | text-align: center;
62 | border-radius: 25px;
63 | padding-top: 30px;
64 | color: #fa5B30;
65 | font-size: x-large;
66 |
67 | }
68 | #description{
69 | width:50%;
70 | height: 10%;
71 | margin: auto;
72 | text-align: center;
73 | border-radius: 25px;
74 | padding-top: 30px;
75 | color: #fa5B30;
76 | font-size: x-large;
77 |
78 | }
79 | #footer{
80 | font-size: large;
81 | color: black;
82 | padding:10px;
83 | }
--------------------------------------------------------------------------------
/indexNew.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Upload a video
4 |
5 |
6 |
7 |
8 |
9 |
15 |
16 |
17 |
18 |
19 | Upload a video to api.video
20 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Quickly upload *any* size video to api.video using a delegated token. Upon upload, you'll have a link that can be used for sharing.
38 |
39 |
25 |