CODEWITHSUNDEEP
javascripthtmldom
José Veliz
José Veliz

Reputation: 110

Is there any way to download a video **in a video tag** just using javascript?

I am trying to embed a video in a TAG video in html and download it without clicking the download button just with javascript.Is there any way to achieve that or the API does not support it?

[Here's the image where I have the video tag and the download button (I want to trigger that functionality just with javascript)][1] [1]: https://i.sstatic.net/EWeQP.png

Code: https://codepen.io/ZetaGH/pen/WNNOxNo

// HTML
<html>
  <body>
    <video src="https://firebasestorage.googleapis.com/v0/b/speech-to-text-web.appspot.com/o/dataset%2FAbuse%2Fabusar_x264_0.mp4?alt=media&token=e84607c8-ba77-4c81-99a4-bd42d29cc869" controls></video>
  </body>
</html>

//JS
// I want here some functionality to trigger the download button in the video player

Upvotes: 0

Views: 5128

Answers (1)

Ryan
Ryan

Reputation: 1072

You don't need JS for this.

But you might need to rethink it; if you cover up the video with a link to download it, you make it impossible to play the video, like this: 

a, video {
	position: relative;
	display: block;
	width: 800px;
	height: 600px;
}
a {
	margin-top: -600px;
	z-index: 1;
}
<body>
	<video src="https://firebasestorage.googleapis.com/v0/b/speech-to-text-web.appspot.com/o/dataset%2FAbuse%2Fabusar_x264_0.mp4?alt=media&token=e84607c8-ba77-4c81-99a4-bd42d29cc869" controls></video>
	<a href="/download/video/url" download></a>
</body>

Sure, you could make the link cover only the top part, so the controls are usable, but then someone will use it in a different browser with different controls and you will be blocking those (often clicking on the video is meant to be the play button, so users will be very annoyed if it downloads.

This falls heavily in the category of don't try to change native UX, because you cannot predict every type of device and user expectation your site might display on.

In google chrome, you can get the behavior you want just by putting the video inside the download link; it's smart enough to download when you click the video but not the controls. However, in firefox, for example, it just completely ignores the <a> tag. 

<a href="/download/video/url" download>
    <video src="https://firebasestorage.googleapis.com/v0/b/speech-to-text-web.appspot.com/o/dataset%2FAbuse%2Fabusar_x264_0.mp4?alt=media&token=e84607c8-ba77-4c81-99a4-bd42d29cc869" controls></video>
</a>

Upvotes: 2

Related Questions