Streaming a Video from Google Drive Using HTML5 Video Tag

Using google drive to stream video into html5 player

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.

How to embed videos from Google drive to webpage?

EDIT: September 2022

It seems at some point since this answer was first posted, autoplaying has stopped working. As it currently stands, the video player attempts to autoplay but fails to load, indicating that this is probably a bug. I've not yet found a suitable alternative.

Original Answer

You need to use the Google Drive Embed option. This is the URL you are looking for:
https://drive.google.com/file/d/1pdvh_mEnkXPKA3jivYIpYKTaoukxH5p3Yg/preview

<html>
<head>
</head>
<body>
<iframe width="100%" height="100%" src="https://drive.google.com/file/d/1pdvh_mEnkXPKA3jivYIpYKTaoukxH5p3Yg/preview"></iframe>
</body>
</html>

You can make it autoplay by appending ?autoplay=1 to the URL so it is now https://drive.google.com/file/d/1pdvh_mEnkXPKA3jivYIpYKTaoukxH5p3Yg/preview?autoplay=1.



Related Topics



Leave a reply



Submit