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

问题描述

我正在尝试从Google云端硬盘流式传输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云端硬盘阻止请求的情况下流式传输更大的文件?

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云端硬盘视频.我花了一些时间才弄清楚，所以在这里:

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.

通过共享链接查看视频.只需将您从上一步获得的链接粘贴到Web浏览器中.接下来的几个步骤，请使用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云端硬盘源中搜索以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 Photos允许无限制的免费存储空间，前提是您允许Photos压缩视频，以使它们不会耗尽您在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云端硬盘的方法简单得多.

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云端硬盘.可能会提示您创建一个新项目.
• 获取文件ID..访问Google云端硬盘并找到您要流式传输的文件.确保它对公众可用.在新选项卡中将其打开，然后复制文件ID.它应该像这样:https://drive.google.com/file/d/<YOUR_FILE_ID>/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/<YOUR_FILE_ID>?key=<YOUR_API_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云端硬盘，并获取它们的共享链接.然后，您可以将链接更改为它们的可下载变体，如下所示:

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云端硬盘下载链接的链接来更改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，因为创建这些文件非常简单.苹果公司在M3U8上提供了指南，此处.由于您不是实时流媒体，因此您将需要一个VOD(视频点播)播放列表.对于大型视频，建议使用此方法.如果您不想压缩大型视频，可以将其拆分并分成小段进行分发，这将对您有所帮助，您可以使用Google云端硬盘托管这些段(您需要将视频重新混合为.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云端硬盘流式传输视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！