Internet Explorer not showing Flowplayer-Video

5
votes

I recently switched to Flowplayer (I was using VideoJS before) and I encountered yet another problem with our beloved Internet Explorer.

I'm trying to show an mp4-video (.h264-codec) with flowplayer, and it works perfectly in all browsers (chrome, firefox, safari, opera), but not in internet explorer. Strangly enough, in IE9 it just says «Video file not found», while in IE7-IE8 it says «Unsupported video».

<div class="flowplayer">
   <video poster="/videos/poster_bbb.jpg" width="222" height="125" src="/videos/bbb.mp4"></video>
</div>

I also tryed using the tag inside the tag, I tried reconverting the video, I tried using an absolute and web path to the video, all without results.

Note: Since the user should be able to upload his own .mp4 video, I can't use other tags for .ogg or .webm

Thanks in advance!

Elveti

4
jqueryinternet-explorermp4flowplayer
have your checked your flash version – rahul
I have the newest flash version. I also checked on multiple machines, all have the same problem – elveti
Internet Explorer strikes again! You'll need an object for that. – Deep Frozen

4 Answers

2
votes

may be this post can help you

http://www.warriorforum.com/programming-talk/257997-help-flow-player-does-not-appear-internet-explorer.html

from the post

If you want to embed an MP4 video on your site to display on IE then you will need to use the following code changing videofilename.mp4 to the name of your video

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" 
WIDTH="320" HEIGHT="256" >
<PARAM NAME="src" VALUE="videofilename.mp4">
<PARAM NAME="autoplay" VALUE="true">
<PARAM NAME="controller" value="true">
<EMBED SRC="QTMimeType.pntg" TYPE="image/x-macpaint"
PLUGINSPAGE="http://www.apple.com/quicktime/download" QTSRC="videofilename.mp4" 
WIDTH="320" HEIGHT="256" AUTOPLAY="true" CONTROLLER="true">
</EMBED>
</OBJECT>
4
votes

I had the same problem. It worked everywhere fine, except IE. It is because IE is looking for video using relative path from location where is flowplayer.swf located. But others browsers are using relative path from location where is executing script. So you can either try it with absolute path or I am using this workaround for now:

I have following structure

player/flowlayer.swf
movie/data/Video/video.mp4
play.html

Than to play the movie from play.html - where is linked flowplayer.swf I am using conditional comments.

<div class="flowplayer" data-engine="flash" data-swf="./player/flowplayer.swf">
<video autoplay>
  <!--[if IE]>
     <source type="video/mp4" src="../movie/data/Video/video.mp4"/>
  <![endif]-->
  <!--[if !IE]><!-->
     <source type="video/mp4" src="movie/data/Video/video.mp4"/>
  <!--<![endif]-->
</video>
</div>
3
votes

Another alternative for Internet Explorer (9 & 10) is to try using the source type video/flash instead of video/mp4, such as this:

<source type="video/flash" src="..."/>
2
votes

After doing a lot of research and unable to add the header tag to force compatibility mode (because my video is inside a modal). I got it to work for IE9 by changing the source tag from

<source type="video/mp4" src="video.mp4"></source>

to

<source type="text/html" src="video.mp4"></source>

I saw that when the video was not being played in IE9, the mp4 file was being redered as text/html and not video/mp4... so I just tried changing the tag and it worked!

I know this does not make any sense... but since when IE makes sense?! So, if you cant set the header in your php file header('X-UA-Compatible: IE=EmulateIE8'); like in my situation, try setting the mp4 type to text/html