Google drive embed NO iframe

Question

有没有办法在不使用iframe的情况下嵌入google drive视频？

就像你可以对youtube视频做的那样：

<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>

来自google docs (使用iframe)的建议嵌入代码是：

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

Answer 1

这是可能的，但不是官方支持的。

在对Google Drive中嵌入的iframe和YouTube中的iframe生成的结果进行了一些研究之后，我深入研究了YouTube JS Player API，发现使用SWFObject embed是可行的

下面是我用来添加player对象的代码：

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);

}

你需要从Google Drive获取fileId (JS或服务器端，如果你想在Google Drive上托管网站，你可以使用GAS Servlet )。

大多数YouTube播放器参数都有效，并且触发了从JS控制播放状态的事件；因此，Youtube文档中的所有内容基本上都有效。

Answer 2

你的意思是这样的：

<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">

我已经测试了代码，它可以正常工作。

Answer 3

我使用了来自W3Schools的示例代码，但不能将代码粘贴到此处，因为它是他们的copyright，只需跟随链接即可查看。

第二部分是正确链接到图像。我发现直接使用Drive的链接不起作用，所以我在我的网站上创建了一个新页面，并添加了我想要的所有图像。我禁用了该页面的导航功能，因此除非他们使用搜索，否则将无法找到该页面。发布后，我打开页面并在浏览器上使用Inspect查找每个图像的标记。然后我复制了看起来像这样的元素。

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

我将title属性添加到其中，这样就可以看到包含了哪些图像。我还删除了class=的“CENy8b”属性，因为它似乎不是必需的。

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

然后，我将其粘贴到来自W3Schools的代码中的标记上，对每个图像重复此操作。W3Schools代码在图像下面有一个点，以显示正在显示的图像集中的哪个图像。点的数量需要与图像的数量相匹配。

完成以上所有工作后，我从编辑器中复制了代码，并使用Embed code on Sites将其粘贴进去。您可以在网站编辑器中看到图像的滴答声，并且在发布后，它在实时页面上运行良好。

W3Schools代码在图像之间使用2秒的延迟。很容易找到在代码中设置该值的位置，以便将其更改为适合您站点的值。