【问题标题】:Seekbar not working in Chrome搜索栏在 Chrome 中不起作用
【发布时间】:2014-01-09 22:46:34
【问题描述】:

我已将视频上传到我的 Windows 存储并注意到搜索栏(默认 Chrome 的 html5 播放器)无法正常工作。该视频的网址是:

http://portalvhdsrwglplr5bdc2k.blob.core.windows.net/vdepot/uploads/video/file/167/surfer-girl-35094486.mp4

请注意:当视频下载正在进行或第一次为 100% 时,Seekbar 不工作。如果 chrome 播放器已下载视频并刷新页面,则 seekbar 可以正常工作。

我是视频编码新手,因此我不确定这是否是视频、浏览器或 Windows azure 的问题?我也无法在 google 中找到有关该主题的任何信息。

【问题讨论】:

    标签: azure html5-video azure-storage


    【解决方案1】:

    为 HTML 视频正确提供的文件需要使用 HTTP Byte Serving,它允许浏览器仅请求它需要让您观看视频的文件部分。如果你没有这个,你就会遇到这样的问题。

    当您在视频中向前跳过缓冲的部分时,浏览器可以从该点向前向服务器请求视频文件,跳过开头。您可能已经注意到,在大多数网络视频播放器使用 Flash 的时代,尤其是在 Vimeo 上,您必须等到大部分视频文件被缓冲后才能继续搜索,因为那些 Flash 播放器不支持此功能。

    浏览器使用“Ranges”标头请求这种格式的文件。服务器应以“206 Partial Content”状态码、一些关于范围数据的 HTTP 标头以及实际文件的子集进行响应。您的服务器以标准的 200 状态响应进行响应。如果您有兴趣,这里有一篇关于此过程的更详细的文章。

    http://benramsey.com/blog/2008/05/206-partial-content-and-range-requests/

    我对 Windows Storage 了解不多,但它似乎确实支持此功能。您可能需要检查您的版本和配置。这些文章可能会为您指明正确的方向:

    http://msdn.microsoft.com/en-us/library/windowsazure/ee691967.aspx http://blogs.msdn.com/b/windowsazurestorage/archive/2011/09/15/windows-azure-blobs-improved-http-headers-for-resume-on-download-and-a-change-in-if-match-conditions.aspx

    祝你好运。

    【讨论】:

      【解决方案2】:

      这里的问题是全新的 AZURE 存储帐户默认实现不支持在HTTP 206 Partial Content 的 HTTP 响应中提供正确的标头“Accept-Ranges: bytes”

      要解决此问题,您需要将存储帐户的 DefaultServiceVersion 设置为版本 2013-08-15later。在他们的文档中,他们说这在版本 2011-08-18 中得到了官方支持,但在我的测试中,直到我将其设置为版本 2013-08-15 才看到它。最后,我只是将其更新到最新版本 2019-02-02。稍后我将向您展示如何做到这一点。

      话虽如此,您可以采取一些步骤来测试和验证此问题以及如何解决它。

      创建一个全新的 AZURE 存储帐户,添加一个新容器,然后将 MP4 上传到该容器。要查看 MP4 的默认标题,请运行以下 curl 命令

      curl -I https://<StorageAccount>.blob.core.windows.net/<YourContainer>/<Your>.mp4
      

      这里是你应该看到你的回复的标题

      HTTP/1.1 200 OK
      Content-Length: 8655515
      Content-Type: video/mp4
      Last-Modified: Fri, 29 Nov 2019 21:45:12 GMT
      ETag: 0x8D7751569DECA07
      Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
      x-ms-request-id: cc44ae3e-b01e-00b5-2337-e4372d000000
      x-ms-version: 2009-09-19
      x-ms-lease-status: unlocked
      x-ms-blob-type: BlockBlob
      Access-Control-Expose-Headers: x-ms-request-id,Server,x-ms-version,Content-Type,Last-Modified,ETag,x-ms-lease-status,x-ms-blob-type,Content-Length,Date,Transfer-Encoding
      Access-Control-Allow-Origin: *
      Date: Sat, 15 Feb 2020 19:36:37 GMT
      

      你会看到下面的header缺少的是

      Accept-Ranges: bytes
      

      然后您可以验证当您运行以下 curl 命令时此标头将返回

      curl -I -H x-ms-version:2013-08-15 https://<StorageAccount>.blob.core.windows.net/<YourContainer>/<Your>.mp4
      

      要永久设置我使用的存储帐户版本LinqPad 和以下代码引用Windows.Azure.Storage Nuget Pacakge

      var connectionString = "DefaultEndpointsProtocol=https;AccountName=<YourAcountName>;AccountKey=<YourAccountKey>;";
      var storageAccount = CloudStorageAccount.Parse(connectionString);
      var blobClient = storageAccount.CreateCloudBlobClient();
      var props = await blobClient.GetServicePropertiesAsync();
      props.Dump(); /* Here you will see that the DefaultServiceVersion is null*/
      props.DefaultServiceVersion = "2019-02-02";
      await blobClient.SetServicePropertiesAsync(props);
      

      第一次运行时,您会看到 DefaultServiceVersion 为空。如果您再次运行它,您将看到 DefaultServiceVersion 将是您设置的版本。

      如果你再次运行 curl 命令。

      curl -I https://<StorageAccount>.blob.core.windows.net/<YourContainer>/<Your>.mp4
      

      您将看到以下标头,其中现在包含“Accept-Ranges: bytes”标头,您的搜索将起作用。

      HTTP/1.1 200 OK
      Content-Length: 8655515
      Content-Type: video/mp4
      Last-Modified: Fri, 29 Nov 2019 21:45:12 GMT
      Accept-Ranges: bytes
      ETag: "0x8D7751569DECA07"
      Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
      x-ms-request-id: b95228de-f01e-0135-4596-e5d2d2000000
      x-ms-version: 2019-02-02
      x-ms-creation-time: Fri, 29 Nov 2019 21:45:12 GMT
      x-ms-lease-status: unlocked
      x-ms-lease-state: available
      x-ms-blob-type: BlockBlob
      x-ms-server-encrypted: true
      x-ms-access-tier: Hot
      x-ms-access-tier-inferred: true
      Date: Mon, 17 Feb 2020 13:33:00 GMT
      

      【讨论】:

      • 我能够使用 node.js 后端和“azure-storage”包来做到这一点。我以与您相同的方式调用了等效的 blobService.getServicePropertiesblobService.setServiceProperties。非常感谢!
      【解决方案3】:

      正如@Craig Selbert 所说,新的 Azure 存储帐户不支持“Accept-Ranges: bytes”标头。您可以通过在 Azure Cloud Shell 中设置 DefaultServiceVersion 来解决此问题,例如:

      $ctx = New-AzStorageContext -ConnectionString "[connectionstring]"
      Update-AzStorageServiceProperty -ServiceType Blob -DefaultServiceVersion 2019-02-02 -Context $ctx
      

      [connectionstring] 来自存储帐户中的“访问密钥”选项卡。

      【讨论】:

      • 如果您觉得这有帮助,请点赞 Craig 的回答,他做了所有艰苦的工作来解决这个问题,我只是找到了一种更简单的方法来实现它。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-01-18
      • 2021-10-04
      • 2018-06-05
      相关资源
      最近更新 更多