Question

有没有办法在不使用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>

来自Google文档（使用iframe）的建议嵌入代码为：

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

Answer 1

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

在对来自Google云端硬盘嵌入的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云端硬盘获取fileId一些方法（JS或服务器端，如果您想在Google云端硬盘上托管该网站，则可以使用GAS Servlet）。

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

Answer 2

我使用了W3Schools中的示例代码，但是无法将代码粘贴到此处，因为它们是他们的copyright，只需点击链接即可查看。

第二部分是正确链接到图像。我发现直接使用来自云端硬盘的链接无效，因此我在网站上创建了一个新页面并添加了所有想要的图像。我禁止了该页面的导航，因此除非他们使用搜索，否则不会找到该页面。发布后，我打开页面，并在浏览器中使用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代码在图像下方有一个点，以显示正在显示集合中的哪个图像。点数必须与图像数匹配。

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

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

Answer 3

你的意思是这样的：

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

我已经测试了代码，但它确实有用。

谷歌硬盘嵌入了NO iframe

3 个答案: