从保管箱流式传输视频？可能 byte-range 问题

Question

我正在使用 videojs 播放托管在 Dropbox 上的视频，但用户报告说它在 iPhone 上不起作用 (iOS)，并且对于某些用户来说，视频无法在他们的浏览器中播放一半的时代。

1) 有人知道 Dropbox 对此是否有任何 bandwidth/connection 限制吗？我打算让前 10 名用户观看每个 link，所以这应该不是问题。

2) 有人知道我是否应该在 link 末尾使用 raw=1 或 dl=1 来获取来自 Dropbox 的嵌入内容吗？

3) 我的谷歌搜索指出问题可能是 Dropbox 没有发送 byte-ranges，据说这对于 iOS/Safari 甚至 Chrome 是必需的。在下面的示例中，是否有任何方法可以查明是否属于这种情况？我不知道去哪里寻找 headers。另一位领导告诉我 "make sure your app can follow redirects"。这与 byte-range 问题是一回事吗？我该如何确定？

注意：我尝试设置一个片段，但无法让它与外部库一起使用。谁能帮我解决这个问题？

4) 如果是上述任何一种情况，是否有办法在 Dropbox 端更改某些内容，或者使用 PHP 或任何其他技术来获取 link 并以不同的方式呈现它？

谢谢！

var myPlayer = videojs('my-video');

<head>
  <link href="http://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="854" height="480" poster="https://www.dropbox.com/s/3q2u7p0cep2c98x/bunny.jpg?raw=1" data-setup="{}">
    <source src="https://www.dropbox.com/s/yo9nbii33pfwmtt/big_buck_bunny_480p_h264.mov?raw=1" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
</body>

Answer 1

Dropbox 对共享 link 有带宽限制。如果共享 link 不起作用，这是一个可能的原因。您应该为此检查错误代码。错误代码 429 表示 link 因流量过多而被禁止。限制记录在此处：

https://www.dropbox.com/help/security/banned-links#traffic

如果 link 目前没有被禁止，它可以用来访问文件内容。默认情况下，共享 link 指向预览页面，因此您需要修改它们。使用 URL 参数 dl=1 或 raw=1 是正确的方法。在这种情况下，raw=1 更有意义。例如：

https://www.dropbox.com/s/yo9nbii33pfwmtt/big_buck_bunny_480p_h264.mov?raw=1

这些记录在此处：

https://www.dropbox.com/help/desktop-web/force-download

这些修改后的共享 link 会 return 重定向，因此客户端必须跟随它们。不过，生成的 links 确实支持字节范围。这是来自 curl 的详细输出示例，显示并遵循重定向以及字节范围检索请求工作：（一些不相关的输出已编辑）

$ curl -v -L "https://www.dropbox.com/s/yo9nbii33pfwmtt/big_buck_bunny_480p_h264.mov?raw=1" -H "Range:bytes=0-10"

> GET /s/yo9nbii33pfwmtt/big_buck_bunny_480p_h264.mov?raw=1 HTTP/1.1
> User-Agent: curl/7.33.0
> Host: www.dropbox.com
> Accept: */*
> Range:bytes=0-10
>
< HTTP/1.1 302 Found
* Server nginx is not blacklisted
< Server: nginx
< Date: Fri, 16 Feb 2018 18:59:47 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 0
< Connection: keep-alive
< Cache-Control: no-cache
< Content-Security-Policy: sandbox
< Location: https://dl.dropboxusercontent.com/content_link/NShAQ0eUYa8BqhfP8UBRQqrucOsW2CF5PxKzXbYSx4eWxRvzBYh4E9U4Y0EVDSFc/file
< Pragma: no-cache
< Referrer-Policy: origin-when-cross-origin
< X-Content-Type-Options: nosniff
< X-Dropbox-Request-Id: 074229cb353345723b385c8068325b6b
< X-Frame-Options: DENY
< X-Robots-Tag: noindex, nofollow, noimageindex
< X-Xss-Protection: 1; mode=block
< Strict-Transport-Security: max-age=15552000; includeSubDomains
<
* Connection #0 to host www.dropbox.com left intact
* Issue another request to this URL: 'https://dl.dropboxusercontent.com/content_link/NShAQ0eUYa8BqhfP8UBRQqrucOsW2CF5PxKzXbYSx4eWxRvzBYh4E9U4Y0EVDSFc/file'

> GET /content_link/NShAQ0eUYa8BqhfP8UBRQqrucOsW2CF5PxKzXbYSx4eWxRvzBYh4E9U4Y0EVDSFc/file HTTP/1.1
> User-Agent: curl/7.33.0
> Host: dl.dropboxusercontent.com
> Accept: */*
> Range:bytes=0-10
>
< HTTP/1.1 206 PARTIAL CONTENT
* Server nginx is not blacklisted
< Server: nginx
< Date: Fri, 16 Feb 2018 18:59:48 GMT
< Content-Type: video/quicktime
< Content-Length: 11
< Connection: keep-alive
< referrer-policy: no-referrer
< x-robots-tag: noindex, nofollow, noimageindex
< content-disposition: inline; filename="big_buck_bunny_480p_h264.mov"; filename*=UTF-8''big_buck_bunny_480p_h264.mov
< accept-ranges: bytes
< content-security-policy: referrer no-referrer
< content-range: bytes 0-10/249229883
< etag: 376876n
< x-dropbox-request-id: b44ad771d2c348375d715a4717681983
< pragma: public
< cache-control: max-age=60
< x-content-security-policy: referrer no-referrer
< x-webkit-csp: referrer no-referrer
< Strict-Transport-Security: max-age=15552000; includeSubDomains
<
* Connection #1 to host dl.dropboxusercontent.com left intact
 ftypqt

也就是说，如果客户端不支持此功能（例如，通过重定向），从技术上讲，可以修改 link 以直接通过 dl.dropboxusercontent.com 访问，例如：

https://dl.dropboxusercontent.com/s/yo9nbii33pfwmtt/big_buck_bunny_480p_h264.mov

虽然这不是正式的supported/documented。

Answer 2

所以，我 proto-typed 我自己的 html5 视频网页，下载了你的 MOV 文件，然后把它放到我的 Google-Cloud-Platform 上，效果很好（在 Chrome 在 Win-10 上）。因此，然后我只更改了 source-tag 上的 'src=...' 属性以指向您在 Dropbox 上的文件。我运行两个测试用例，一个带有尾随“&raw=1”，一个没有。两者都失败了...在 debug-console 中，我得到一个媒体 "ERROR 4'...specifically: MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported."

（嗯...我不确定要得出什么结论，但就其价值而言，我也使用 video.js，就像我现在已经做了大约一年一样。）但是这个如果您不想使用 Dropbox，我想建议您考虑试用一下 Google Cloud Platform。

EDIT/UPDATE：正如我在下面的最新评论中所述，一旦我 re-tested，使用备用 URL 的 https://dl.dropboxusercontent.com/s/yo9nbii33pfwmtt/big_buck_bunny_480p_h264.mov 我的代码现在可以正常工作了……不再 media-errors。抱歉之前的任何混淆。

从保管箱流式传输视频？可能 byte-range 问题

Stream video from dropbox? Possible byte-range issue

javascript

php

dropbox

html5-video

video.js