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
HTML5 Canvas - Fill Circle with Image
How to Get Equal Width of Input and Select Fields
Convert Embedded Svg to Png In-Place
Why Is The First Element Always Blank in My Rails Multi-Select, Using an Embedded Array
Same Height Column Bootstrap 3 Row Responsive
Stop Google Chrome Auto Fill The Input
How to Center Buttons in Twitter Bootstrap 3
How to Link to Google Maps with a Particular Longitude and Latitude
Preventing Canvas Clear When Resizing Window
How to Vertically Align a Table in CSS
Div with Horizontal Scrolling Only
How to Communicate Between Frames
Inline Form Nested Within Horizontal Form in Bootstrap 3
R Markdown HTML Number Figures
How to Make a Radio Button Look Like a Toggle Button
What Is The Correct Readonly Attribute Syntax for Input Text Elements