One of my website is hosted at azure with IIS server. Faced an issue related to video and resolved it with some R&D. Here I am sharing the solution so that my R&D will help someone for sure.

Problem:

As per issue I was facing on my website, when we are uploading a video with m4v extension in any page with video tag, it results to a black screen occupying video space at front-end as showing image. When I explore this error in depth, I find that is is showing “Error loading this resource”. When I look to console it is showing like below:

“HTTP load failed with status 404. Load of media resource http://mywebsite.com/wp-content/uploads/2015/10/test-video.m4v?_=1 failed.”

“Failed to load resource: the server responded with a status of 404 (Not Found) test-video.m4v”

Solution:

When I dig more to the problem I found a very simple solution to this issue. We just need to add mime-type for the type of video which is not playing for us in our web.config file at root. As in my case adding .m4v mime-type resolved my problem and video start playing as required.

Put the below mentioned code in your web.config file :

<configuration>

    <system.webServer>

        <staticContent>
            <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
            <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
     </staticContent>

    </system.webServer>

</configuration>

 

Now, putting this code at exact place and in correct way is more important. Check with the below steps:

  1. First of all check if you have any web.config at root of your installation, if not then prepare a blank file name it “web.config” and place the above code and upload it to your root installation.
  2. If you have web.config then you must have “system.webServer”. Just put code which is in between of opening and closing of “system.webServer”.
  3. If you have “system.webServer” and “staticContent” both in your web.config file, then just put the line of mime-type at same place as above.
  4. Now please make sure for any duplicate entry for any mime-type, it should not be there.

It is recommended to take backup of your web.config file before making any change. In this way, your video will play like a charm.

Reason of issue:

After spending much time at various forums and articles, I came to know the exact reason of this problem.

IIS server 7 and its equivalent versions generally do not play or serve type of files which it does not know. It is due to some security reasons. We need to add custom mime-types to make sure the web server allows the clients to access them. So, it is required to add custom mime-type to let IIS know about few types of files. It can be done by using method we have explained above. We can add our required mime-type as explained above and prepare us for other specials one’s using below mentioned code.

<configuration>
    <system.webServer>
        <staticContent>
		  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
		  <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
		  <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
		  <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
		  <mimeMap fileExtension=".webm" mimeType="video/webm" />
		  <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
		  <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
		  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
		  <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
		  <remove fileExtension=".eot" />
		  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
		  <mimeMap fileExtension=".otf" mimeType="font/otf" />
		  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
		</staticContent>
    </system.webServer>
</configuration>

 
Please be informed that, once you upgrade your web server and move your website to IIS 8, then you will get some error message like below:

“Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’ set to ‘.m4v’”

It is because of the IIS 8 which already supports most of the mime-types. So, we need to remove our custom added mime-types from our web.config file to resolve this error.

Hope this will help someone 🙂