UIWebView中的中心JWPlayer

Question

我正在WebView加载HTML文件，我想居中JWPlayer 。 我成功地使图像居中，但没有使JWPlayer 。 我显示边框以显示我想居中的JWPlayer 。 我不知道我在做什么错：

html：

<html><body>
    <div id="banner"></div>
    <div id="my-video"></div>
    <div align="middle" id="playerKQLqhEDY5doy_wrapper" style="text-align: center; position: relative; display: block; width: 320px; height: 300px; overflow:auto;-webkit-overflow-scrolling:touch"><a id="beforeswfanchor0" href="#playerKQLqhEDY5doy" tabindex="0" title="Flash start" style="border:0;clip:rect(0 0 0 0);display:block;height:1px;margin:-1px;outline:none;overflow:hidden;padding:0;position:absolute;width:1px;" data-related-swf="playerKQLqhEDY5doy"></a>
        <object type="application/x-shockwave-flash" data="http://p.jwpcdn.com/6/11/jwplayer.flash.swf" width="100%" height="100%" bgcolor="#000000" id="playerKQLqhEDY5doy" name="playerKQLqhEDY5doy" class="jwswf swfPrev-beforeswfanchor0 swfNext-afterswfanchor0" tabindex="0"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="seamlesstabbing" value="true"><param name="wmode" value="opaque"></object><a id="afterswfanchor0" href="#playerKQLqhEDY5doy" tabindex="0" title="Flash end" style="border:0;clip:rect(0 0 0 0);display:block;height:1px;margin:-1px;outline:none;overflow:hidden;padding:0;position:absolute;width:1px;" data-related-swf="playerKQLqhEDY5doy"></a>
        <div id="playerKQLqhEDY5doy_aspect" style="display: none;"> </div>
        <div id="playerKQLqhEDY5doy_jwpsrv" style="top: 0px; z-index: 10;"></div>
        <div id="playerKQLqhEDY5doy_sharing" style="top: 0px; z-index: 11;"></div>
</div>
    <script type="text/javascript">
        jwplayer('playerKQLqhEDY5doy').setup({
                                             playlist: [{
                                                        image: "http://www.bundoransurfco.com/wp-content/uploads/2010/12/homepage_offers1.jpg",
                                                        sources: [{
                                                                  file: "rtmp://144.76.75.86/live/bundoransurfco"
                                                                  },{
                                                                  file: "http://144.76.75.86/hls/bundoransurfco/playlist.m3u8"
                                                                  }]
                                                        }],
                                             height: 200,
                                             primary: "flash",
                                             width: 300,
                                             controls: true,
                                             autostart: true,
                                             sharing: true

                                             });
        </script>

    <style type="text/css">
        #playerKQLqhEDY5doy_wrapper {
            left:0em;
            right:0em;
            top:12.2em;
            bottom:0em;
            max-width: 100%;
            max-height: 100%;
            border-style: solid;
            border-width: 10px;

        }
    #photo{
        position:relative;
        max-width: 100%;
        bottom:0em;
        left:0em;
        right:0em;
        top:0em;
        display:block;
    }
    iframe, object, embed {
        position:relative;
        display:block;
        border-style: solid;
        border-width: 10px;
    }
    </style>
    <span id="photo" align="middle">
            <img src="http://myipstream.com/images/bundoran.jpeg" width="139" height="50" alt="@ Surf Co">



</body></html>

已经尝试：

<div class="header-wide" style="clear: both; margin: auto;">[var.lang_latest_videos]</div>
    <!--Video Player Container.  This is where the player embed code goes-->
    <div id="index-player-container" style="margin: auto;">
        <div id="player"></div>
        <script type="text/javascript">

            jwplayer('playerKQLqhEDY5doy').setup({
                                                 playlist: [{
                                                            image: "http://www.bundoransurfco.com/wp-content/uploads/2010/12/homepage_offers1.jpg",
                                                            sources: [{
                                                                      file: "rtmp://144.76.75.86/live/bundoransurfco"
                                                                      },{
                                                                      file: "http://144.76.75.86/hls/bundoransurfco/playlist.m3u8"
                                                                      }]
                                                            }],
                                                 height: 200,
                                                 primary: "flash",
                                                 width: 300,
                                                 controls: true,
                                                 autostart: true,
                                                 sharing: true

                                                 });
            </script>
    </div>
    <!--End Video Player Container-->

Answer 1

居中JWPlayer的一个非常简单的解决方案：

---

 <div class="header-wide" style="clear: both; margin: auto;">[var.lang_latest_videos]</div>
  <!--Video Player Container.  This is where the player embed code goes-->
  <div id="index-player-container" style="margin: auto;">
    <div id="player"></div>
    <script type="text/javascript">
        var so = new SWFObject('[var.base_url]/flvplayer.swf','mpl','708','300','7');
      so.addParam('allowscriptaccess','always');
      so.addParam('allowfullscreen','true');
      so.addParam('flashvars','file=[var.base_url]/playlist.php&backcolor=5798CA&frontcolor=FFFFFF&lightcolor=FFFFFF&screencolor=FFFFFF&logo=[var.base_url]/images/playerlogos/logo-player.png&playlistsize=220&skin=[var.base_url]/skins/Snel.swf&volume=100&playlist=right&shuffle=true&stretching=exactfit&autostart=[var.auto_play_index]');
      so.write('player');
    </script>
  </div>
  <!--End Video Player Container-->

从链接引用。

Answer 2

我发现了神奇的CSS：

display: block;
    margin-left: auto;
    margin-right: auto

做到了！

 #playerKQLqhEDY5doy_wrapper {
        position: absolute;
        display: block;
        margin-left: auto;
        margin-right: auto;
        top:10em;
    }