0

Below is a function for a download button, because the file type is MP4, new version browsers are reacting to the download button by opening the video in a default window and playing. I need a JS script that can overwrite this action and force the download straight away, so the 'Save As' feature opens immediately.

// Function to generate the Download button
VideoPlayer.prototype.initDownload = function () {

    var downloadBtn         = $("button.download"),
        downloadToolTipCls  = "download_tooltip",
        sources             = {},
        downloadToopTip,
        sourcesLength = 0,
        sourcesKeys;


    // Add each source
    if (typeof (firstSrc = this.$video.attr("src")) !== "undefined") {
        sources[firstSrc] = this.$video.attr("type");
    }

    this.$video.find("source").each(function () {
        var $this = $(this);
        sources[$this.attr("src")] = $this.attr("type");
    });

    sourcesKeys = Object.keys(sources);
    sourcesLength = sourcesKeys.length;
    if (sourcesLength === 1) {
        downloadBtn.wrap("<a href=\"" + sourcesKeys[0] + "\" download=\"video.title.mp4\" />");
    } 
};
Jack Cawthra
  • 7
  • 6
  • and the issue you're facing is...? "i need" is not an error message or problem statement. You've got some code, but you haven't given us any information or context about it. I assume there's maybe some problem with it. Please clarify, and preferably ask us an actual question. Thanks. – ADyson Oct 23 '18 at 08:57
  • I@ADyson Should of mentioned clearer sorry. I’ve tried changing stuff with the file type in the download attribute and been guided towards server side changes but unable to do so. So now struggling where to go next to solve the issue of not being able to force a download through the button instead of playing in default browser player – Jack Cawthra Oct 23 '18 at 08:59
  • normally you have to set a specific header in the response from the server when it offers the file for download. The browser may then (choose to, you can't force it) use that to save the file to disk instead of opening it. I forget exactly what the header is, but it's easy enough to google. I'm pretty sure you can't control this with script, because once you initiate the request to fetch the file, control passes away from the script. The file still gets downloaded, it's whether it's opened directly or saved to disk which is the behaviour you need to modify. – ADyson Oct 23 '18 at 09:09
  • Ahhh, so does this mean there's not really a way to overrule the browsers decision to play in the browser video player? I wasn't sure if there was a way of overruling this so that you just tell the browser to 'Save As' instead of make the choice itself. – Jack Cawthra Oct 23 '18 at 09:33
  • Not without setting a header on the server side in the response. And even then it's only a hint, as the app writer you can't actually force the browser to obey it, although most probably will. Browsers tend to think they're being helpful by opening the file for the user, so they can see it immediately. It doesn't, of course, prevent the user from then choosing themselves to save it to a permanent location on the disk. You have to remember that the browser belongs to the end-user, not to the web server or any page the browser is viewing. – ADyson Oct 23 '18 at 09:44
  • Yeah understood, thanks. Problem is the outcome of my higher level problem is solved when the user right clicks the download button and chooses to save as through that way. It's just when browsers try to be helpful it makes things harder – Jack Cawthra Oct 23 '18 at 09:48
  • what's your higher level problem? Like I said, you can only really solve this on the server side. How you initiate the download is irrelevant, it's how the server responds to the request and serves the file which is likely to help. – ADyson Oct 23 '18 at 09:50
  • @ADyson I'm altering the file name when the user downloads it through the website as it's just typically named after the type of video it's valued as on the website. Problem is the name only changes to what I've coded it to when the user right clicks the download button and chooses to save as through that way. Which brings me to this problem here of trying to force the download that way so the file name is changed for the user. – Jack Cawthra Oct 23 '18 at 09:57
  • instead of linking to the file directly, link to a server-side script which accepts the real filename (or an ID to identify it e.g. from a related DB record) and the desired final filename as input, and then fetches the file content from the server's disk, and serves it up for download with the right headers to set the filename and the download hint. If you have any security restrictions about who can download what, the script can also enforce these (and you would then make the files themselves not accessible directly from a HTTP request) – ADyson Oct 23 '18 at 10:02
  • @ADyson Alternatively, is there a way to format all videos across the site into a format that is accept by browsers to instantly download? Or is that out of question? – Jack Cawthra Oct 23 '18 at 10:41
  • Possible duplicate of [download-file-using-javascript-jquery](https://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery) – c-chavez Oct 23 '18 at 10:43
  • @c-chavez I'm not sure it's identical but I could be wrong. – Jack Cawthra Oct 23 '18 at 11:17
  • @c-chavez I'm not convinced that's really what OP is looking for – ADyson Oct 23 '18 at 11:20
  • @JackCawthra well you could certainly pre-transcode all your videos into some particular format...but a) it's an CPU-intensive operation, and b) browser support for formats varies wildly by vendor, and sometimes changes, and if you manage to find a format obscure enough that no major browser supports it, chances are some of your users might not be able to open it directly on their chosen device/OS either, so I'm not sure that's a brilliant plan. – ADyson Oct 23 '18 at 11:23
  • @JackCawthra IMHO that's a lot more hassle than just writing a quick server-side download script with some HTTP headers set in it. You can probably find a good sample for your server-side framework already if you google around. – ADyson Oct 23 '18 at 11:24
  • @ADyson Yeah looking at both options the server side script seems a lot easier to go about. Thanks for the help! I'll be sure to ask again if I get stuck. – Jack Cawthra Oct 23 '18 at 13:28

0 Answers0