2

有没有办法在不使用 iframe 的情况下嵌入谷歌驱动器视频？

就像您可以使用 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>
4

3 回答 3

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

}

您需要以fileId某种方式从 Google Drive 获取（JS 或服务器端，如果您想在 Google Drive 上托管站点，可以使用 GAS Servlet）。

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

于 2013-10-05T19:24:14.220 回答
1

你的意思是这样的：

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

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

于 2017-06-19T16:05:33.743 回答
0

我使用了来自W3Schools的示例代码，但由于这是他们的版权，所以无法在此处粘贴代码，只需点击链接即可查看。

第二部分是获取正确的图像链接。我发现直接从云端硬盘使用链接不起作用，所以我在我的网站中创建了一个新页面并添加了我想要的所有图像。我从导航中禁用了该页面，因此除非他们使用搜索，否则无法找到它。发布后，我打开页面并在浏览器上使用 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 秒延迟。很容易找到代码中的设置位置，以将其更改为适合您网站的值。

于 2019-07-18T13:29:02.647 回答