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

    Online stream stops in HTML5 Android 7.1

    alexanderm82 Level 1

      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