Using google drive to stream video into html5 player

问题

I tried to use google drive as a place to host videos, but whenever I try to use the video as a source, google never returns anything. (Not even a http response)

Example video player

<video>
  <source 
    src="https://www.googleapis.com/drive/v3/files/<file_id>/?alt=media&key=<api_key>" 
    type="video/mp4"
  />
</video>

If I enter the url in the browser it successfully prompts me for permission to download.

Does anybody have any idea what to do?

回答1:

Short answer: Nope

Longer answer: Oh boy. I spent quite a long time trying to figure this one out myself! I'm working on a project called DriveStream, that aims to use purely JavaScript and Apps Script to make an organised video library of a Drive account.

The project itself works fine, but implementing video streaming did not go anywhere near as planned. I tried a few different methods. One similar to yours and the other involving getting the downloadUrl property of a file and parsing the html of the download prompt page to give me a direct link to the file. I can initiate a download of that file, and that can be seen in the network requests, but there is no way to get it to stream into a video container.

The reason that doesn't work is due to the limitations of AJAX. It can return the data from a video, but there seems to be no way to funnel that data into a video container.

In the end, I've had to compensate by having the 'Play' button of each video only link to the preview video.

https://drive.google.com/file/d/fileId/preview

It's not a bad workaround, as it can play up to 1080p encodes of anything you upload.

回答2:

This should work:

<video>
    <source src="https://drive.google.com/uc?export=download&id=file_ID" type='video/mp4'>
</video>

Replace "file_ID" in the link with your video ID. (to find it - right click on the Google Drive video, get shareable link. The file should be shared in order to access the file.)

It plays the source video. If you would like to change quality or to use unsupported codecs it's not easy to get google drive stream/converted files as said in previous answer. (Ajax will not let you get the link because of CORS and PHP is server side and the link contains an IP address so will not be accessible directly from client side.)

回答3:

It's a long answer I will try to shorten it up..

Upload your file to the drive and using the share option make it public.
Then click on the preview option, and it will open a new tab.
Look for the vertical 3 dots (top right corner) leading to a sub-menu and select open in a new window.
As soon as you get to the new window click on the vertical 3 dots (top right corner) and this time you will see an 'Embed item' option click it.
You will get the iframe code now include it your webpage or website.

Just give it a try once!!! I hope this helps thank you!!

回答4:

// This works...
<video src="https://www.googleapis.com/drive/v3/files/fileID?alt=media&key=apiKey">

// But, even better if you have access to a worker or can otherwise output the file through a script (and modify resonse headers)
async function getFile(request) {
    let response = await fetch('https://www.googleapis.com/drive/v3/files/fileID?alt=media&key=apiKey', request)
    response = new Response(response.body, response)
    response.headers.set('Accept-Ranges', 'bytes') // Allow seeking, not necessarily enabled by default
    response.headers.set('Content-Disposition', 'inline') // Disable Google's attachment (download) behaviour, display directly in browser or stick into video src instead
    return response
}
addEventListener('fetch', event => {
    event.respondWith(getFile(event.request))
})

来源：https://stackoverflow.com/questions/51456140/using-google-drive-to-stream-video-into-html5-player

标签

google-drive-api

html5-video

httprequest