3 Replies Latest reply on May 26, 2017 11:57 AM by alexanderm82

    Online stream stops in HTML5 Android 7.1

    alexanderm82

      Hello, I've built an app using jplayer and HTML5. Everything works fine for older versions of Android, but in Android 7.1, playback of online streams stops after 4 minutes and some seconds, every time screen goes off. If I turn the screen on soon after stopping, playback continues. It's not a player issue, as I've tried using numerous other players, but not jplayer. The issue is the same when using the <audio> tag. Can you please help me out?

        • 1. Re: Online stream stops in HTML5 Android 7.1
          alexanderm82 Level 1

          P.S. I just found out, that the issue is related to the new battery optimization of Android. If I switch it off for the specific app, there are no issues. But I don't know what am I supposed to do, in order for the app to run without switching off battery optimization manually?

          • 2. Re: Online stream stops in HTML5 Android 7.1
            audreyeso Adobe Employee

            Hi! If you could provide a code sample, that would be awesome! Thank so much!

            • 3. Re: Online stream stops in HTML5 Android 7.1
              alexanderm82 Level 1

              Hello audreyeso, thank you so much for the attention.

               

              It's a simple HTML code, which I managed to turn into an app thanks to Phonegap. But now with the Battery optimization in Nougat the internet connection for the app stops every 4 minutes after screen is off, and I don't know what to do...

               

              Here is the code:

              index.html -

               

              <!DOCTYPE html>

              <html>

              <head>

              <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

              <script type="text/javascript" src="cordova.js"></script>

              <meta name="format-detection" content="telephone=no" />

              <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

              <title>Radio Online</title>

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

              <link href="dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />

              <script type="text/javascript" src="lib/jquery.min.js"></script>

              <script type="text/javascript" src="dist/jplayer/jquery.jplayer.min.js"></script>

              <script type="text/javascript" src="dist/add-on/jplayer.playlist.min.js"></script>

              <script type="text/javascript" charset="utf-8">

              document.addEventListener("deviceready", onDeviceReady, false);

               

               

              function onDeviceReady() {

                  document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button

              }

               

               

              function onBackKeyDown(e) {

                  e.preventDefault();

                  navigator.notification.confirm("Are you sure you want to exit?", onConfirm, "Confirmation", "Yes,No");

                  // Prompt the user with the choice

              }

               

               

              function onConfirm(button) {

                  if(button==2){//If User selected No, then we just do nothing

                      return;

                  }else{

                      navigator.app.exitApp();// Otherwise we quit the app.

                  }

              }

              </script>

              <script type="text/javascript">

              var delay=2000;

              setTimeout(function(){

              //<![CDATA[

              $(document).ready(function(){

               

               

              new jPlayerPlaylist({

              jPlayer: "#jquery_jplayer_1",

              cssSelectorAncestor: "#jp_container_1"

              }, [

              {

              title:"title",

              mp3:"http://xx.xx.xx.xx:8000/;play.mp3"

              },

              {

              title:"title2",

              mp3:"http://xxx.xxx.xxx.xxx:8000/;play.mp3"

              }

              },

              ], {

              swfPath: "../../dist/jplayer",

              supplied: "oga, mp3",

              wmode: "window",

              useStateClassSkin: true,

              autoBlur: false,

              smoothPlayBar: true,

              keyEnabled: true,

              });

              });

              //]]>

              }, delay);

              </script>

              </head>

              <body onload="onLoad()" onresize="onResize()" bgcolor="#26102e" style="margin:0px; background-size: 100% 100%; background-position:100% 100%; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background-color:#26102e;" >

              <div id="jquery_jplayer_1" class="jp-jplayer"></div>

              <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">

              <div class="jp-type-playlist" >

              <div class="jp-gui jp-interface">

              <div class="jp-controls-holder">

              <div class="jp-controls">

              <button class="jp-previous" role="button" tabindex="0">previous</button>

              <button class="jp-play" role="button" tabindex="0">play</button>

              <button class="jp-stop" role="button" tabindex="0">stop</button>

              <button class="jp-next" role="button" tabindex="0">next</button>

              </div>

              <div class="jp-progress">

              <div class="jp-seek-bar">

              <div class="jp-play-bar"></div>

              </div>

              </div>

              </div>

              </div>

              <div class="jp-playlist" >

              <ul>

              <li> </li>

              </ul>

              </div>

              </div>

              </div>

              </body>

              </html>

               

              This is my config.xml:

               

              <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="radio.radio" version="1.11.1">

                <name>Radio</name>

                <description>Radios online</description>

                <author href="http://www.www.com" email="www@www.com">Company Ltd.</author>

                <content src="index.html"/>

                <preference name="permissions" value="none"/>

                <preference name="phonegap-version" value="cli-6.5.0"/>

                <preference name="orientation" value="portrait"/>

                <preference name="target-device" value="universal"/>

                <preference name="fullscreen" value="false"/>

                <preference name="webviewbounce" value="true"/>

                <preference name="prerendered-icon" value="true"/>

                <preference name="stay-in-webview" value="false"/>

                <preference name="ios-statusbarstyle" value="black-opaque"/>

                <preference name="detect-data-types" value="true"/>

                <preference name="exit-on-suspend" value="false"/>

                <preference name="show-splash-screen-spinner" value="true"/>

                <preference name="auto-hide-splash-screen" value="true"/>

                <preference name="disable-cursor" value="false"/>

                <preference name="android-minSdkVersion" value="14"/>

                <preference name="android-installLocation" value="auto"/>

              <plugin name="cordova-plugin-console" source="npm"/>

              <plugin name="cordova-plugin-dialogs" source="npm"/>

              <plugin name="cordova-plugin-splashscreen" source="npm"/>

              <preference name="show-splash-screen-spinner" value="true" />

                  <preference name="auto-hide-splash-screen" value="true" />

              <preference name="SplashScreenDelay" value="5000" />

              <gap:splash src="splashscreen.jpg" />

              <preference name="android-build-tool" value="gradle" />

              <plugin name="cordova-plugin-admobpro" source="npm" />

                <access origin="*"/>

              <plugin name="cordova-plugin-whitelist" source="npm" />

                  <allow-intent href="http://*/*" />

                  <allow-intent href="https://*/*" />

                  <platform name="android">

                      <allow-intent href="market:*" />

                  </platform>

                <icon src="icon.png"/>

                <icon src="icon1.png" gap:platform="android" gap:qualifier="ldpi"/>

                <icon src="icon2.png" gap:platform="android" gap:qualifier="mdpi"/>

                <icon src="icon3.png" gap:platform="android" gap:qualifier="hdpi"/>

                <icon src="icon4.png" gap:platform="android" gap:qualifier="xhdpi"/>

                <gap:splash src="www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi"/>

                <gap:splash src="www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi"/>

                <gap:splash src="www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi"/>

                <gap:splash src="www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi"/>

                <gap:splash src="www/res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>

                <gap:splash src="www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>

                <gap:splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>

                <gap:splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136"/>

                <gap:splash src="www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>

                <gap:splash src="www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>

                <gap:splash src="www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>

              </widget>

               

               

              I'm not really into coding, so I'd be really grateful, if yet some solution exists...

               

              Thank you in advance!

               

              Alexander