【问题标题】:Using google drive to stream video into html5 player使用 google drive 将视频流式传输到 html5 播放器
【发布时间】:2018-07-21 12:36:49
【问题描述】:

我尝试使用谷歌驱动器作为托管视频的地方,但每当我尝试使用视频作为来源时,谷歌从不返回任何内容。 (甚至没有 http 响应)

视频播放器示例

<video>
  <source 
    src="https://www.googleapis.com/drive/v3/files/<file_id>/?alt=media&key=<api_key>" 
    type="video/mp4"
  />
</video>

如果我在浏览器中输入网址,它会成功提示我允许下载。

有人知道该怎么做吗?

【问题讨论】:

    标签: google-drive-api html5-video httprequest


    【解决方案1】:
    // This works...
    <video src="https://www.googleapis.com/drive/v3/files/fileID?alt=media&key=apiKey">
    
    // But, even better if you have access to a worker or can otherwise output the file through a script (and modify resonse headers)
    async function getFile(request) {
        let response = await fetch('https://www.googleapis.com/drive/v3/files/fileID?alt=media&key=apiKey', request)
        response = new Response(response.body, response)
        response.headers.set('Accept-Ranges', 'bytes') // Allow seeking, not necessarily enabled by default
        response.headers.set('Content-Disposition', 'inline') // Disable Google's attachment (download) behaviour, display directly in browser or stick into video src instead
        return response
    }
    addEventListener('fetch', event => {
        event.respondWith(getFile(event.request))
    })
    

    【讨论】:

      【解决方案2】:

      简答:

      更长的答案:哦,男孩。我花了很长时间试图自己解决这个问题!我正在开发一个名为 DriveStream 的项目,该项目旨在使用纯 JavaScript 和 Apps 脚本来制作一个有组织的云端硬盘帐户视频库。

      项目本身运行良好,但实施视频流并没有按计划进行。我尝试了几种不同的方法。一个与您的相似,另一个涉及获取文件的downloadUrl 属性并解析下载提示页面的 html 以提供指向该文件的直接链接。我可以启动该文件的下载,这可以在网络请求中看到,但没有办法让它流式传输到视频容器中。

      不起作用的原因是由于 AJAX 的限制。它可以从视频中返回数据,但似乎没有办法将这些数据汇集到视频容器中。

      最后,我不得不通过将每个视频的“播放”按钮仅链接到预览视频来进行补偿。

      https://drive.google.com/file/d/fileId/preview
      

      这不是一个糟糕的解决方法,因为它可以播放您上传的任何内容的最高 1080p 编码。

      【讨论】:

      • 这还能用吗?您发布的示例链接在浏览器中有效(当然是在添加我的视频 ID 时),但它似乎仍然在它自己的播放器中打开,当我查看谷歌正在使用的链接时它有一英里长并包含有关过期的信息和东西。我无法让您以预览结尾的链接在我的 html5 播放器中播放。想法?谢谢!
      【解决方案3】:

      这应该可行:

      <video>
          <source src="https://drive.google.com/uc?export=download&id=file_ID" type='video/mp4'>
      </video>
      

      将链接中的“file_ID”替换为您的视频 ID。 (要找到它 - 右键单击​​ Google Drive 视频,获取可共享链接。该文件应该被共享才能访问该文件。)

      它播放源视频。如果您想更改质量或使用不受支持的编解码器,则不容易获得 google drive stream/converted files,如上一个答案中所述。 (Ajax 不会让您获取链接,因为 CORS 和 PHP 是服务器端,并且链接包含 IP 地址,因此无法直接从客户端访问。)

      【讨论】:

      • 这行不通了,对吧?还有其他解决方案吗?
      • 仅适用于小到足以让谷歌扫描的文件。所以不到1GB。对我的项目没用,但对于较小的项目来说已经足够了!
      • 当您超过病毒扫描的文件大小限制时,您需要从“仍然下载”按钮获取链接。只需要一个参数 - &confirm=something。这是获取它的一种方法 - marstranslation.com/blog/…
      • @pejey 谢谢!我的测试文件是 231MB,它仍然无法播放。我收到病毒消息。 1GB 对我来说没问题,但似乎限制较低,这是行不通的。有谁知道限制是多少?此外,确认 ID 似乎正在发生变化,因此这似乎也不可靠,我需要它可以自动访问,而不是使用控制台和不幸的事情。我很少有精通技术的人会使用我的应用程序,我希望他们只需要粘贴一个共享链接。如果您有任何想法,请告诉我。谢谢!
      • 此时它是 100MB,如此处所述 - support.google.com/a/answer/172541?hl=en
      【解决方案4】:

      这是一个很长的答案,我会尽量缩短它..

      1. 将文件上传到驱动器并使用共享选项将其公开。
      2. 然后单击预览选项,它将打开一个新选项卡。
      3. 寻找指向子菜单的垂直 3 个点(右上角),然后选择在新窗口中打开。
      4. 进入新窗口后,点击垂直的 3 个点(右上角),此时您将看到“嵌入项目”选项,点击它。
      5. 现在您将获得 iframe 代码,将其包含在您的网页或网站中。

      试一试!!! 希望对你有帮助谢谢!!

      【讨论】:

        【解决方案5】:

        我可能回答得有点晚了,但如果有人感兴趣,我已经在here 之前写了一篇关于来自 Google Drive 的流式视频的答案。有几种方法可以解决这个问题,但总而言之,如果您不想使用 Google Drive 的嵌入式播放器,则必须进行一些服务器端编程(可以是 ASP.NET、PHP 等)。或者,如果您想要流式传输超过 100MB 限制的大型视频,您是否考虑过 HLS(HTTP Live Streaming)?您可以使用视频片段(最好小于 100MB)创建 .m3u8 播放列表,这样您就可以流式传输视频。希望我的回答有帮助!

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2017-10-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-10-23
          • 2011-09-25
          相关资源
          最近更新 更多