Streaming a video from Google Drive using HTML5 video tag

Question

I am trying to stream a 200MB video file from Google Drive. I have already tried embedding a 24MB file that was shared public to everyone and this worked:

<video controls>
    <source src="https://drive.google.com/uc?export=download&id=0B0gf7RQXoPVEa0xCSEhiRG5GNHM" type="video/mp4">
    Oops. HTML 5 video not supported.
</video>

When I navigate to this URL normally in the browser, a security request is shown which I have to accept. I believe this is the problem as it is blocking the download. Maybe I am missing some parameters in the URL? How do I stream larger files without Google Drive blocking the requests?

Answer 1

The method you used above is only valid for a file that is 100MB or smaller. You can actually stream Google Drive video using the HTML 5 video tag regardless of the size. It took me a while to figure this out so here it is:

• Get the shareable link of your video. This can be done by right-clicking the video in Google Drive and clicking the get shareable link button. Copy this link to your clipboard.

• View the video with the shareable link. Just paste the link you obtained from the previous step into your web browser. Please use either Firefox or Chrome for the next few steps.

• Select the quality you want. Use the Google Drive player and select your desired quality like 1080p or 720p. Click play to make sure the quality changed.

• Get the absolute path of the video. Here's the fun part: right-click on the video player and you will see the built-in menu with options like loop and stats for nerds. Right-click again and you will see the browser built-in menu with options like copy video address or save video. Select copy video address and to test it out, paste it in a new tab and see if the video plays.

• Insert the link into your video tag. This is the most satisfying part:

    <video width="1280" height="720" controls>
        <source src="link from Google Drive" type="video/mp4" />
    </video>
  

Alternatively, you can use the network inspection tools that are readily available in the developer tools. They can be accessed by either right-clicking on the web page and selecting inspect element and then clicking on the network tab or by using the built-in browser menus. You may have to refresh the page and start playback before the video comes up in the network tab. Usually, it is categorised as media so you can filter out every request that refers to a media file. From there on, you will see the links to the videos and be able to copy them.

It is important to be aware that each URL is actually associated with the client's IP. This means that the link that you get won't necessarily work on someone else's device. To combat this, you can preload the page where you get the link from for the client and then obtain the source and search for a JSON array starting fmt_map_stream in the Google Drive source. There, you will get four escaped links for 360p, 480p, 720p and 1080p. Copy these links and use them in your video tag. Keep in mind that this process should happen from the server side.

Additionally, I recommend using Google Photos. Google Photos allows for free storage with no limit, given that you allow Photos to compress your videos so that they don't use up your quota on Google Drive. To get started, start by uploading a video file of any size. Then, do the following:

• Create a new album. Name it accordingly and then drag videos or select existing content that you have already uploaded.

• Select the sharing options. In the top-right, there is a sharing button. Selecting that will allow you to get the shareable link of the album. It is crucial to ensure that only YOU can add videos to this album. Ensure that is the case above the generate shareable link.

• Get the shareable link to an individual video. This is simple: right-click the video and copy the address. You should get a format like so: https://photos.google.com/share/SomeId/photo/SomeOtherId?key=AKey

• Get the download link from the server-side. The following example is a C# example that fetches the download link from any of the links in the format above:

    var source = "";
  
    using (var webClient = new WebClient())
    {
        source = webClient.DownloadString(link_from_above);
    }
  
    var chunks = source.Split(',');
    var downloadLink = "";
  
    foreach (var chunk in chunks)
    {
        if (chunk.Contains("video-downloads.googleusercontent.com"))
        {
            downloadLink = chunk.Replace("\"", string.Empty);
  
            Process.Start("iexplore.exe", downloadLink);
        }
    }
  

The code above simply downloads the source code from that link you obtained earlier. Then, it is split by commas since and whatever chunk contains video-downloads.googleusercontent.com is extracted and all " are replaced. In this example, Internet Explorer is launched and the link is parsed. The result would be Internet Explorer asking you to save the video. From here, you can do the following:

<video width="1280" height="720" controls>
    <source src="download link from source" type="video/mp4" />
</video>

You will then be able to stream. You can also stream from VLC. The only downfall is that seeking doesn't always work since the file is technically being downloaded and played at the same time. This method is much easier than Google Drive's.

Alternative Solution

The Google Drive API allows you to upload and download to your Google Drive from the server-side of your web applications and even through command line and desktop applications. There is Python and .NET support and extensive documentation on how to setup your projects.

• Enable Google Drive API. Make sure you are signed into the Google account you wish to stream files from. You can visit this link to enable the Google Drive API.
• Get an API key. By visiting this link, you can generate an API key to access Google Drive. You may be prompted to create a new project.
• Get the file ID. Access Google Drive and find the file you wish to stream. Ensure it is available to the public. Open it in a new tab and copy the file ID. It should like something like this: https://drive.google.com/file/d/<YOUR_FILE_ID>/view
• Call the download link. Your download link should be in this format:

https://www.googleapis.com/drive/v3/files/<YOUR_FILE_ID>?key=<YOUR_API_KEY>&alt=media

This was tested using a 200MB file. The download worked perfectly without any virus scanning interrupting it. Use the above link and add it to the embed code of your site.

Another alternative

You can use M3U8 files to deliver content. You can split your video file into smaller segments using FFmpeg or any similar utility. Ensure that each segment is smaller than 100MB. Upload the segments onto Google Drive and get their shareable links. You can then change the links to their downloadable variants like so:

https://drive.google.com/uc?id=[segment_id]

Change your M3U8 file by changing the links to the Google Drive download links. You can then embed the M3U8 file into your web page like so:

<video width="500" height="400" controls>
    <source src="video.m3u8" type="application/x-mpegURL">
</video>

This method, however, may not always work. To overcome this, you can create a web service that feeds the download stream directly to the user like so:

[ApiController]
[Route("[controller]")]
public class SegmentController : ControllerBase
{
    private static HttpClient Client { get; } = new HttpClient();

    [HttpGet]
    public async Task<FileStreamResult> Get(string id)
    {
        return new FileStreamResult(await Client.GetStreamAsync("https://drive.google.com/uc?id=" + id), new MediaTypeHeaderValue("video/MP2T"))
        {
            FileDownloadName = id + ".ts" // or + ".m2ts", depending on your media
        };
    }
}

Then, you can call this GET request as /segment?id=[GOOGLE_DRIVE_ID]. This method will essentially return the direct download stream to the client with the appropriate headers which allows the video player to stream the playlist correctly. Bare in mind, the above example is for .NET Core.

There are plenty of tutorials on how to produce M3U8 files from existing video clips. I recommend FFmpeg as it is extremely simple to create these files. Apple has a guide on M3U8 available here. Since you are not live streaming, you will need a VOD (video on-demand) playlist. This method is recommended for large videos. If you do not want to compress your large videos, splitting them and delivering them in small segments will help you and you can use Google Drive to host the segments (you will need to remux your videos into .ts or .m2ts in order to split and avoid re-encoding). This is also a fantastic solution for seeking and buffering as direct downloads like the solutions above may not allow you to seek and the links also expire. YouTube uses a similar setup to deliver videos to the client.

Answer 2

I don't think you can directly, but there are services like www-drv.com which act as a proxy and let you expose Google Drive, or OneDrive, content.

I have some concern re their service as the FAQ is a little unclear how much access to the GDrive/OneDrive they require, it's not obvious if you have to let them access from the root down (which would be a no-go for me) or if you can select a single directory (and sub-directories). I'd emailed them in the past asking for clarification but no response ... just wanted to include that caution.