Search code examples
javascriptjqueryipadflowplayer

Flowplayer and ipad conditional switching

I am using this chunk of code to put flowplayer on a page, and it pretty much renders flowplayer universal: it works with pretty much all PC browsers as well as iphones, ipads, android devices...

<script>
  $(document).ready(function() {
    if (navigator.userAgent.match(/Android/i)
       || navigator.userAgent.match(/webOS/i)
       || navigator.userAgent.match(/iPhone/i)
       || navigator.userAgent.match(/iPad/i)
       || navigator.userAgent.match(/iPod/i)
       || navigator.userAgent.match(/BlackBerry/i)
      ) {
          $f("player", "/flowplayer-3.2.16.swf", {
            clip: {
              provider: "rtmp",
              url: "streamname",
              ipadUrl: 'http://wowza.example:1935/live/_definst_/streamname/playlist.m3u8',
              bufferLength: 2,
              live: true,
            },
            plugins: {
              rtmp: {
                url: "/flowplayer.rtmp-3.2.12.swf",
                netConnectionUrl: "rtmp://wowza.example:1935/live"
              }
            }
          }).ipad({ simulateiDevice: true, controls: false });
      } 
      else {
          $f("player", "/flowplayer-3.2.16.swf", {
            clip: {
              provider: "rtmp",
              url: "streamname",
              ipadUrl: 'http://wowza.example:1935/live/_definst_/streamname/playlist.m3u8',
              bufferLength: 2,
              live: true,
            },
            plugins: {
              rtmp: {
                url: "/flowplayer.rtmp-3.2.12.swf",
                netConnectionUrl: "rtmp://wowza.example:1935/live"
              }
            }
          }).ipad();
      }
  });
</script>

My question is about clean code. As it is right now the code works, but it seems to me that I am duplicating the whole thing, and the only thing that is different between the if and the else is the last line:

}).ipad({ simulateiDevice: true, controls: false });

vs

}).ipad();

Is there a way of moving the if clause inside the ipad() function? Not being a jQuery or javascript developer I have been trying to do it but I am getting nowhere...

Solution

  • The simplest way is to create variables for the option values simulateiDevice and controls. You then use the if statement to set their values.

    Example

    <script>
  $(document).ready(function() {
    var simulateiDevice,
        controls;

    if (navigator.userAgent.match(/Android/i) || 
        navigator.userAgent.match(/webOS/i) || 
        navigator.userAgent.match(/iPhone/i) || 
        navigator.userAgent.match(/iPad/i) || 
        navigator.userAgent.match(/iPod/i) || 
        navigator.userAgent.match(/BlackBerry/i)) {
      simulateiDevice = false;
      controls = true;
    } else {
      simulateiDevice = true;
      controls = false;
}

$f("player", "/flowplayer-3.2.16.swf", {
  clip: {
    provider: "rtmp",
    url: "streamname",
    ipadUrl: 'http://wowza.example:1935/live/_definst_/streamname/playlist.m3u8',
    bufferLength: 2,
    live: true,
  },
  plugins: {
    rtmp: {
      url: "/flowplayer.rtmp-3.2.12.swf",
      netConnectionUrl: "rtmp://wowza.example:1935/live"
    }
  }
  }).ipad({
    simulateiDevice: simulateiDevice,
    controls: controls
  });
}); 
< /script>