How do I solve following HTML5 video error: HTTP "Content-Type" of "text/plain" is not supported

Problem:

When trying to play a video using the HTML5 tag in a web page being programmed, the video plays fine when running the file locally in Firefox. However, when running the web page using Apache, an error like the following comes up in the console:

HTTP "Content-Type" of "text/plain" is not supported. Load of media resource http://127.0.0.1/path/to/video.webm failed.

The videos are encoded properly, so they are not the issue.

Solution:

This error is happening as Apache isn't reporting the MIME type of the video files correctly. To solve this, add the following lines to the relevant .htaccess file that covers (at the very least) the folders of the videos that will be played:

AddType video/webm .webm
AddType video/ogg .ogv
AddType video/mp4 .mp4

Notes:

Alternatively, the proper MIME types can be placed into the appropriate configuration file for Apache. This solution is particularly relevant if your web server is set up to ignore .htaccess files.

Get MAMP to only serve localhost (i.e. only your own computer)

Problem:

Although MAMP is already configured to be ideal for local development, anything you're working on can still be viewed over the network you're on, since it is a web server after all.

To test this, using another computer on the same network, try to access your web server by typing in your computer's IP address and port into a web browser. For instance, if your computer's IP address is 192.168.3.121 and the port MAMP is set to listen to is 120, type in: http://192.168.3.121:120

Note that this test will not work on networks that block servers, but it should work on open networks such as most home wireless networks.

Solution:

The best way to avoid casual snooping would be to use your firewall. The next lazy thing you can do is to configure the MAMP Apache server to only listen to programs on your local computer. One way to do this is by editing the right option in your Apache httpd.conf file:

1. In a text editor, open the file /Applications/MAMP/conf/apache/httpd.conf
2. Locate the line that contains the word Listen. For this example, we're going to assume it is: Listen 80
3. Comment this out and replace with: Listen 127.0.0.1:80
   • Note that the 80 in this example is the port number your apache server is listening to. You'll want to use the actual port number you set MAMP to listen to.

To test that this worked, use another computer try to access the computer with your started MAMP apache server by typing your computer's IP address into a browser (if you're unsure of how to find your computer's IP address, look up the Terminal command ifconfig in Google/Bing/etc.).

Note that the port configuration in your MAMP preferences pane will most likely report the incorrect port now (mine says 127). In addition, changing your port using the preferences pane could possibly undo this httpd.conf tweak (I haven't tested this).

This tweak was tested on MAMP 2.0.5.