Home > Web > Flex >

MP4 files in Flex VideoDisplay

Posted Jan 8, 2009
Last Updated Nov 12, 2011

I was recently building a new Flash-based video player for Webonizer when I came across a problem that I could not fix—every time I tried to load an MP4 video into the output SWF... the video would load into the player but would not play. Instead, the Video Display only showed black. I knew it was loading because I could access the video properties (like total bytes) in ActionScript.

The problem seemed more ominous when I discovered that my video player was working as expected in Firefox; it was not working in IE or Google Chrome. As my friend Andrew Penry pointed out, the fact that it worked in Firefox but not Chrome was especially odd since the two were (in our understanding) both using the exact same plugin for Flash.

Another curious oddity of this was that if I used an FLV video file instead of an MP4, the player worked. I began to suspect that only FLV files would work in the VideoDisplay component of Flex. But I was wrong.

Andrew tested MP4 files from a random website using a Flex VideoDisplay. The files worked when the VideoDisplay source was set to the remote location of the MP4. But when we copied them locally, we discovered that the files would again fail to play. That led us to scratching our heads but, in the end, pointed the way to fix the problem—this was not a problem with the Flex VideoDisplay! This was an issue caused by the server!

I remembered that I had a similar type of problem in the past where a PHP script in Webonizer serves ZIP files; that script developed an error after we added the DEFLATE module in Apache. Zip files served from the script were being served in a fashion that confused Internet Explorer but were downloading fine in Firefox. After writing an exception for DEFLATE into Apache for the script, our problems went away. So I wrote an exception into Apache for MP4 files—voila! The issue is fixed, and our server now serves MP4s as required by the Flex VideoDisplay in IE.

The Fix

Here is the line I added into the Apache configuration (httpd.conf) to fix my local server:

SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|rar|zip|mp4|mp3)$ no-gzip

Furthermore... if you have a script that is dynamically returning the contents of these files, you will need to exclude that script:

SetEnvIfNoCase Request_URI ^(.*MYSCRIPT.PHP.*)$ no-gzip dont-vary

Note that if you do not have access to the php.ini file, you may need to contact your host and ask them to turn off DEFLATE for any file that is already compressed. You may also be able to write this command into your HTACCESS file.

Flash and Flex Tips

Information and tips on various topics relating to Flex, Flash Builder and ActionScript 3 (AS3).

  1. MP4 files in Flex VideoDisplay
  2. Flash bgcolor and allowFullScreen Parameters Not Working?

Comment

No HTML Tags are permitted.

alchemist

Sep 9, 2009

Also make sure the mp4 is encoded in h264 format otherwise it wont render see: http://bytearray.brixtonjunkies.com/2009/08/21/high-definition-mp4-with-flex-videodisplay/
Wall Worm plugins and scripts for 3ds Max