How can I download an mp4 file using the 'download' property of HTML's a link? - html

I want to be able to download the "video.mp4" file with the code below.
<a href="video.mp4" download>download</a>
However, it is not downloaded and played.
How can I make it downloaded without being played?

download

Related

How to prevent automatic download of a linked mp3 file

I am making a website using only HTML and CSS. I am trying to link to an online mp3 file (that I do not own) so that the mp3 plays in the browser. This simple code does what I want on Firefox and Safari:
<a href="https://www.allaboutbirds.org/guide/assets/sound/548271.mp3" >
However, instead of playing the mp3, Chrome automatically downloads the mp3 file to my computer. Is there some way I can alter my HTML code (not my browser preferences) to stop this from happening? Thanks.
You can't guarantee that all the browsers will have a built-in in-frame player for the audio file.
The best thing to do in this case is to embed the audio player into a page with the audio element:
<audio src="https://example.com/some-sound.mp3" controls></audio>

Download mp3 instead of playing

I can't download an mp3 file from any browser. Instead the browser always plays from the new window. I've seen similar questions, but no answer helped.
<a id="download_${i}" href=${val.ref} download>Download</a>
I also tried:
<a id="download_${i}" href=${val.ref} download="test.mp3">Download</a>
but doesn't work. Is there any simple way to download the mp3 file?

How to download videos from Azure Blob Storage with a simple HTML link?

I wanted to create a simple HTML link to be able to download a mp4 that was in a Azure Blob Storage container.
Just using the below HTML would create a link but when the link was clicked, the video would open in another tab and start to play.
<p>Click on the link to download the video:<p>
<p><a href="https://<your container name>/misc/ECM.mp4" download>ECM_video.mp4</a></p>
I didn't want the video to play but instead to force the video file to download to the user's computer.
To force the video file to download I had to change the Content Type for the video file in Azure from "video/mp4" to "file" by right-mouse button on the video file and clicking on Properties and then under the Properties tab.
Now the video file downloads to the user's computer using this HTML link
<p>Click on the link to download the video:<p>
<p><a href="https://<your container name>/misc/ECM.mp4" download>ECM_video.mp4</a></p>

How can I embed my personal dropbox files onto my website so they are publically visible?

I have mp3 recordings that I wish to embed onto my website. They are located in my dropbox and are just simple audio files. When I embed them with an audio tag like such, I can play them when I have my dropbox logged in, but they appear unplayable when I am a third party visitor to the website.
<audio src="https://dl-web.dropbox.com/get/therestofthelink" controls></audio>
any ideas how can I make these files permanently embedded, through dropbox or otherwise, so that every visitor to my site can successfully listen to them? thank you
You can create a share link (programmatically via the /shares endpoint or via the UI), which will give you a permanent publicly-visible link to a preview page for the file. To convert that link into one that points directly at the file content, refer to https://www.dropbox.com/help/201:
To bypass the preview page and allow your browser to directly render
your files, use raw=1 as a query parameter in your URL. For example:
https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx
Becomes:
https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx?raw=1
Note that this URL will cause an HTTP redirect. If you're an app developer using such a URL in your own code, please make sure your app can follow redirects.
At least in Wordpress text editor, you have to follow the below steps:
Create a share link to the file then change the www in the link
to dl. Use that new link in your embed code.
Remove the end of the link
e.g. if you have:
https://www.dropbox.com/s/bt44iw272m6ga04/O%20Botic%C3%A1rio%20-%20Dia%20dos%20Pais%20novo%20perfume%20Zaad%20-%20Comercial.mp3 ?dl=0
You have to change the first bold part and remove the second:
https://dl.dropbox.com/s/bt44iw272m6ga04/O%20Botic%C3%A1rio%20-%20Dia%20dos%20Pais%20novo%20perfume%20Zaad%20-%20Comercial.mp3
This worked for me.
Go the audio file in your dropbox on your desktop
Right click and select "copy Dropbox link"
Paste link in desired location
At the end of the URL there should be a "?dl=0" Simply replace the "0" with a "1" like so "?dl=1"
Code should look something like:
<audio controls>
<source src="https://www.dropbox.com/s/blah/yoursong.mp3?dl=1" type="audio/mpeg">
</audio>
You should upload the files directly in your webspace and link it from there.
On the other hand you can also use something like Soundcloud to make your audio files publicly available.

Cordova play local audio file

My cordova app downloads an audio file from the web. This works fine and the track is being saved in
"cdvfile://localhost/persistent/JukeboxDownloads/Test.mp3"
I get the URL of the file like that inside the success call of my downloader:
entry.toURL();
I then try to play the downloaded file using an audio tag (iOS) like this:
<audio src="file:///Users/Marc/Library/Developer/CoreSimulator/Devices/59AA8A4B-5CE5-42E2-8CF8-7DA0DEB07E99/data/Containers/Data/Application/7406C75B-4509-44C5-A6C7-F71C2D6D27AF/Documents/JukeboxDownloads/Test.mp3" id="audioPlayer" controls>
I also tried to set the src manually using jQuery:
$("#audioPlayer").attr("src","file:///Users/Marc/Library/Developer/CoreSimulator/Devices/59AA8A4B-5CE5-42E2-8CF8-7DA0DEB07E99/data/Containers/Data/Application/7406C75B-4509-44C5-A6C7-F71C2D6D27AF/Documents/JukeboxDownloads/Test.mp3");
However, both did not work for me and I am not able to play the audio, it always says "Error" without further explanation. When I use another source file it works perfectly (that means a file inside my www folder or on the web).
Any ideas why cordova does not play the file?
I would appreciate your help!
Further information: Cordova 5.0;xCode 6.3.1;iOS 8.3
Try referencing the file by creating the src like so:
var src = cordova.file.documentsDirectory + 'JukeboxDownloads/Test.mp3';
I have found that when building the app and rebuilding the referenced GUID for the app changes which causes the URL to be invalid.
In my experience, using cdvfile://localhost/persistent/ works for images but not video or audio files.