谷歌驱动嵌入没有 iframe答案

【问题标题】：Google drive embed NO iframe谷歌驱动嵌入没有 iframe
【发布时间】：2013-07-22 02:49:33
【问题描述】：

有什么方法可以在不使用 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>

来自谷歌文档的建议嵌入代码（使用 iframe）是：

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

【问题讨论】：

标签： youtube google-drive-api

【解决方案1】：

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

在研究了 Google Drive 嵌入的 iframe 和 YouTube 的 iframe 生成的结果后，我深入研究了 YouTube JS Player API，发现可以使用SWFObject embed

这是我用来添加播放器对象的代码：

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 文档中的任何内容都有效。

【讨论】：

您好，您的脚本还有效吗？我一直在尝试，但它不起作用，你能举个例子吗？谢谢，问候
您好，该方法不起作用主要是因为 SWF 对象使用了在各种浏览器上禁用的 Flash。我不认为现在可以避免使用 Iframe，但在 2016 年夏天之后，当我们出于各种原因（更好的性能、渐进式缓存等）将视频移至 Cloud Storage 之后，我再也没有研究过它。

【解决方案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">

我已经测试了代码并且它可以工作。

【讨论】：

【解决方案3】：

我使用了W3Schools的示例代码，但由于是他们的copyright，所以无法在此处粘贴代码，请点击链接查看。

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

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

我为此添加了标题属性，因此可以查看包含哪些图像。我还删除了 class="CENy8b" 属性，因为它似乎不是必需的。

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

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

完成上述所有操作后，我从编辑器中复制了代码，并在站点上使用嵌入代码将其粘贴。您可以在站点编辑器中看到图像滴答作响，发布后效果很好在实时页面上。

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

【讨论】：