CODEWITHSUNDEEP
htmlvideostreaminggoogle-drive-api
Šime Vidas
Šime Vidas

Reputation: 186063

Issue when trying to stream a video from Google Drive inside HTML5 <video>

This is my code:

<video preload="metadata" controls>
  <source 
    src="https://googledrive.com/host/0B5i16Q7VQGPdaWozX0hORUFXVWc/video.mp4" 
    type="video/mp4"></source>
</video>

Live demo: http://jsfiddle.net/simevidas/E782R/4/

Live demo (fullpage): http://jsfiddle.net/simevidas/E782R/4/show/light/

If you're wondering where the URL is coming from, it's provided by Google Drive (right click on video -> "Details and activity").

enter image description here

I've put the video in a publicly shared folder. You can open the folder and then click on the video. It will start playing in a web player.

The problem is that my code does not work for some reason. Open my demo in Chrome and check the Network panel in the browser's DevTools. You will see that the request is canceled:

enter image description here

What's going on here? What am I missing?

Upvotes: 2

Views: 6406

Answers (4)

Andrew
Andrew

Reputation: 63

I believe the video itself has to be in html5 format for it to play using an html5 player. here's a link to more info 'convert any video to html5'

Upvotes: 3

panac
panac

Reputation: 1

Google Drive has some kind of bug or "feature" with hotlinking mp4 files. I'm guessing this is something intentional to force you to use the video sharing feature of Drive, so that they can save bandwidth, but I don't know. They always 403 after a while. You could try using webm, apparently it doesn't happen with webm files.

Upvotes: 0

JaffaTheCake
JaffaTheCake

Reputation: 14917

Create a folder

Create a folder

Call it anything

Name folder

Share the folder

Share folder

...as public on the web. Note the id= part of the url

Share as public

Upload content to folder. It's now hosted at https://googledrive.com/host/[folder id]/[filename], eg https://googledrive.com/host/0B28BnxIvH5DuVTRZUHdueFl2ZFk/hello.html

Upvotes: 1

Svetlin Mladenov
Svetlin Mladenov

Reputation: 4467

I tried to get the video using curl but the server returned 403 Forbidden. Probably the same is happening inside the browser.

That link you have is probably the wrong link (when used the server probably expects session cookies and what not). Try with the share link. To get the share link click the share button, then click change, then Public on the web and then copy the links that is at the top of the dialog box. This worked for me.

Upvotes: -1

Related Questions