Question

I have an unusual question. It’s probably more about mobile than the html/php. The problem is with an iframe.

I have a video player in iframe. When I click on the play button – works fine on all browsers, but doesn’t on Android phones. It’s displayed but after clicking – there is no action done. However – When I click and hold the button > menu appears > i select open and it works fine. It so weird …

Generally speaking I have this on one of html pages:

 <iframe src="http://jupiters.captive-portal.com/generic/ign-games/1.html" name="i1" target="_top" frameset frameborder=0 id="i1"></iframe>

The content in this iframe is partly in php / partly in html.
here it is all:

<? 
$vidurl1 = "http://content.captive-portal.com/files/video/movie-news/vid1.mp4";
$thumburl1 = "http://content.captive-portal.com/files/video/movie-news/thumb1.jpg";
?>

@import url(“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/ui-lightness/jquery-ui.css”);

            <a href="<?=$vidurl1;?>" class="player" style="display:block;width:480px;height:360px;">
                <img src="<?=$thumburl1;?>" alt="Thumbnail for video"/>
            </a>


                <script type="text/javascript">
                    var video = document.createElement("video"),
                    idevice = /ip(hone|ad|od)/i.test(navigator.userAgent),
                    noflash = flashembed.getVersion()[0] === 0,
                    simulate = !idevice && noflash;
                    // REMOVE THE FOLLOW LINE TO DISABLE THE CODEC CHECK
                    simulate = simulate &&  !!(video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
                    flowplayer("a.player", {
                        src:"http://video.captive-portal.com/flowplayer/flowplayer.commercial-3.2.11.swf",
                        wmode: "opaque"
                    }, {
                        key: "#$4871c81e02586ce7fdb",
                        clip: {
                            autoPlay: true,
                            scaling: "fit",
                            }
                    }
                    ).ipad( controls: true, simulateiDevice: simulate );

                </script>

I know it may not mean much, however it’s working fine on all browsers, but not on Android. Is there anything I should know to get it working? maybe iframe blocks the player? is there any alternative for this?

The reason for using this method is that I need to implement the content from this iframe to many pages every week and I dont want to modify 5 pages. Instead of that I modify the page which is injected by iframe and it appears updated on the 5 pages I mentioned.
This is how it works in my test mode: test page

This is crucial for me so I will greatly appreciate any thoughts posted. Thank you in advance. P.

Answer 1

OK, I have sorted this out. it’s a player fault. This option works fine with different players, so if someone faces the same problem I suggest to swap the player. The one which is not working is flowplayer.