javascript - Uploading a video to youtube from browser - Stack Overflow

admin管理员组

文章数量:1317915

Im OK authorized.

I have 2 button's like this on my page:

<input type="file" id="fileToSend"/>
<input type="button" onclick="upload()" value="Upload" id="btnSend"/>

I want to upload the selected file to youtube when I click the "Upload" button. Im calling a function like this:

function upload() {
    var fileStream;
    var video = document.getElementById("fileToSend");
    var file = video.files[0];
    console.log(file);
    console.log("Nombre: " + file.name);
    var r = new FileReader();
    r.onload = function () {
        console.log("fileStream creado");
        fileStream = r.result;
        //console.log("FileStream: " + fileStream);
    };

    console.log("Creando fileStream..");
    r.readAsBinaryString(file);


    gapi.client.load('youtube', 'v3',
        function() {
            var request = gapi.client.youtube.videos.insert({
                part: 'snippet, status',
                resource: {
                    snippet: {
                        title: 'Video Test Title 5',
                        description: 'Video Test Description',
                        tags: ['Tag 1', 'Tag 2'],
                        categoryId: "22"
                    },
                    status: {
                        privacyStatus: "private"
                    }
                }
            }, fileStream);
            request.execute(function (response) {
                console.log("executing..");
                var result = response.result;
                console.log(response);
                if (result) {
                    console.log("execute pleted");
                    document.write(result);
                }
            });
        });
}

The problem is I get al error on the response object, "mediaBodyRequired", It's like I'm not sending the fileStream correctly.

Im OK authorized.

I have 2 button's like this on my page:

<input type="file" id="fileToSend"/>
<input type="button" onclick="upload()" value="Upload" id="btnSend"/>

I want to upload the selected file to youtube when I click the "Upload" button. Im calling a function like this:

function upload() {
    var fileStream;
    var video = document.getElementById("fileToSend");
    var file = video.files[0];
    console.log(file);
    console.log("Nombre: " + file.name);
    var r = new FileReader();
    r.onload = function () {
        console.log("fileStream creado");
        fileStream = r.result;
        //console.log("FileStream: " + fileStream);
    };

    console.log("Creando fileStream..");
    r.readAsBinaryString(file);


    gapi.client.load('youtube', 'v3',
        function() {
            var request = gapi.client.youtube.videos.insert({
                part: 'snippet, status',
                resource: {
                    snippet: {
                        title: 'Video Test Title 5',
                        description: 'Video Test Description',
                        tags: ['Tag 1', 'Tag 2'],
                        categoryId: "22"
                    },
                    status: {
                        privacyStatus: "private"
                    }
                }
            }, fileStream);
            request.execute(function (response) {
                console.log("executing..");
                var result = response.result;
                console.log(response);
                if (result) {
                    console.log("execute pleted");
                    document.write(result);
                }
            });
        });
}

The problem is I get al error on the response object, "mediaBodyRequired", It's like I'm not sending the fileStream correctly.

• javascript
• upload
• youtube-api
• youtube-javascript-api

Share Improve this question Follow asked Jun 3, 2013 at 5:19 Nicolas SaulNicolas Saul 14122 silver badges1111 bronze badges 5

• 1 You find the problem? If so, share your plete code because that's exactly what I'm trying to do. – offset Commented Jul 17, 2013 at 8:34
• I get error: "Uncaught ReferenceError: gapi is not defined." why? – offset Commented Jul 17, 2013 at 8:40
• I ended up using the v2 API. If I find a solution using v3 I will post it. – Nicolas Saul Commented Jul 19, 2013 at 14:36
• 2 shouldn't the gapi call be done in the onload function of the media ? Else the fileStream is not necessary all loaded and the youtube API does not like that. – dievardump Commented Jul 21, 2013 at 23:58
• Move the gapi.client.load() call to inside the r.onload = function () { block, as dievardump said. It should either work or get you one step closer. – Brock Adams Commented Jul 24, 2013 at 10:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +50

Is there a reason you can't just use the YouTube upload widget?
https://developers.google./youtube/youtube_upload_widget

Anyways, straight from the API reference
https://developers.google./youtube/v3/docs/videos/insert

badRequest  mediaBodyRequired   The request does not include the video content.

Another resource:
https://developers.google./api-client-library/javascript/samples/samples

There are two options for using v3 insert. The request must either:

1. have the media file as the body which precludes sending any other POST parameters, or
2. use multipart form encoding in two parts. One part is the file to upload and the other part is a file-like JSON blob that includes any parameters you want to send.

I never did get this working using the official JavaScript client, but wrote up a pretty detailed explanation of how this can work using regular XmlHttpRequest: http://lithostech./2013/10/upload-google-youtube-api-v3-cors/

Here's an example of the first method where the file itself is the whole request body:

// where videoFile is a http://www.w3/TR/FileAPI/#dfn-file
var invocation = new XMLHttpRequest();
invocation.setRequestHeader('Authorization', 'Bearer ' + token);
invocation.open('POST', "https://www.googleapis./upload/youtube/v3/videos?part=snippet", true);
invocation.send(videoFile);

本文标签： javascriptUploading a video to youtube from browserStack Overflow