使用 HTML5 视频标签从 Google Drive 流式传输视频

Posted

技术标签:

【中文标题】使用 HTML5 视频标签从 Google Drive 流式传输视频【英文标题】:Streaming a video from Google Drive using HTML5 video tag 【发布时间】:2017-10-08 09:51:03 【问题描述】:

我正在尝试从 Google 云端硬盘流式传输 200MB 的视频文件。我已经尝试嵌入一个 24MB 的文件,该文件是公开共享给所有人的,这很有效:

<video controls>
    <source src="https://drive.google.com/uc?export=download&id=0B0gf7RQXoPVEa0xCSEhiRG5GNHM" type="video/mp4">
    Oops. html 5 video not supported.
</video>

当我在浏览器中正常导航到此 URL 时,会显示一个我必须接受的安全请求。我相信这是问题所在,因为它阻止了下载。也许我在 URL 中遗漏了一些参数?如何在 Google Drive 不阻止请求的情况下流式传输更大的文件?

【问题讨论】:

我认为你不能直接使用,但是有像 www-drv.com 这样的服务可以充当代理,让你公开 Google Drive 或 OneDrive 的内容 谢谢!这行得通,这是一个学校项目,所以这是一个完美的解决方案...... 酷,将添加为答案,以便其他人看到它 【参考方案1】:

您上面使用的方法仅对 100MB 或更小的文件有效。无论大小如何,您实际上都可以使用 HTML 5 视频标签流式传输 Google Drive 视频。我花了一段时间才弄明白,所以这里是:

获取视频的共享链接。这可以通过右键单击 Google Drive 中的视频并单击获取共享链接按钮来完成。将此链接复制到剪贴板。

查看带有可共享链接的视频。只需将您从上一步获得的链接粘贴到您的网络浏览器中。请在接下来的几个步骤中使用 Firefox 或 Chrome。

选择您想要的画质。使用 Google Drive 播放器并选择您想要的画质,例如 1080p 或 720p。点击播放以确保质量发生变化。

获取视频的绝对路径。这是有趣的部分:右键单击视频播放器,您将看到内置菜单,其中包含循环和书呆子统计等选项。再次右键单击,您将看到浏览器内置菜单,其中包含复制视频地址或保存视频等选项。选择复制视频地址并进行测试,将其粘贴到新标签中,查看视频是否播放。

将链接插入您的视频标签。这是最令人满意的部分:

  <video   controls>
      <source src="link from Google Drive" type="video/mp4" />
  </video>

或者,您可以使用开发人员工具中现成的网络检查工具。可以通过右键单击网页并选择检查元素然后单击网络选项卡或使用内置浏览器菜单来访问它们。在视频出现在网络选项卡中之前,您可能必须刷新页面并开始播放。通常,它被归类为媒体,因此您可以过滤掉每个引用媒体文件的请求。从那里开始,您将看到视频的链接并能够复制它们。

请务必注意,每个 URL 实际上都与客户端的 IP 相关联。这意味着您获得的链接不一定适用于其他人的设备。为了解决这个问题,您可以预加载从中获取客户端链接的页面,然后获取源并在 Google Drive 源中搜索以 fmt_map_stream 开头的 JSON 数组。在那里,您将获得 360p480p720p1080p 的四个转义链接。复制这些链接并在您的视频标签中使用它们。请记住,此过程应在服务器端进行。

此外,我建议使用 Google 相册。谷歌照片允许免费存储没有限制,因为您允许照片压缩您的视频,这样它们就不会用完您在谷歌云端硬盘上的配额。要开始使用,请先上传任意大小的视频文件。然后,执行以下操作:

创建一个新相册。为其命名,然后拖动视频或选择您已上传的现有内容。

选择分享选项。右上角有一个分享按钮。选择它将允许您获取相册的可共享链接。 确保只有您可以将视频添加到此相册,这一点至关重要。确保生成可共享链接是上述情况。

获取指向单个视频的可共享链接。这很简单:右键单击视频并复制地址。你应该得到这样的格式: https://photos.google.com/share/SomeId/photo/SomeOtherId?key=AKey

从服务器端获取下载链接。以下示例是一个 C# 示例,它从上述格式的任何链接中获取下载链接:

  var source = "";

  using (var webClient = new WebClient())
  
      source = webClient.DownloadString(link_from_above);
  

  var chunks = source.Split(',');
  var downloadLink = "";

  foreach (var chunk in chunks)
  
      if (chunk.Contains("video-downloads.googleusercontent.com"))
      
          downloadLink = chunk.Replace("\"", string.Empty);

          Process.Start("iexplore.exe", downloadLink);
      
  

上面的代码只是从您之前获得的链接下载源代码。然后,它用逗号分隔,因为包含video-downloads.googleusercontent.com 的任何块都被提取,所有" 都被替换。在此示例中,启动 Internet Explorer 并解析链接。结果将是 Internet Explorer 要求您保存视频。从这里,您可以执行以下操作:

<video   controls>
    <source src="download link from source" type="video/mp4" />
</video>

然后您就可以进行流式传输了。您还可以从 VLC 流式传输。唯一的缺点是搜索并不总是有效,因为从技术上讲,文件是同时下载和播放的。这种方法比 Google Drive 的方法简单得多。

替代解决方案

Google Drive API 允许您从 Web 应用程序的服务器端甚至通过命令行和桌面应用程序上传和下载到您的 Google Drive。有 Python 和 .NET 支持以及有关如何设置项目的大量文档。

启用 Google Drive API。 确保您已登录要从中流式传输文件的 Google 帐户。您可以访问 this 链接以启用 Google Drive API。 获取 API 密钥。通过访问 this 链接,您可以生成 API 密钥以访问 Google Drive。系统可能会提示您创建一个新项目。 获取文件 ID。 访问 Google 云端硬盘并找到您要流式传输的文件。确保它可供公众使用。在新选项卡中打开它并复制文件 ID。它应该是这样的:https://drive.google.com/file/d/&lt;YOUR_FILE_ID&gt;/view 调用下载链接。您的下载链接应采用以下格式:

https://www.googleapis.com/drive/v3/files/&lt;YOUR_FILE_ID&gt;?key=&lt;YOUR_API_KEY&gt;&amp;alt=media

这是使用 200MB 文件进行测试的。下载工作完美,没有任何病毒扫描中断它。使用上面的链接并将其添加到您网站的嵌入代码中。

另一种选择

您可以使用M3U8 文件来传递内容。您可以使用FFmpeg 或任何类似实用程序将您的视频文件分割成更小的片段。确保每个段小于 100MB。将片段上传到 Google Drive 并获取它们的可共享链接。然后,您可以将链接更改为可下载的变体,如下所示:

https://drive.google.com/uc?id=[segment_id]

通过更改指向 Google 云端硬盘下载链接的链接来更改您的 M3U8 文件。然后您可以像这样将M3U8 文件嵌入到您的网页中:

<video   controls>
    <source src="video.m3u8" type="application/x-mpegURL">
</video>

但是,此方法可能并不总是有效。为了克服这个问题,您可以创建一个 Web 服务,将下载流直接提供给用户,如下所示:

[ApiController]
[Route("[controller]")]
public class SegmentController : ControllerBase

    private static HttpClient Client  get;  = new HttpClient();

    [HttpGet]
    public async Task<FileStreamResult> Get(string id)
    
        return new FileStreamResult(await Client.GetStreamAsync("https://drive.google.com/uc?id=" + id), new MediaTypeHeaderValue("video/MP2T"))
        
            FileDownloadName = id + ".ts" // or + ".m2ts", depending on your media
        ;
    

然后,您可以将此 GET 请求称为/segment?id=[GOOGLE_DRIVE_ID]。此方法本质上会将直接下载流返回到客户端,并带有适当的标头,从而允许视频播放器正确地流式传输播放列表。请记住,上面的示例适用于 .NET Core。

有很多关于如何从现有视频剪辑生成M3U8 文件的教程。我推荐FFmpeg,因为创建这些文件非常简单。 Apple 在M3U8 上提供了指南here。由于您不是直播,因此您需要一个 VOD(视频点播)播放列表。对于大型视频,建议使用此方法。如果您不想压缩大视频,将它们拆分并以小段传送会对您有所帮助,您可以使用 Google Drive 来托管这些段(您需要将视频重新混合到 .ts.m2ts 以便拆分并避免重新编码)。这也是寻找和缓冲的绝佳解决方案,因为像上面的解决方案这样的直接下载可能不允许您寻找并且链接也会过期。 YouTube 使用类似的设置向客户提供视频。

【讨论】:

您好,您知道如何从服务器端执行此操作吗? 优秀的解决方案。谢谢。 @AhmedAbuthwabah 我尝试了一个示例播放列表。 VLC 拒绝流式传输,但 DVDFab 和 MPlayer 似乎流式传输视频播放列表。在 Firefox 中似乎是同样的问题。您可能需要创建一个服务,以流的形式重定向到 Google 下载链接。不确定您的网络应用程序使用什么,我将使用代码示例编辑我的答案以解决此问题。 @AhmedAbuthwabah 我已经用 .NET Core 示例更新了这个问题。我不确定这是否是您正在使用的,我对 php 或 ASP.NET 之外的其他技术没有足够的知识。我希望这会有所帮助。 嘿@bimmui,不幸的是我不确定python/Django 的实现,我在.NET 中使用C# 工作了很多。但是,我可以解释正在发生的事情,也许这可以帮助您实现。因此,带有WebClient 的部分只需从 Google 照片 URL 下载 HTML 源代码。也许搜索 Python 实现以从 Web URL 下载 HTML 源?使用 Python 实现字符串的拆分以及替换双引号应该非常简单。您可以忽略Process.Start 调用,它只是为了测试下载链接。【参考方案2】:

我认为您不能直接使用,但有像 www-drv.com 这样的服务充当代理,让您公开 Google Drive 或 OneDrive 内容。

我对他们的服务有些担心,因为常见问题解答有点不清楚他们需要多少访问 GDrive/OneDrive,如果您必须让他们从根目录下访问(这将是一个不适合我)或者如果您可以选择单个目录(和子目录)。我过去曾给他们发过电子邮件,要求澄清,但没有回应……只是想提醒一下。

【讨论】:

我使用了一个辅助帐户,Google 驱动器上没有其他内容。我永远不会相信这样的服务。

以上是关于使用 HTML5 视频标签从 Google Drive 流式传输视频的主要内容,如果未能解决你的问题,请参考以下文章

使用 html5 视频标签从特定位置开始播放视频

从html5中的视频标签中读取音频频谱

如何将 Youtube 视频嵌入 HTML5 <video> 标签?

使用 HTML5 视频标签播放视频

HTML5 视频 - 更改多个来源

使用 HTML5 视频标签时,某些视频在移动设备上显示为白屏