Using google drive to stream video into html5 player - google-drive-api

Question

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?

Answer 1

// 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))
})

Answer 2

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.

Answer 3

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.)

Answer 4

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!!

Answer 5

I might be a bit late to answer, but if anyone's interested, I have written an answer on streaming videos from Google Drive before here. There are a few ways to go about this, but in summary, you will have to do some server-side programming (can be ASP.NET, PHP etc.) if you don't want to use Google Drive's embedded player. Alternatively, if you have large videos that you want to stream that exceed the limit of 100MB, have you looked into HLS (HTTP Live Streaming)? You can create .m3u8 playlists with segments of your video (preferably less than 100MB) and that way, you can stream your videos. I hope my answer helps!