Flash Fallback in IE8

Ben Creighton's Avatar

Ben Creighton

01 Dec, 2011 05:33 PM via web

Hi,

I've got the demo running on a development server and all instances work great except IE8. It seems to be loading the Flash -- at least it is present on the page, but not playing nor showing the player:

http://dent-web01.usc.edu/ostrownet/demo2.html

If I take the fallback Flash out of the context of VideoJS and simply call the object tag and its contents it runs fine:

ttp://dent-web01.usc.edu/ostrownet/demo3.html

Any idea why it won't load in the first scenario but does in the latter?

Thanks,

Ben

  1. 2 Posted by Ben Creighton on 01 Dec, 2011 06:16 PM

    Ben Creighton's Avatar

    To further clarify, it seems the error occurs when the video tag is added -- with everything but the video tag, the flash plays perfectly in IE8.

  2. 3 Posted by Ben Creighton on 01 Dec, 2011 06:32 PM

    Ben Creighton's Avatar

    OK, if I leave the page open, after two or three minutes the video suddenly appears. Seems it must be loading the entire video prior to playing? Not sure. Anyone experience a similar issue?

  3. 4 Posted by Peter R. Fletcher on 15 Dec, 2011 10:21 PM

    Peter R. Fletcher's Avatar

    Yes. I've just run into this one, too, and it does, indeed, seem to be loading the entire video before proceeding. I am combining a very slightly modified version of the DreamWeaver Flash code with VideoJS, and I thought that the two JavaScript libraries might be incompatible, but your experience suggests more to it than that. Does anyone have any ideas?

  4. 5 Posted by Bas on 12 Jan, 2012 12:59 PM

    Bas's Avatar

    I'm also have the problem that no video is shown in IE8 or IE7. I tested this by just running the demo file in the download on a Windows XP environment. Any idea's how to solve this? The demo.html files only contains the HTML5 video tag but when running I see that this is overruled by a flash player, but nothing is playing.

  5. 6 Posted by Peter R. Fletcher on 12 Jan, 2012 02:31 PM

    Peter R. Fletcher's Avatar

    I solved my problem with big files by cleaning up my code, and getting rid of the Dreamweaver components entirely, at which point the VideoJS code started working properly and the video started (more or less) right away when the page loaded. I never had a problem with the demo or with short clips.

  6. 7 Posted by Bas on 12 Jan, 2012 02:44 PM

    Bas's Avatar

    I found out that I am using the new version (v3) of the library. Looking around this forum I see that more people have problems related to IE7/8 and the new version. I assume that will be fixed soon.

    I have another question however: how do you initialize video js in the new version? I need this because I dynamicallly add the video tag to the dom at a certain moment and than want to see the videojs controls for it. In the old version (v2) I could use VideoJS.setup, but this is no longer supported?

  7. 8 Posted by Peter R. Fletcher on 12 Jan, 2012 03:09 PM

    Peter R. Fletcher's Avatar

    Ignore my last post - my morning coffee hadn't taken effect. I was actually not able to get the videojs player to work properly, and switched to using jwplayer, which does work well in my application.

  8. Support Staff 9 Posted by Steve Heffernan on 13 Jan, 2012 12:26 AM

    Steve Heffernan's Avatar

    Flash fix coming. Check out this page for initialization. http://videojs.com/docs/options/

  9. 10 Posted by Caleb on 15 Jan, 2012 02:00 AM

    Caleb's Avatar

    Any idea on when this Flash fix is going to be ready? Currently a bit of a road-block :(

  10. Support Staff 11 Posted by Steve Heffernan on 16 Jan, 2012 09:41 PM

    Steve Heffernan's Avatar

    I believe this fixed. I can play video on the videojs.com homepage in IE8 without issue. Are you still seeing errors?

  11. 12 Posted by matt on 07 Feb, 2012 03:34 PM

    matt's Avatar

    When embedding the Video tag at runtime (using jquery to inject) everything seems to load find until you click the play button. Then I get the following error:
    Flash Errorsrcnotfound

    It seems that the fallback api can't find the source file for some reason. Anything I have to look out for?

  12. Support Staff 13 Posted by Steve Heffernan on 07 Feb, 2012 10:22 PM

    Steve Heffernan's Avatar

    Try using a full URL to the video if you aren't yet. Http://...

    ---
    Steve Heffernan (mobile)

  13. 14 Posted by matt on 08 Feb, 2012 08:27 AM

    matt's Avatar

    Hi Steve,

    Thanks for your reply. However this does not yield any results. I think the problem is, that IE8 does not understand the injected tag. Here is what my JS code looks like: (using jquery)

    settings.videoUI = '<video id="" class="video-js vjs-default-skin" preload="auto" width="960" height="544" poster="" data-setup="{}"><source src="" type=\'video/webm\'><source src="" type=\'video/mp4\'><source src="" type=\'video/ogg\'></video>';
    
    ui  = $( settings.videoUI );
    // the following two lines just get some titles and other options that are passed into the plug-in class.
    titles  = mediaList[ displayingMediaIndex ][2].split(" - ");
    options = toObject( mediaList[ displayingMediaIndex ][1].split("||")[1] );
    // create a unique id for every time the video is added
    vidId   = titles[2] + new Date().getTime();
    
    ui.attr('id', vidId );
    ui.attr('poster', options.posterFrame );
    // add the mp4 video source to a source tag
    ui.children("source:eq(1)").attr('src', mediaList[ displayingMediaIndex ][0] );
    // add the ogv video source to a source tag
    ui.children("source:eq(2)").attr('src', options.alternateVideo );
    // add the webm video source to a source tag
    ui.children("source:eq(0)").attr('src', options.alternateVideoTwo );
    $( settings.contentId ).append( ui );
    videojs = _V_( vidId, { "controls": true, "autoplay": true, "preload": "auto" } );
    

    This is an excerpt from the my lightbox code that dynamically injects the the video tag just before the end of the body.

    This works fine in all browsers, but in IE8 I still get the Flash Error src not found Error. When I inspect the html source after injecting I can verify that the src attribute of the tags are empty.

    Oh, I'm also additionally using modernizer for the HTML5 compatibility. That should not interfere with the proper functionality of videojs correct?

    Can anybody help?

  14. 15 Posted by matt on 08 Feb, 2012 10:15 AM

    matt's Avatar

    Hey steve,

    Thanks for your response. However it did not solve the problem.
    There must be an error on how the flash player retrieves the source for the appropriate file. Cause I keep getting the Flash Error src not found Error.

    Here is what I'm trying to do more in detail.
    I have a jquery lightbox that injects it's code, when requested, to the end of the body (just before body) tag.
    The video code that I'm injecting is the one from your example:

    <video id="vid_id_timestamp" class="video-js vjs-default-skin" width="960" height="544" poster="posterframe_url">
        <source src="webm_video_url" type='video/webm'>
        <source src="mp4_video_url" type='video/mp4'>
        <source src="ogv_video_url" type='video/ogg'>
    </video>
    

    Now what I'm trying to do is the following:

    // videoUI contains the video tag as a string from above.
    $( "#content" ).appent( videoUI );
    // vid_id_timestamp is a genearted id with a timestamp appendix to make it unique
    videojs = _V_( vid_id_timestamp, { "controls": true, "autoplay": false, "preload": "auto" } );
    

    It seems that the code afterwards is changed correctly, however I can not see how you pass the src to the flash file anywhere. Do you retrieve the source through external interface via a anonymous callback?

    The only abnormal thing that I can make out in the code after runing the videojs init is the video tag to the end shows like this

    </video><//video>
    

    Some thing that I already checked:
    - Flash player is installed at version 11. - all sources are absolute - I'm running IE 8 without the Google Webkit Frame

    Any help is very welcome.

  15. 16 Posted by matt on 08 Feb, 2012 11:04 AM

    matt's Avatar

    So one step further.
    I noticed that when injecting the video tag, the videojs initializer does not write the markup correctly. for example tags are not remove and the src is not appended to the flashvars param, hence I get the flash source not found error.

    It seems to me this is either a bug or I'm still doing something wrong.

  16. 17 Posted by lawik on 08 Feb, 2012 09:29 PM

    lawik's Avatar

    I'm seeing the exact behaviour with the latest videojs version. The issue was quite obfuscated since I'm investigating through a rather complex Drupal implementation of Video support. But yes. Now everything works except Flash fallback for IE8 and (assuming) downwards.

  17. 18 Posted by Joel on 09 Feb, 2012 07:30 PM

    Joel's Avatar

    The Flash Errorsrcnotfound error seems to appear when the player swf file cannot be found. I get a 403 when trying to access the hosted .swf player in IE8.

    While I see that the videojs.com site works in IE8, I can't seem to prevent my video from auto-playing on page load in IE8/Flash fallback. Does anyone know how to tell the flash player not to autoplay?

  18. 19 Posted by Bas Slagter on 11 Feb, 2012 12:03 PM

    Bas Slagter's Avatar

    > From: ***@tenderapp.com
    > To: ***@hotmail.com
    > Date: Thu, 9 Feb 2012 14:30:45 -0500
    > Subject: Re: Flash Fallback in IE8 [Questions]
    >
    >

  19. Support Staff 20 Posted by Steve Heffernan on 14 Feb, 2012 01:35 AM

    Steve Heffernan's Avatar

    @matt & @lawik, got a link I can look at?

    @Joel, what URL are you using for the hosted swf? This one is working for me: http://vjs.zencdn.net/c/video-js.swf

  20. 21 Posted by lawik on 14 Feb, 2012 08:56 AM

    lawik's Avatar

    Sadly not at the moment. Non-Disclosure Agreements and unpublished products :/

  21. 22 Posted by matt on 14 Feb, 2012 09:55 AM

    matt's Avatar

    @steve

    Same here. I was trying to use videojs on a client project but could not get it to work with IE8. So I used projekktor instead.

    I will try to recreate the problem and post a link here, with anonymous content.

    Btw, I just saw that my code samples were finally posted above. Have a look at those.
    Basically when you inject a video tag after the DOM ready event into the body and try to use _V_('videotagid') to initialize in IE8, the src attribute of the source tags will be empty and videojs will not be able to read the src path to append to the flashvars that is passed to the flash file.
    If you set the src attribute on the video tag then all source tags will have have the same src path as the video tag.

  22. 23 Posted by chris on 15 Feb, 2012 06:25 PM

    chris's Avatar

    Hi @steve,

    I'm pretty sure I am experiencing the same issue. If you want to connect via email, I can provide you with a working example of the same.

  23. 24 Posted by Kameron Niksefat on 16 Feb, 2012 10:35 PM

    Kameron Niksefat's Avatar

    Furthermore in ie I am getting an error in video.js line 2124 character 15 - expected identifier, string or number

  24. 25 Posted by Peter Pedersen on 17 Feb, 2012 02:30 PM

    Peter Pedersen's Avatar

    I was having the same problems with the Flash backup. I got it fixed by having the loading video.swf from my own server. I guess thers is a cross-domain issue when loading from http://vjs.zencdn.net/c/...

  25. Support Staff 26 Posted by Steve Heffernan on 17 Feb, 2012 11:42 PM

    Steve Heffernan's Avatar

    @matt, without seeing it in action I'm not exactly sure what's going on with the Flash source, but if you're initializing the player after the lightbox, you might try adding the sources as an option instead of as tags. Here's a note from in progress docs.

    Array of Source Objects: To provide multiple versions of the source so that it can be played using HTML5 across browsers you can use an array of source objects. Video.js will detect which version is supported and load that file.

    myPlayer.src([
      { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
      { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
      { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
    ]);
    

    @chris, sent.

    @Kameron Niksefat, is that in IE8 too, and got a link I can check out?

    @Peter, were you loading the html locally? If so that can cause Flash to error as it doesn't like loading remote swfs locally.

  26. 27 Posted by Balu on 22 Feb, 2012 01:06 PM

    Balu's Avatar

    Hi Steve,

    I just wanted to thank you for your work and answers here.

    The absolute URLs hint made it work for me in IE8.
    Also I have to use data-setup="{}" in the

  27. 28 Posted by Peter Pedersen on 22 Feb, 2012 01:22 PM

    Peter Pedersen's Avatar

    @ Steve (Comment 26)

    No, I did the testing on a web server...

  28. 29 Posted by Joel Dow on 22 Feb, 2012 05:55 PM

    Joel Dow's Avatar

    ________________________________
     From: Peter Pedersen <***@tenderapp.com>
    To: ***@yahoo.com
    Sent: Wednesday, February 22, 2012 7:22 AM
    Subject: Re: Flash Fallback in IE8 [Questions]

Reply to this discussion

Internal reply

Formatting help or Preview

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.