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?