Google drive embed NO iframe

问题:

Is there any way to embed google drive video without using iframes?

Just like you can do with youtube video:

<object width="320" height="180">
          <param name="movie" value="http://www.youtube.com/v/UHk6wFNDA5s&amp;showinfo=0">
          <param name="wmode" value="transparent">
          <embed src="http://www.youtube.com/v/UHk6wFNDA5s&amp;showinfo=0" type="application/x-shockwave-flash" wmode="transparent" width="320" height="180">
</object>

The suggested embed code from google docs (using iframe) is:

<iframe src="https://docs.google.com/file/d/0B7CQ5XvLuIGrQlJUNUhpQVltZ0U/preview" width="640" height="385"></iframe>

回答1:

It's possible but not officially supported.

After some study of the result generated by the iframe embed from Google Drive and the iframe from YouTube I've digged into the YouTube JS Player API and found out that it's possible using SWFObject embed

Here is the code that I use to add the player object:

function YT_createPlayer(divId, videoId) {

    var params = {
        allowScriptAccess: "always"
    };

    var atts = {
        id: videoId
    };

    //Build the player URL SIMILAR to the one specified by the YouTube JS Player API
    var videoURL = '';
    videoURL += 'https://video.google.com/get_player?wmode=opaque&ps=docs&partnerid=30'; //Basic URL to the Player
    videoURL += '&docid=' + videoId; //Specify the fileID ofthe file to show
    videoURL += '&enablejsapi=1'; //Enable Youtube Js API to interact with the video editor
    videoURL += '&playerapiid=' + videoId; //Give the video player the same name as the video for future reference
    videoURL += '&cc_load_policy=0'; //No caption on this video (not supported for Google Drive Videos)


    swfobject.embedSWF(videoURL,divId, widthVideo, heightVideo, "8", null, null, null, null);

}

You need to fetch the fileId from Google Drive some how (JS or server side, you can use a GAS Servlet if you want to host the site on Google Drive).

Most of the YouTube Player Parameters works, and events to control the playing status from JS are fired; so basically anything from the Youtube Documentation works.

回答2:

Do you mean like this:

<object width="420" height="315" data="https://docs.google.com/file/d/0B7CQ5XvLuIGrQlJUNUhpQVltZ0U/preview">

<embed width="420" height="315" src="https://docs.google.com/file/d/0B7CQ5XvLuIGrQlJUNUhpQVltZ0U/preview">

I have tested the code and it works.

回答3:

I used the example code from W3Schools, but cannot paste the code here as it is their copyright, just follow the link to see it.

The second part is to get the link to the images correct. I found using the link directly from Drive didn't work, so I created a new page in my site and added all the images I wanted. I disabled the page from navigation so it wouldn't be found unless they use search. After publishing, I opened the page and used Inspect on the browser to find the tag for each image. I then copied the element which looked like this.

<img src="https://lh3.googleusercontent.com/qt ... 4jM=w1175" class="CENy8b" role="img" style="width: 100%; margin: 0%">

I added the title attribute to this, so it is possible to see which images are included. I also removed the class="CENy8b" attribute as it doesn't seem to be required.

<img src="https://lh3.googleusercontent.com/qt ... 4jM=w1175" role="img" style="width: 100%; margin: 0%" title = "image 1">

I then pasted this over the tag in the code from W3Schools, repeating for each of the images. The W3Schools code has a where they have dots under the images to show which image from the set is being displayed. The number of dots needs to match the number of images.

Having done all the above I copied the code from the editor and used Embed code on Sites to paste it in. You can see the images ticking over in the Sites editor and after publishing it works fine on the live page.

The W3Schools code uses a 2 s delay between images. It is fairly easy to find where this is set in the code to change it to an appropriate value for your site.