# Flowplayer & iPad plugin

**URL:** https://community.wowza.com/t/flowplayer-ipad-plugin/36203
**Category:** Wowza Streaming Engine
**Tags:** media-players-and-devices
**Created:** [March 24, 2011, 10:27am UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203 "2011-03-24T10:27:35Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Brian\_Weaver](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@Brian\_Weaver](https://community.wowza.com/u/Brian_Weaver)
#### Post date: [March 24, 2011, 10:27am UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/1 "2011-03-24T10:27:35Z")

</div>

I’ve searched all over Flowplayer’s Forums with very little luck. I’m hoping someone here can help.

Has anyone had success getting Flowplayer to work with RTMP and the iPad plugin? I can view my video fine in Flash, but on iDevices all I get is a black screen. I know the video will play on iDevices because if I plug the url directly into Safari it plays no problem.

Here’s the code I’m using. Also, I’m running this on EC2 if that matters.

```auto
<script type="text/javascript" src="http://myserver.com/js/flowplayer/flowplayer-3.2.6.min.js"></script>
<script type="text/javascript" src="http://myserver.com/js/flowplayer/flowplayer.ipad-3.2.2.min.js"></script>
            
<a
    id="player" 
    href="rtmp://myserver.com:1935/vods3/_definst_/mp4:amazons3/mybucket/video.mp4" 
    style="display:block;width:600px;height:450px;">
</a>
            
<script type="text/javascript">
    window.onload = function(){
        $f("player", "http://myserver.com/js/flowplayer/flowplayer-3.2.7.swf", {
            clip: {
               url: 'mp4:video.mp4',
               provider: 'rtmp',
               autoPlay: false,
               ipadUrl: 'http://myserver.com:1935/vods3/_definst_/mp4:amazons3/mybucket/video.mp4/playlist.m3u8',
            },
            plugins: {
                rtmp: {
                    url: 'http://myserver.com/js/flowplayer/flowplayer.rtmp-3.2.3.swf',
                    netConnectionUrl: 'rtmp://myserver.com:1935/vods3/_definst_'
                }
            },
            canvas: {
                background: 'url(http://myserver.com/poster.jpg)',
                backgroundGradient: 'none'
            }                        
        }).ipad();
    };
</script>

```

Thanks!

Brian

---

<div class="post-metadata">

### Author: ![Roman\_Pekarek](https://avatars.discourse-cdn.com/v4/letter/r/ac8455/32.png) [@Roman\_Pekarek](https://community.wowza.com/u/Roman_Pekarek)
#### Post date: [March 24, 2011, 5:38pm UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/2 "2011-03-24T17:38:19Z")

</div>

u dont need flowplayer for ipad … just lint this url [http://myserver.com:1935/vods3/_definst_/mp4:amazons3/mybucket/video.mp4/playlist.m3u8](http://myserver.com:1935/vods3/_definst_/mp4:amazons3/mybucket/video.mp4/playlist.m3u8) onto your web page , and after click on ipad will be opened player and play your video …

ipad not opening flash …

---

<div class="post-metadata">

### Author: ![Richard\_Lanham](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@Richard\_Lanham](https://community.wowza.com/u/Richard_Lanham)
#### Post date: [March 24, 2011, 4:42pm UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/3 "2011-03-24T16:42:31Z")

</div>

Try this:

```auto
<script type="text/javascript">
    window.onload = function(){
        $f("player", "http://myserver.com/js/flowplayer/flowplayer-3.2.7.swf", {
            clip: {
               url: 'mp4:amazons3/mybucket/video.mp4',
               provider: 'rtmp',
               autoPlay: false,
               ipadUrl: 'http://myserver.com:1935/vods3/_definst_',
            },
            plugins: {
                rtmp: {
                    url: 'http://myserver.com/js/flowplayer/flowplayer.rtmp-3.2.3.swf',
                    netConnectionUrl: 'rtmp://myserver.com:1935/vods3/_definst_'
                }
            },
            canvas: {
                background: 'url(http://myserver.com/poster.jpg)',
                backgroundGradient: 'none'
            }                        
        }).ipad();
    };
</script>

```

---

<div class="post-metadata">

### Author: ![Richard\_Lanham](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@Richard\_Lanham](https://community.wowza.com/u/Richard_Lanham)
#### Post date: [March 24, 2011, 9:16pm UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/4 "2011-03-24T21:16:56Z")

</div>

I’m not sure then. Did you post on Flowplayer forum?

Richard

---

<div class="post-metadata">

### Author: ![Richard\_Lanham](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@Richard\_Lanham](https://community.wowza.com/u/Richard_Lanham)
#### Post date: [March 24, 2011, 9:27pm UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/5 "2011-03-24T21:27:43Z")

</div>

I would post there too. I’ll see if anyone else here has insight. Flowplayer is great, recommended (we have guides for it) but I don’t use it as much.

Richard

---

<div class="post-metadata">

### Author: ![Richard\_Lanham](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@Richard\_Lanham](https://community.wowza.com/u/Richard_Lanham)
#### Post date: [March 25, 2011, 2:28pm UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/6 "2011-03-25T14:28:08Z")

</div>

Thanks for the update and posting. I’m sure others (e.g. myself) will find it useful. Looks native for Flowplayer, their javascript hierarchical objects implementation (attractive but fragile and a little complicated).

Richard

---

<div class="post-metadata">

### Author: ![Brian\_Weaver](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@Brian\_Weaver](https://community.wowza.com/u/Brian_Weaver)
#### Post date: [March 24, 2011, 3:20pm UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/7 "2011-03-24T15:20:23Z")

</div>

Thanks for the reply Richard, same result though I’m afraid. Plays fine in flash, but just produces a black box on iDevices.

---

<div class="post-metadata">

### Author: ![Brian\_Weaver](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@Brian\_Weaver](https://community.wowza.com/u/Brian_Weaver)
#### Post date: [March 24, 2011, 4:20pm UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/8 "2011-03-24T16:20:41Z")

</div>

No, I didn’t. After spending several hours searching for answers on their forums and seeing the lack of answers/follow-up by their support staff, I decided to post here instead because you guys are always so great with your support. Perhaps it would be worth a shot…

---

<div class="post-metadata">

### Author: ![Brian\_Weaver](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@Brian\_Weaver](https://community.wowza.com/u/Brian_Weaver)
#### Post date: [March 25, 2011, 9:14am UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/9 "2011-03-25T09:14:27Z")

</div>

Well, this works… wish there were a more ‘native’ way of doing it though.

```auto
// if iDevice
    $iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
    $iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
    if ( $iPod || $iPhone || $iPad ) {
        $out = '<video id="player"
                    width="'. $width .'"
                    height="'. $height .'"
                    src="http://myserver.com:1935/vods3/_definst_/'.$src.'/playlist.m3u8"
                    poster="'. $poster .'">
                </video>';
    // if NOT iDevice
    }else{
        $out = '<script type="text/javascript" src="http://myserver.com/js/flowplayer/flowplayer-3.2.6.min.js"></script>
                <script type="text/javascript" src="http://myserver.com/js/flowplayer/flowplayer.ipad-3.2.2.min.js"></script>
                
                <a
                    id="player" 
                    href="http://myserver.com:1935/vods3/_definst_/'.$src.'" 
                    style="display:block;width:'.$width.';height:'.$height.';">
                </a>
                
                <script type="text/javascript">
                    window.onload = function(){
                    $f("player", "http://myserver.com/js/flowplayer/flowplayer-3.2.7.swf", {
                        clip: {
                            url: \''.$src.'\',
                            provider: \'rtmp\',
                            autoPlay: false,
                        },
                        plugins: {
                            rtmp: {
                                url: \'http://myserver.com/js/flowplayer/flowplayer.rtmp-3.2.3.swf\',
                                netConnectionUrl: \'rtmp://myserver.com:1935/vods3/_definst_\'
                            }
                        },
                        canvas: {
                            background: \'url('.$poster.')\',
                            backgroundGradient: \'none\'
                        }                        
                    });
                    };
                </script>';
    }
return $out;

```

---

<div class="post-metadata">

### Author: ![Gary\_Beldon](https://avatars.discourse-cdn.com/v4/letter/g/bc8723/32.png) [@Gary\_Beldon](https://community.wowza.com/u/Gary_Beldon)
#### Post date: [April 7, 2011, 2:43pm UTC](https://community.wowza.com/t/flowplayer-ipad-plugin/36203/10 "2011-04-07T14:43:24Z")

</div>

Did you ever get to the bottom of this? I’ve encountered the same problem.

I’ve identified what’s going wrong, but not why: Once you specify an “ipadUrl” it stops adding a src= parameter to the video tag, so the iDevice never knows what video to play.

I’ve worked around it for now by using Javascript to add a src after Flowplayer has finished with it, but I’d like to find out what I (we) are doing wrong and do it properly.

```auto
setTimeout("fixVideo()",50);
function fixVideo() {
        if (document.getElementById('player_api').innerHTML=='') {
                document.getElementById('player_api').innerHTML = '<source src="http://myserver.com:1935/vod/_definst_/mp4:video.mp4/playlist.m3u8">';
        }
}

```