1

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>
SeaBass
  • 1,584
  • 4
  • 20
  • 46
  • Hm, I might be on to something here! I just tried to replace the URL with https://dl.dropboxusercontent.com/s/yo9nbii33pfwmtt/big_buck_bunny_480p_h264.mov and it seems to work a lot better. Can anyone confirm this? Then I just need a PHP script that will change the URL into that format, which should be easy. – SeaBass Feb 15 '18 at 23:41
  • "...for some users the video doesn't play in their browser either half of the times." That's quite vague. ( 'does not play' and 'does not work' are banned phrases here for problem reporting.) Give error codes are describe e.g. flickers flutters whatever. Also, give specific names of which browsers and which platform/OSes that they're on. Can you reproduce their symptoms yourself in those browsers? – David Feb 16 '18 at 20:17
  • I had planned on using Dropbox to host my html5 video-files back when I began (about a year or so ago), but after some web-research, I settled on Google Cloud Platform (and am VERY happy with that...it's dirt-cheap.) So, exactly WHICH flavor of Dropbox are you trying to use? The reason I ask that is because today when I googled using Dropbox, I ran across this info that neither Dropbox Basic nor Dropbox Plus and Business users are supported any longer. See here: https://www.dropbox.com/help/desktop-web/force-download – David Feb 16 '18 at 20:46
  • Just curious why your specifying that the file is video/mp4 when it's a .mov file? Probably not related to the issue but I don't believe that's quite right...but i develop in csharp not html – FlamingGenius Feb 17 '18 at 03:50
  • @FlamingGenius You would suggest `video/quicktime`? Not sure it will even play in videojs with that setting. – SeaBass Feb 17 '18 at 03:54

2 Answers2

3

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.

Greg
  • 16,359
  • 2
  • 34
  • 44
  • The dl.dropboxusercontent.com/s/ trick worked for me! But... not on my super old iPad and my iPhone 4 from 2010 only played some video files and other not, but I can live with 8 year old devices not being supported. Are there any other downsides of using dl.dropboxusercontent.com/s/, instead of going the code path above? I'm not sure if I can install curl. – SeaBass Feb 16 '18 at 21:44
  • The downside is just that since it's not officially supported, we can't guarantee it will continue working in the future. – Greg Feb 16 '18 at 21:48
  • Have you read that somewhere or assuming so because you haven't found anything written about it? It's way over my head, but I see the script using `dl.dropboxusercontent.com` as well, so that might be the case for both solutions? – SeaBass Feb 16 '18 at 21:56
  • 1
    I'm a developer advocate at Dropbox, and I can confirm that we only officially support and document the `dl` and `raw` options, not using `dl.dropboxusercontent.com` directly. – Greg Feb 16 '18 at 22:15
  • That sounds like a verified source :) If you don't mind one more question, is there any other way that I can help a client to follow the redirects or is it just up to their browsers to decide? Then the dl.dropboxusercontent.com link is my safest bet. – SeaBass Feb 16 '18 at 23:05
  • Nothing comes to mind. I can't offer much insight on the client-side unfortunately! – Greg Feb 16 '18 at 23:50
  • ok thanks! One more thing related to dropbox. Do you know if it's possible to access your dropbox account (file browser) with PHP or is that API not supported anymore? If not, do you know of any workarounds for a PHP environment? – SeaBass Feb 17 '18 at 03:03
  • You can certainly access [Dropbox API v2](https://www.dropbox.com/developers/documentation/http/documentation) via PHP, but we don't have an official SDK for it. There are some third party libraries listed [here](https://www.dropbox.com/developers/documentation/communitysdks) though. – Greg Feb 17 '18 at 17:10
0

So, I proto-typed my own html5-video webpage, downloaded your MOV file, and put it out onto my Google-Cloud-Platform, and that works fine (in Chrome on Win-10). So, then I changed only the 'src=...' attribute on the source-tag to point out to your file on Dropbox. I ran two test cases, one with the trailing "&raw=1" and one without. Both fail...in the debug-console, I get a media "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."

(Hmmm...I'm not sure what to conclude, but for what it's worth, I too use video.js, just like I've been doing for about a year now.) But this makes me want to recommend you consider giving Google Cloud Platform a whirl, if you're not wedded to wanting to use Dropbox.

EDIT/UPDATE: As I stated in my newest comment below, once I re-tested, using the alternate URL of https://dl.dropboxusercontent.com/s/yo9nbii33pfwmtt/big_buck_bunny_480p_h264.mov my code now DOES work correctly...no more media-errors. Sorry for any earlier confustion.

David
  • 2,253
  • 5
  • 23
  • 29
  • Thanks, did you try my trick above and replace the `www.dropbox.com/s/` with `dl.dropboxusercontent.com/s/` ? Works then? Other people are using my app so I can't ask them to switch to Google. But when I did try Google myself I ran into the problem of not being able to fetch the mime type since I play both audio and video files. Dropbox shows the file name with .mov etc so that's easy to decide (although not 100% accurate). Any ideas how to find out the mime type from the Google Drive links? video/mp4, audio/wav etc... – SeaBass Feb 16 '18 at 21:42
  • 1
    No, I hadn't tried your trick (because I didn't quite understand it originally). But, NOW I DO understand it. So, tonite I tried again, using this alternate URL, and now it DOES work just fine. ( Sorry for the earlier confusion ! Glad that you noticed my earlier omission ! ) – David Feb 17 '18 at 03:16
  • Cool! I'm still interested in if you know a way to extract the mime type from Google Drive files. – SeaBass Feb 17 '18 at 03:19
  • Hmm...I'm not understanding yet, what might be different between your 'app' and my 'app' (aka my web-app using html5. [ And why you need to extract a mime-type. ] [And what you meant about others using your app so you couldn't ask them to switch from Dropbox to GCP. ] – David Feb 17 '18 at 15:11
  • My dropbox links show the whole file names so it’s easy to figure out what kind of file it is and put that in the mime type of the html5 source tag automatically. The Google Drive links are more cryptical and doesn’t show any extensions like .mov, .mp4, .wav. Any idea how I can extract that info from the google links via JS or php? – SeaBass Feb 17 '18 at 15:16
  • So, first let me explain that I use type='video/MP4', because I learned HTML5 video, by starting at here; https://www.w3schools.com/html/html5_video.asp and they show only 3 possible types...i.e. ogg, webm, MP4 But, once I grabbed your .MOV, I learned that it actually IS MP4 equivalent, when I examined its codec meta-info. – David Feb 17 '18 at 15:21
  • Bottom lline: Take a peek at one of my example 'webapp' pages, here: https://weasel.firmfriends.us/True-Romance/ So, I'm thinking that (maybe) you don't really need to know 'mime-type'!?! Anyway, take a look via show source at my page, then maybe point me to your 'app' (webpage?), if that's possible. ( Oh, btw, I happen to have chosen 'webm', rather fhan MP4, but that's another story. :^) ) – David Feb 17 '18 at 15:25
  • Ok, I’ll start a new question on how to extract it from google links. Thanks for your help. – SeaBass Feb 17 '18 at 15:27
  • Ok. So, in my case, my coding really does NOT need to use that 'type=video/MP4' or whatever. That info turns out to be OPTIONAL. In fact, my experiements suggest the HTML does not even have to use a SOURCE tag. (Instead, you can just put a 'src' attribute inside the VIDEO tag. Browsers seem to able to figure out codec-types transparently. They certainly do NOT need/use file-extentions, etc. Even in the case where you DO use multiple SOURCE tags, you can still omit the type-attributes in them. – David Feb 17 '18 at 15:48
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165336/discussion-between-dave-and-seabass). – David Feb 17 '18 at 15:54
  • I can see that, however my question is not if it's needed, it is how to do it and if it's possible. I'll start a new question. Thank you. – SeaBass Feb 17 '18 at 17:12
  • Linking in the new question here. Another question related to this, how did you format your Google Drive URL to be able to embed it Dave? https://stackoverflow.com/questions/48844299/get-mime-type-from-google-drive-url-with-js-or-php – SeaBass Feb 17 '18 at 18:04
  • Yes, of course it's possible. A google reveals: https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload/29672957 Doesn't that answer it for you? – David Feb 17 '18 at 19:46
  • Thanks! I’ll try it out :) What about the google cloud video url formatting? How do you alter it to make it embedable? Right out of the box it gives you a link to a preview page. – SeaBass Feb 17 '18 at 21:13