Tabs initialization

Hello!

I am trying to initialize flowplayer mediaplayer (https://flowplayer.org/blog/flowplayer-7.0/) in an Ionic 2 tabs application. When I put flowplayer in the first tab it initializes and displays correctly. But when I put it on the second or third tab flowplayer object does not initialize properly. Console log contains no errors. Also I’ve tried to change " selectedIndex" parameter and flowplayer initializes correctly only on indicated tab. Please tell me how tab sequence may influence the initialization of JS objects?

Tab0: https://dl.dropboxusercontent.com/u/10051655/Veedo/Screenshot_20170214-150853.png
Tab1: https://dl.dropboxusercontent.com/u/10051655/Veedo/Screenshot_20170214-150909.png

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 3.16
Node Version: v7.4.0

Can you share some code as to what you have tried?

Hi mhartington,

Please see my code below.

home.html and about.html

<ion-content padding>

  <div class="flowplayer fp-slim"
      data-native_fullscreen="true"
      data-ratio="0.4167"
      data-live="true">
       <video autoplay>
          <source type="application/x-mpegurl" src="http://192.168.1.51:1935/rtp-live-aac/camera_00306F83B84C_code/playlist.m3u8">
       </video>
  </div>
</ion-content>

index.html

<html lang="en" dir="ltr">
<head>

  <link rel="stylesheet" href="//releases.flowplayer.org/7.0.2/skin/skin.css">
  <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>


  <script>
    flowplayer(function (api) {

      flowplayer.support.fullscreen = true;

      console.log(flowplayer.support.iOS);

       api.on("load ready", function (e, api, video) {
         var log = $("<p/>").text(e.type + ": " + video.src + ", duration: " +
                              (video.duration || "not available"));


       });

    });

    $(function () {
       // load clip object
       $("button:first").click(function () {
          // flowplayer(0).support
          flowplayer(0).load({
             sources: [
               { type: "application/x-mpegurl", src: "//192.168.1.51:1935/rtp-live-aac/camera_00306F83B84C_code/playlist.m3u8" }//,
               // { type: "video/mp4",  src: "//edge.flowplayer.org/functional.mp4" }
            ]
          });
       });

       // string argument to load()
       $("button:last").click(function() {
          flowplayer(0).load("//edge.flowplayer.org/playful.mp4");
       });

    });
  </script>

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

Today I’ve got error message when player was placed in a second tab:

error Uncaught TypeError: Cannot read property ‘domAvailable’ of null, http://192.168.1.49:8100/build/polyfills.js, Line: 3

Maybe this helps?