Search code examples
htmlvideogoogle-drive-api

GET (googledrive-file) net::ERR_CONNECTION_TIMED_OUT

I'm trying to use a video I uploaded in googledrive, the link is an open acces to anyone as a viewer, in my HTML project but what I have back is an error. When i click on it it says i need to open it with an app, because they are 'analysing the video' since few hours. https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing In the HTML I put:

<video controls autoplay width="320" height="240">
        <source src="https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing" type="video/mp4">
    </video>

and it doesn't show nothing. In the console logs I got :

ERROR : GET https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing net::ERR_CONNECTION_TIMED_OUT

What am I doing wrong?

Solution

  • Try adding

    • Replace /file/d/ with /u/0/uc?id=
    • Replace ending /view?usp=sharing with &export=download

    Input is:

    Output for usage in <video> tag:

    Example code:

    <!DOCTYPE html>
<html>
<body>

<video id="background-video" autoplay loop muted poster="./assets/clouds_HP.jpg">
<source src="https://drive.google.com/u/0/uc?id=1vJgksW011ngQpyBV7xdrJid3X4cLFza_&export=download" type="video/mp4">
</video>

</body>

<script>

var vid = document.getElementById("background-video");
vid.addEventListener('click', function(evt) { handle_Click (evt) } );

function handle_Click (evt)
{
     //alert("clicked object ID is : " + evt.target.id);
     vid.muted = false;
}

</script>

</html>