/    Sign up×
Community /Pin to ProfileBookmark

How to locally download a video temporarily to a user’s computer?

Copy linkTweet thisAlerts:
Feb 18.2022

I’m sort of working on a video sharing platform and currently I just change a <video> tag’s `src` to the link of the video someone uploaded when viewed, but it takes a bit to load, especially with short videos. So I’ve been thinking, maybe I can somehow temporarily download it to their computer so it will load faster? But it probably self-deletes once they click off the page or something. Thanks

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@BostauthorFeb 25.2022 — Bump.
Copy linkTweet thisAlerts:
@SempervivumFeb 26.2022 — Try to use a hidden video tag and set the src attribute to the video in question. This way the browser should download it and keep it in it's cache. This is a proven procedure for images and I assume it will work for videos either.
Copy linkTweet thisAlerts:
@maqsoodsahilFeb 26.2022 — Nice.

[Phoenix OS](https://offlinesetups.com)
Copy linkTweet thisAlerts:
@cootheadFeb 26.2022 — Hi there Bost,

Here is how I do it...
<i>
</i>&lt;a href="https://www.example.com/some-video-name.mp4" download&gt;download some-video-name.mp4&lt;/a&gt;


Just change the the url to suit your requirements.

Support is very good...

https://caniuse.com/?search=download%20attribute

[i]coothead[/i]
Copy linkTweet thisAlerts:
@BostauthorFeb 27.2022 — @coothead#1642875 That's not what I mean. I mean like using javascript, not a link. And it should self-delete, not just open a save window. Because then how would I get the file from their machine?
Copy linkTweet thisAlerts:
@BostauthorFeb 27.2022 — @Sempervivum#1642868 Hmm, so then when it finished loading I would set display to block on the real video instead of the loader one?
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2022 — @Bost#1642895

Yes, you can do so. However this is not applicable when the video is large. Instead you can listen to the event "canplaythrough":

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event

and make the video visible when it fires.
>The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
Copy linkTweet thisAlerts:
@ginerjmFeb 28.2022 — Some of what you are writing makes it sound like you or your app want to take control of someone's laptop and put files on it as well as take files from it. I don't like the thought of any app doing that to my PC. Any app that deals with something like this should be giving the choice of passing files around to the user, not the author. I especially do not like your point about using JS to do this and not a link that the user clicks on and sees what's happening.

Maybe I am not seeing what you want to do. If I am not I apologize. But - I would also ask that you could give us a clearer view of what you goal is.
Copy linkTweet thisAlerts:
@BostauthorFeb 28.2022 — > @Sempervivum#1642896 However this is not applicable when the video is large.

What would be the cutoff for large and small videos to be separate?
Copy linkTweet thisAlerts:
@BostauthorFeb 28.2022 — @ginerjm#1642910 Oh no. No I've seen posts that do want to do that though, but it's only a video file and it'd probably just download to their temp folder and auto-delete. Also I'm pretty sure the browser would have a permission popup.
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2022 — @Bost#1642921
>What would be the cutoff for large and small videos to be separate?

I do not recommend to distinguish large ones from small ones. Use the event "canplaythrough", the browser will fire it appropriately regardless of the video being large or small.
×

Success!

Help @Bost spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...