-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathindex.html
164 lines (138 loc) · 5.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<html>
<head>
<title>Upload a video</title>
<link rel="stylesheet" href="style.css">
<script>
var __nspid="isrtzw";
var __nsptags=[];
(function(w, d) { var x = function() {
var j=d.createElement("script");j.type="text/javascript";j.async=true;
j.src="http"+("https:"===d.location.protocol?"s://cs":"://c")+".ns1p.net/p.js?a="+__nspid;
d.body.appendChild(j); }
if(w.addEventListener) { w.addEventListener("load", x, false); }
else if(w.attachEvent) { w.attachEvent("onload", x); }
else { w.onload = x; }
}(window, document));
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N9E9YP1HGF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N9E9YP1HGF');
</script>
</head>
<body>
<p id="title">
Upload a video to api.video
</p>
<br>
<div id="action__upload">
<img id="uploadFile__icon" draggable="false" src = "upload.png">
<br/>
<label for="video-file" id="video-file-label">
Click here to upload a video
</label>
<input type="file" id="video-file" style='display:none'>
</div>
<br>
<br>
<div id="video-information" style="width: 50%"></div>
<div id="chunk-information" style="width: 50%"></div>
<div id="description">
Quickly upload *any* size video to <a href='https://api.video'>api.video</a> using a delegated token. Upon upload, you'll have a link that can be used for sharing.
</div>
<div id="footer">
This app was created with <a href="https://api.video">api.video</a>.<br/>
Get the <a href="https://github.com/dougsillars/blobUpload">sample code</a>, and read about <a href="https://a.video/works/upload-a-video">how we built the demo.</a><br/>
More sample apps can be found at <a href="https://a.video">a.video</a>.
</div>
<script>
const input = document.querySelector('#video-file');
//changed to sandbox, becuase we cannot have nice things
const url ="https://ws.api.video/upload?token=to5PoOjCz98FdLGnsrFflnYo";
var chunkCounter =0;
//break into 1 MB chunks for demo purposes
const chunkSize = 1000000;
var videoId = "";
var playerUrl = "";
input.addEventListener('change', () => {
const file = input.files[0];
const filename = input.files[0].name;
var numberofChunks = Math.ceil(file.size/chunkSize);
document.getElementById("video-information").innerHTML = "There will be " + numberofChunks + " chunks uploaded."
var start =0;
chunkCounter=0;
videoId="";
var chunkEnd = start + chunkSize;
//upload the first chunk to get the videoId
createChunk(videoId, start);
function createChunk(videoId, start, end){
chunkCounter++;
console.log("created chunk: ", chunkCounter);
chunkEnd = Math.min(start + chunkSize , file.size );
const chunk = file.slice(start, chunkEnd);
console.log("i created a chunk of video" + start + "-" + chunkEnd + "minus 1 ");
const chunkForm = new FormData();
if(videoId.length >0){
//we have a videoId
chunkForm.append('videoId', videoId);
console.log("added videoId");
}
//chunkForm.append('file', chunk);
chunkForm.append('file', chunk, filename);
console.log("added file");
//created the chunk, now upload iit
uploadChunk(chunkForm, start, chunkEnd);
}
function uploadChunk(chunkForm, start, chunkEnd){
var oReq = new XMLHttpRequest();
oReq.upload.addEventListener("progress", updateProgress);
oReq.open("POST", url, true);
var blobEnd = chunkEnd-1;
var contentRange = "bytes "+ start+"-"+ blobEnd+"/"+file.size;
oReq.setRequestHeader("Content-Range",contentRange);
console.log("Content-Range", contentRange);
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = Math.round(oEvent.loaded / oEvent.total * 100);
var totalPercentComplete = Math.round((chunkCounter -1)/numberofChunks*100 +percentComplete/numberofChunks);
document.getElementById("chunk-information").innerHTML = "Chunk # " + chunkCounter + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
// console.log (percentComplete);
// ...
} else {
console.log ("not computable");
// Unable to compute progress information since the total size is unknown
}
}
oReq.onload = function (oEvent) {
// Uploaded.
console.log("uploaded chunk" );
console.log("oReq.response", oReq.response);
var resp = JSON.parse(oReq.response)
videoId = resp.videoId;
//playerUrl = resp.assets.player;
console.log("videoId",videoId);
//now we have the video ID - loop through and add the remaining chunks
//we start one chunk in, as we have uploaded the first one.
//next chunk starts at + chunkSize from start
start += chunkSize;
//if start is smaller than file size - we have more to still upload
if(start<file.size){
//create the new chunk
createChunk(videoId, start);
}
else{
//the video is fully uploaded. there will now be a url in the response
playerUrl = resp.assets.player;
console.log("all uploaded! Watch here: ",playerUrl ) ;
document.getElementById("video-information").innerHTML = "all uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a>" ;
}
};
oReq.send(chunkForm);
}
});
</script>
</body>
</html>