Search code examples
javascriptphphtml5-videodropboxvideo.js

Stream video from dropbox? Possible byte-range issue

I'm using videojs to play videos hosted on Dropbox, but users report that it doesn't work on iPhones (iOS) and for some users the video doesn't play in their browser either half of the times.

1) Anyone know if Dropbox has any bandwidth/connection limits on this? I'm intending on having top 10 users watching each link so it shouldn't be an issue.

2) Anyone know if I should use raw=1 or dl=1 at the end of the links for embedded content from Dropbox?

3) My googling has pointed me in the direction that the issue might be that Dropbox doesn't send byte-ranges, which is said to be necessary for iOS/Safari and even Chrome. In the example below, is there any way to find out if that is the case? I don't know where to look for the headers. Another lead told me to "make sure your app can follow redirects". Is that the same thing as the byte-range issue or how do I make sure of that?

NOTE: I tried to set up a snippet, but couldn't get it to work with external libraries. Can anyone kindly help me with that?

4) If any of the above is the case, is there a way to alter something on the Dropbox side, or using PHP or any other techniques to fetch the link and present it differently?

Thank you!

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>

Solution

  • Dropbox does have bandwidth limits for shared links. If shared links aren't working, that's one possible cause. You should check the error code for that. An error code of 429 indicates the link is banned for too much traffic. The limits are documented here:

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

    If a link isn't currently banned though, it can be used to access file content. By default, shared links point to a preview page, so you will need to modify them. Using the URL parameters dl=1 or raw=1 is the right way to do so. In this case, raw=1 makes more sense. E.g.:

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

    Those are documented here:

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

    These modified shared links will return redirects though, so the client will have to follow them. The resulting links do support byte ranges though. Here's a sample of verbose output from curl, showing and following the redirect and with a byte range retrieval request working: (some irrelevant output redacted)

    $ 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

    That said, if the client can't support this (e.g., with the redirect), it is technically possible to modify the links for access directly via dl.dropboxusercontent.com, e.g.:

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

    This isn't officially supported/documented though.