Safari not displaying flash video correctly like Firefox

Discussion in 'Web Design and Development' started by Brendon Bauer, Oct 17, 2008.

  1. Brendon Bauer macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #1
    Ok, I'll start from the beginning:

    I am the web guy for my church website and we use Wordpress to power our sermon video podcasts. Each week we upload the sermons to blip.tv and use those links (to flash versions) to power it. In wordpress I call the .flv file from blip.tv using a link that calls for an external javascript file to pop up the sermon in a new window. You can test out the video here: http://www.summitnorthwest.org/sermonvideo/ So here's the code (taken from the most recent post--9/20/08):

    In wordpress, here is the link to click on:
    Code:
    <a href="http://blip.tv/file/get/Summitnorthwest-RonAndNancyRocky699.flv" onclick="javascript:flvplayer(this.href,'1'); return false;" target="_blank">Play Video</a>
    Here is the code between the head tags that calls the js file:
    Code:
    <script src="http://www.summitnorthwest.org/sermons/flvplayer.js" type="text/javascript"></script>
    Here is the external js file:
    Code:
    function flvplayer(filepath,WindowNumber) 
    {
        PlayerWin = window.open('',WindowNumber,'width=350,height=315,top=75,left=75,screenX=75,screenY=75,resizable=1,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0');
    
        PlayerWin.focus();
        PlayerWin.document.writeln("<html><head><title>Video Sermon Player</title></head>");
        PlayerWin.document.writeln("<body bgcolor='#000000'>");
        PlayerWin.document.writeln("<div align='center'><table border='0' width='100%' height='90%'><tr><td>");
        PlayerWin.document.writeln("<embed src='http://www.summitnorthwest.org/sermons/mediaplayer/player.swf' width='100%' height='100%' allowscriptaccess='always' allowfullscreen='true' flashvars='file=" + filepath + "&autostart=true&fullscreen=true&skin=http://www.summitnorthwest.org/sermons/mediaplayer/nacht_skin.swf' />");
        PlayerWin.document.writeln("</td></tr></table></div>");
        PlayerWin.document.writeln("<form><div align='center'><input type='button' value='Close this window' onclick='javascript:window.close();'></div></form>");
        PlayerWin.document.writeln("</body></html>");
    
        PlayerWin.document.close();
    }
    Now here is the problem... When clicking "Play Video" in Firefox, the new window pops up nicely and opens the sermon in a flash player. The flash player/video is maximized inside the div tag so you can resize the window and in turn the video resizes with it. This works great in Firefox. However, in Safari the video shows up somewhere around 175x135 and doesn't resize at all when you resize the window.

    Any ideas why?
     
  2. Brendon Bauer thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #2
    No idea? Here are some screenshots for those of you who can't test it. The one that looks normal is in Firefox and the one where the video is tiny is Safari. I assume it's a gecko vs webkit issue because Google Chrome renders it in the same way Safari does: messed up.
     

    Attached Files:

  3. hashilli macrumors member

    Joined:
    Feb 13, 2007
    #3
    I've seen ppl use this...

    I have seen people use SWFObject with a add on SWFForceSize. SWFObject is now in version 2 and hosted by google, so the functionality of SWFForceSize may be built into the latest version.

    http://code.google.com/p/swfobject/
     
  4. Brendon Bauer thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #5
    Changing the table width and height from 100% and 90% to a pixel value like 330 and 260 fixes the issue in Safari (webkit), but it's not the end solution because the purpose of the % is to allow you to resize the window and have the video resize with it. By setting a pixel value for the height and width you stop the video from resizing... It's stuck at that value. What causes the video to be super tiny when you set the table width/height to a percentage value, and inside of that you set the embed width/height to a percentage value? And is there any workaround?

    Thanks for your help!

    Also, I looked into that SWFObject thing, but I'm not really sure how to set that up. I glanced through the documentation, but I don't have much experience in swf/js stuff.
     
  5. Brendon Bauer thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #6
    Figured it out... Apparently if I just remove the table completely and instead reduce the embed size to around 95% by 90%, I get the same effect. I'm not sure why I had the table there in the first place. For some reason I thought I needed it. It's now working great in Safari (webkit) and Firefox (gecko).
     

Share This Page