html5-video

Opening html file locally without live server does not give option to download video file

I have an html file. Within that html file, I have embedded a video file using <video> and <source> tags. While opening this html file locally (without live server), there is no option to download video file but opening same html file via live server, gives an option to download the video file. Here, I am using google chrome browser to view output. I have seen network tab inside dev tools but there is no mention of content disposition http header, set by live server. Somehow, is it because of content-disposition http header? or because of any other reason? What is the logic behind such behavior?

I have seen similar behavior while trying to download resources using download attribute of the <a> element. Here, in this case, if I open an HTML file locally (without live server) then the browser does not download the resources but if I open the same HTML file via live server then the browser downloads the resources.

Solution

  • 1.) Regarding the option to download a video:

    A dedicated download option to download a video is a feature implemented by Google Chrome browser and this feature is exclusive to Chrome browser only. Here, even if you open an HTML file locally by double-clicking it then also this dedicated download option will be there as far as the video which is embedded in an HTML file is served over a server.

    2.) Regarding how to make resources downloadable using the download attribute of an anchor tag <a>:

    You can make resources downloadable using the download attribute of an anchor tag <a>, provided that the resource is on the same origin as the HTML document.

    Now, an origin is defined as the combination of the protocol (http, https), domain (example.com), and port (:80, :443) of a URL.

    Modern browsers usually treat the origin of files loaded using the file:/// schema as opaque origins. What this means is that if a file includes other files from the same folder (say), they are not assumed to come from the same origin, and may trigger CORS errors.

    So we need to use a localhost like live server (Visual Studio Code extension).