Imagine a scenario where you want to load media, or any other form of content, from the user’s computer rather than retrieving the content from the web server and consuming bandwidth every time the pages is loaded or refreshed – and this can be quite pricey if the content you’re loading is a video. That being said, having a web application that can access the user’s file directory poses a serious security threat as this makes the user’s computer vulnerable to threats with not so friendly intentions. So, whilst keeping this security issue in mind, let’s create a scenario where we retrieve the HTML, and other web content such as CSS and Javascript, from the web server but load the interactive content from the file directory.

Let’s start by creating a simple HTML file and add a HTML5 video tag linked to a video.

Run this on your browser and it should look something like this.

At this point let’s try and mimic the behavior of a web server by loading this HTML file on the Internet Information Services(IIS). I created a simple web site with a specific port(3001) and set it’s directory to where the HelloWorld.html is. Typing http://127.0.0.1:3001/helloworld.html in the browser’s address bar loaded the page as intended and the video still running just like it was before. So far so good. At this point the video is still in the same directory as the HTML file. I re-modeled the file system and created the following structure:

ROOT
– Server One
– – HelloWorld.html
– Server Two
– – PlaystationStartup.mp4

Server One is the web server where the HTML file is hosted and Server Two is the location of the video on the user’s computer. When I tried to edit the source of the video and changed it to the direct path, the video did not load and the following error showed up in the browser’s console.

One way to work around this is to host the video on the IIS at client-side and then make a reference to it, specifically by its port and file name, from the HTML file. I created another site on the IIS and mapped it on the new Server Two folder. I then edited the HTML file and the value of the source attribute was changed as below.

The web page was refreshed and the video loaded as intended. Even though the above is one way to load content from the user’s computer I still think that ideally content should be retrieved from the web server. However, in case of a closed environment and with certain strict conditions, it’s good to know that there are alternatives.

Adios,
Bjorn