Stream video from Google Drive in HTML 5 video tag

问题

How is it possible to stream a larger (200MB) video file from google drive?

What I have done.

• Tested with a 24MB File and it works.

• File is shared public for everyone on the web

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

When I call this url normally in the browser a security request is shown which I have to accept.

I think thats exactly the problem, where it blocks.

May it is possible to send more than only export and id query parameters?

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/43880756/stream-video-from-google-drive-in-html-5-video-tag