HTML5 Video Streaming from Google Drive

A method for serving HTML5 video on your website via Google Drive, saving bandwidth and reducing server load.

Streaming a video is probably the highest bandwidth activity a visitor will perform on your website. This data usage can add up quickly, and if your web hosting provider tracks and limits monthly bandwidth usage, which most do, it’s very important to find another delivery source. This is where Google Drive comes in.

This method has been tested with all popular web browsers, including Chrome, Firefox, Safari, Internet Explorer and Edge.

Sharing on Google Drive

It’s important to share the video for public viewing. I created a public folder on my Google Drive, so I can easily track and manage my public files.

To share the video:

  1. Select the video
  2. Choose the Share Icon (person with a +)
  3. Choose "Get Link" and ensure anyone with the link to view is selected.
  4. Copy the link (should look something like this https://drive.google.com/file/d/a5b4c5d2e1/view?usp=sharing)

Your video can now be viewed by any person or application with the link. Open it in an incognito window to be sure it’s publicly viewable.

From the link you can extract the ID of the video, in the above example it’s a5b4c5d2e1 for demo purposes only. This is what you will need to insert in the html below.

The HTML

Use the HTML below but be sure to replace the id with your videos id (from the URL you saved), e.g. “a5b4c5d2e1”.

<video preload="true" autoplay loop muted>
  <!-- Safari -->
  <source
    src="https://drive.google.com/uc?export=download&amp;id=a5b4c5d2e1"
    type="video/mp4"
  />
  <!-- Chrome and FF -->
  <source
    src="https://drive.google.com/uc?export=download&amp;id=a5b4c5d2e1"
    type="video/webm"
  />
</video>Code language: HTML, XML (xml)

Summary

While there are many potential ways to outsource your video streaming demands, using Google Drive offers an easy and cost effective solution.


If you found this article helpful or if you’ve come up with an improvement or alternative method, I’d love to hear from you in the comment section below.

7 Replies to “HTML5 Video Streaming from Google Drive”

  1. This doesn’t work if the video is larger than 100mb. Because in that case google returns an HTML page saying “Google Drive cannot scan that big file.”

  2. This article has been tested and adjusted. The only changes needed were relating to Google Drive sharing process and the resulting URL format. The method works perfectly in July 2020, and it should continue to work for the foreseeable future.

    1. Hi Marsha, I’m not sure I understand the question, do you want to have a set of videos from which a random one is selected and played each time the page loads? If this is the case, you could create an javascript array of play Ids and then have the Id property in the source randomly populated from the array. Hope this helps!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.