使用 HTML5 视频标签从 Google Drive 流式传输视频 [英] Streaming a video from Google Drive using HTML5 video tag

问题描述

我正在尝试从 Google Drive 流式传输 200MB 的视频文件.我已经尝试嵌入一个 24MB 的文件，该文件公开共享给所有人，这奏效了:

I am trying to stream a 200MB video file from Google Drive. I have already tried embedding a 24MB file that was shared public to everyone and this worked:

<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 阻止请求的情况下流式传输更大的文件?

When I navigate to this URL normally in the browser, a security request is shown which I have to accept. I believe this is the problem as it is blocking the download. Maybe I am missing some parameters in the URL? How do I stream larger files without Google Drive blocking the requests?

推荐答案

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

The method you used above is only valid for a file that is 100MB or smaller. You can actually stream Google Drive video using the HTML 5 video tag regardless of the size. It took me a while to figure this out so here it is:

• 获取视频的可分享链接.这可以通过在 Google 云端硬盘中右键点击视频并点击获取可分享链接按钮来完成.将此链接复制到剪贴板.

• Get the shareable link of your video. This can be done by right-clicking the video in Google Drive and clicking the get shareable link button. Copy this link to your clipboard.

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

View the video with the shareable link. Just paste the link you obtained from the previous step into your web browser. Please use either Firefox or Chrome for the next few steps.

选择您想要的质量.使用 Google 云端硬盘播放器并选择您想要的质量，例如 1080p 或 720p.点击播放以确保质量发生变化.

Select the quality you want. Use the Google Drive player and select your desired quality like 1080p or 720p. Click play to make sure the quality changed.

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

Get the absolute path of the video. Here's the fun part: right-click on the video player and you will see the built-in menu with options like loop and stats for nerds. Right-click again and you will see the browser built-in menu with options like copy video address or save video. Select copy video address and to test it out, paste it in a new tab and see if the video plays.

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

Insert the link into your video tag. This is the most satisfying part:

  <video width="1280" height="720" controls>
      <source src="link from Google Drive" type="video/mp4" />
  </video>

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

Alternatively, you can use the network inspection tools that are readily available in the developer tools. They can be accessed by either right-clicking on the web page and selecting inspect element and then clicking on the network tab or by using the built-in browser menus. You may have to refresh the page and start playback before the video comes up in the network tab. Usually, it is categorised as media so you can filter out every request that refers to a media file. From there on, you will see the links to the videos and be able to copy them.

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

It is important to be aware that each URL is actually associated with the client's IP. This means that the link that you get won't necessarily work on someone else's device. To combat this, you can preload the page where you get the link from for the client and then obtain the source and search for a JSON array starting fmt_map_stream in the Google Drive source. There, you will get four escaped links for 360p, 480p, 720p and 1080p. Copy these links and use them in your video tag. Keep in mind that this process should happen from the server side.

此外，我建议使用 Google 相册.Google 相册允许无限制地免费存储，前提是您允许 Google 相册压缩您的视频，以免它们用完您在 Google 云端硬盘上的配额.首先，首先上传任意大小的视频文件.然后，执行以下操作:

Additionally, I recommend using Google Photos. Google Photos allows for free storage with no limit, given that you allow Photos to compress your videos so that they don't use up your quota on Google Drive. To get started, start by uploading a video file of any size. Then, do the following:

• 创建新专辑.相应地命名，然后拖动视频或选择您已经上传的现有内容.

• Create a new album. Name it accordingly and then drag videos or select existing content that you have already uploaded.

选择共享选项.右上角有一个共享按钮.选择这将允许您获得相册的可共享链接.确保只有您可以将视频添加到此相册至关重要.确保生成可共享链接上方的情况.

Select the sharing options. In the top-right, there is a sharing button. Selecting that will allow you to get the shareable link of the album. It is crucial to ensure that only YOU can add videos to this album. Ensure that is the case above the generate shareable link.

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

Get the shareable link to an individual video. This is simple: right-click the video and copy the address. You should get a format like so: https://photos.google.com/share/SomeId/photo/SomeOtherId?key=AKey

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

Get the download link from the server-side. The following example is a C# example that fetches the download link from any of the links in the format above:

  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 要求您保存视频.从这里，您可以执行以下操作:

The code above simply downloads the source code from that link you obtained earlier. Then, it is split by commas since and whatever chunk contains video-downloads.googleusercontent.com is extracted and all " are replaced. In this example, Internet Explorer is launched and the link is parsed. The result would be Internet Explorer asking you to save the video. From here, you can do the following:

<video width="1280" height="720" controls>
    <source src="download link from source" type="video/mp4" />
</video>

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

You will then be able to stream. You can also stream from VLC. The only downfall is that seeking doesn't always work since the file is technically being downloaded and played at the same time. This method is much easier than Google Drive's.

替代解决方案

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

The Google Drive API allows you to upload and download to your Google Drive from the server-side of your web applications and even through command line and desktop applications. There is Python and .NET support and extensive documentation on how to setup your projects.

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

• Enable Google Drive API. Make sure you are signed into the Google account you wish to stream files from. You can visit this link to enable the Google Drive API.
• Get an API key. By visiting this link, you can generate an API key to access Google Drive. You may be prompted to create a new project.
• Get the file ID. Access Google Drive and find the file you wish to stream. Ensure it is available to the public. Open it in a new tab and copy the file ID. It should like something like this: https://drive.google.com/file/d/<YOUR_FILE_ID>/view
• Call the download link. Your download link should be in this format:

https://www.googleapis.com/drive/v3/files/?key=&alt=media

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

This was tested using a 200MB file. The download worked perfectly without any virus scanning interrupting it. Use the above link and add it to the embed code of your site.

另一种选择

您可以使用 M3U8 文件来传送内容.您可以使用 FFmpeg 或任何类似的实用程序将您的视频文件分成更小的片段.确保每个段小于 100MB.将分段上传到 Google Drive 并获取它们的可共享链接.然后，您可以像这样更改指向其可下载变体的链接:

You can use M3U8 files to deliver content. You can split your video file into smaller segments using FFmpeg or any similar utility. Ensure that each segment is smaller than 100MB. Upload the segments onto Google Drive and get their shareable links. You can then change the links to their downloadable variants like so:

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

通过更改指向 Google Drive 下载链接的链接来更改您的 M3U8 文件.然后，您可以将 M3U8 文件嵌入到您的网页中，如下所示:

Change your M3U8 file by changing the links to the Google Drive download links. You can then embed the M3U8 file into your web page like so:

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

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

This method, however, may not always work. To overcome this, you can create a web service that feeds the download stream directly to the user like so:

[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.

Then, you can call this GET request as /segment?id=[GOOGLE_DRIVE_ID]. This method will essentially return the direct download stream to the client with the appropriate headers which allows the video player to stream the playlist correctly. Bare in mind, the above example is for .NET Core.

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

There are plenty of tutorials on how to produce M3U8 files from existing video clips. I recommend FFmpeg as it is extremely simple to create these files. Apple has a guide on M3U8 available here. Since you are not live streaming, you will need a VOD (video on-demand) playlist. This method is recommended for large videos. If you do not want to compress your large videos, splitting them and delivering them in small segments will help you and you can use Google Drive to host the segments (you will need to remux your videos into .ts or .m2ts in order to split and avoid re-encoding). This is also a fantastic solution for seeking and buffering as direct downloads like the solutions above may not allow you to seek and the links also expire. YouTube uses a similar setup to deliver videos to the client.

这篇关于使用 HTML5 视频标签从 Google Drive 流式传输视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！