How to detect inactivity, so videostreaming stops.

[sphere]

Hi,

how do one detect inactivity, when an app goes to the background or when the user has pressed the device Power Button?
So you can use this to stop/pause video play in the Browser Widget when the app or the device goes to either state.

Google refuses apps which have the ability to play videos when streaming does not stop in either of the above mentioned states. It seems it then does not comply with the Device and Network abuse Policy.

Thanks for any help on this.

Sphere.

[sphere]

How come, always when i post something, i find something of interest (but am not smart enough to implement)...

Could this be implemented, seems to do exactly what is needed. Pause when browser is out of visibility. For Desktop and Mobile:
https://developer.mozilla.org/en-US/doc ... bility_API

In the Dictionary i could not fidn something that would help, but maybe the above api does.

and also :https://www.w3.org/TR/page-visibility/? ... -interface point 3.

How to implement this and/or is there already something which can handle this in LC?

asking the same but in another way, after being samshed to the wall....What do we do without Hermann's expertise?
I have to check these things out on the javascript working in browser, and maybe come to a solution to implement one of the visibilty examples (see the links) the Widgets Browser should be compatible.

[bogs]

I know next to nothing about how to do what your asking about, but am curious about something in what you are asking about. I don't have a smart phone or tablet, so bear with my ignorance.

Does the sound come through when the program goes to background?

The reason I ask is that, often times when I am on my laptop or desktop system, I'll have a series of videos running in the background so I can listen to them while doing other things. If this happens on mobile as well, people may well want that working.

If not, or if there is some reason it should be stopped, that of course is a different case, but if it does continue to play sound while in the background, it might be desirable behavior by the user.

[sphere]

Hi Bogs,

i tried the piece of javascript code and putted in a variable, then do variable as JavaScript in widget browser.
Now this sems to work when the app goes to background, video and sound stops. But not when pushing the power button, then music/video still plays although the screen is black.

Yes this could be desirable behaviour for a user, but it violates with googles rules, so simply not aloud. As it does not comply to the network abuse rules.
You can read it here https://play.google.com/about/privacy-s ... work-abuse if you like...

So i need to be able to stop the playing when Power btn is pushed. With the visibilty javascript this seems not to happen.

[bogs]

Well, I can't answer that one, after reading the link text I didn't take it to mean background apps couldn't continue (although they do list what continuing background apps shouldn't do).

The power button of course should suspend activity (missed that in the initial post, sorry).

[sphere]

No problem.

This is also an interesting post on stackoverflow:
https://stackoverflow.com/questions/684 ... id#6848599

On the otherhand it could be that the JavaScript is not working, because the app is also invisible when Power is pressed, i assume this would be the same when putting the app to background. So a quickly test with the app testing without the javascript did the same.
So no play whengoing to background, but does play when Power is pushed.

i did this and called it before opening a videoclip:
on command
put "var videoElement = document.getElementById("& quote & "videoElement"& quote & ");function handleVisibilityChange() { if (document.visibilityState == "& quote & hidden & quote & ") { videoElement.pause(); } else { videoElement.play(); } } document.addEventListener('visibilitychange', handleVisibilityChange, false);" into tScript
do tScript in widget "browser"
end command

and then called it just before loading the url, but i notice no difference, keeps happely playing when Power is pushed.

[[-hh]]

(You are joking with beginners: certainly "on command" will never compile because "command" is a synonym for "on".)

You could try the following.

a. Add the following to your htmltext, immediately before </body></html>, we probably need especially the webkit-prefix.

Code: Select all

<script> //from MDN
(function() {
   'use strict';
   var hidden, visibilityChange; 
   if (typeof document.hidden !== "undefined") {
      hidden = "hidden"; visibilityChange = "visibilitychange";
   } else if (typeof document.mozHidden !== "undefined") {
      hidden = "mozHidden"; visibilityChange = "mozvisibilitychange";
   } else if (typeof document.webkitHidden !== "undefined") {
      hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange";
   }
   var videoElement = document.getElementById("videoElement");
   function handleVisibilityChange() {
      if (document[hidden]) { videoElement.pause();
      } else { videoElement.play();
      }
   }
   if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
      alert("This demo requires a modern browser that supports the Page Visibility API.");
   } else {
      document.addEventListener(visibilityChange, handleVisibilityChange, false);
      videoElement.addEventListener("pause", function(){ liveCode.hhSetInfo('Paused');
      }, false);
      videoElement.addEventListener("play", function(){ liveCode.hhSetInfo('Playing');
      }, false);
   }
})();
</script>

b. Add a field "info" to your card and also the following to your widget's script or to your card script, for testing:

Code: Select all

on hhSetInfo p1
   put p1 && the internet date into fld "info"
   -- do something with that info
end hhSetInfo

c. set the javaScriptHandlers of widget "browser" to "hhSetInfo"

d. (optional) If you wish to play the video only while it is (mostly) visible then add also the following to your htmltext, immediately before </body></html>.

Code: Select all

<script> // a simple effective technique seen at stackoverflow
window.onload=function(){
   function checkVideoVis() {
      var video = document.getElementById("videoElement");
      var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight;
      var r = x + w, b = y + h, vX, vY;
      vX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth  - x, r - window.pageXOffset));
      vY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
      if (vX /w * vY / h > 0.62) { video.play(); liveCode.hhSetInfo('Playing');
      } else { video.pause(); liveCode.hhSetInfo('Paused');
      }
   }
   window.addEventListener('scroll', checkVideoVis, false);
   window.addEventListener('resize', checkVideoVis, false);
}
</script>

[sphere]

Thank you Hermann,
Ha, yes that command was something stupid indeed, just copied quick the code and changed the name here, the actual naming is this:
command VidNonVis
put "var videoElement = document.getElementById("& quote & "videoElement"& quote & ");function handleVisibilityChange() { if (document.visibilityState == "& quote & hidden & quote & ") { videoElement.pause(); } else { videoElement.play(); } } document.addEventListener('visibilitychange', handleVisibilityChange, false);" into tScript
do tScript in widget "clipinbrows"
end VidNonVis

I don't actually understand where i should put the htmltext, as the video is directly streamed from Youtube, so it's not from a page of my website, or am i misunderstanding that part? . Can i use: Set the htmltext property for that?
After re-asking what the main issue was for rejecting, it is not the streaming of the Youtube content but namely the Network & Device policy where the video keeps playing after Power has been pushed.

Also should the name of the handler whcih contains the JavaScript be mentioned in the Widget's Property pane at the JavaScript Handler input field?
I did not do that. That's your point c i guess.

I will do some testing.

thanks

EDIT the hhSetInfo command did not do a thing, so no date into the field, i added the handler name to the widget.
Also tried the name of my Javascript handler into the widget also no difference.

[[-hh]]

Hi sphere,

how do you get the video? Is it not an embedding code?
You can't do anything here without knowing and setting the htmltext of the widget.

H.
p.s. The "hhGetInfo" is only for a callback (the test) here.

[sphere]

Hi Hermann,

i get the URL from a list from my DB and a user can choose from the list in a button and it will be putted in a variable and then:
set the URL of widget"clipinbrows" to tClipUrl

the url is like: https://www.youtube.com/embed/rYIagCdmjqY

[[-hh]]

Please try the following.

1. Make a field "HTML", put the following into it and hide it.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>   
<iframe id="videoElement" width="[[vWidth]]" height="[[vHeight]]" src="[[tClipUrl]]" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script>
(function() {
   'use strict';
   var hidden, visibilityChange; 
   if (typeof document.hidden !== "undefined") {
      hidden = "hidden"; visibilityChange = "visibilitychange";
   } else if (typeof document.mozHidden !== "undefined") {
      hidden = "mozHidden"; visibilityChange = "mozvisibilitychange";
   } else if (typeof document.webkitHidden !== "undefined") {
      hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange";
   }
   var videoElement = document.getElementById("videoElement");
   function handleVisibilityChange() {
      if (document[hidden]) { var iframeSrc = videoElement.src; videoElement.src = iframeSrc;
      }
   }
   if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
      alert("This demo requires a modern browser that supports the Page Visibility API.");
   } else {
      document.addEventListener(visibilityChange, handleVisibilityChange, false);
   }
})();
</script>
</body>
</html>

2. Instead of
    put "https://www.youtube.com/embed/rYIagCdmjqY" into tClipURL -- for example
    set the URL of widget "clipinbrows" to tClipUrl
write

Code: Select all

-- you can change the width and height here:
put 1167 into vWidth; put 926 into vHeight -- your example
put "https://www.youtube.com/embed/rYIagCdmjqY" into tClipURL -- your example
set the htmltext of widget "clipinbrows" to merge(fld "HTML")

That's all.
This should also work (=stop the video) when you hide widget "clipinbrows" by script or when minifying the stack in the IDE.
[The HTML code above contains a few unnessary code for certain platforms but as it is this may be also used in the javascript of a HTML5 standalone (the merge has to be adjusted).]

The above is (hopefully) a solution for stopping/resetting an iframe-embedded video.
In case you wish to pause (not reset) the video when hiding and play again the video when showing then you have to work *much* harder.
But it is also possible
= using the youTube player API: https://developers.google.com/youtube/i ... _reference
OR
= using a HTML5 video element.

[sphere]

Thanks for your comprehensive work, really appreciate it.

i commented out this line:
--put "https://www.youtube.com/embed/rYIagCdmjqY" into tClipURL
so that the chosen video will be in the variable.

I will test it this evening when i'm home, already prepared the stack, but i can't test on device on my work laptop (no rights).
In the IDE it does not stop playing when minimizing the stack, also when choosing another video the first one keeps playing (sound) and the next one starts so 2 sound thru each other.
Let's see what it does on mobile.

I've seen the youtube API--> Android API would be then the last ultimate choice i guess.
it was so easy adding the videos, but now a lot more difficult complying to the Google rules.

btw, yesterday i tried some things and calling the javascript handler did work (the calling itself) it showed the script just before the video played. i don't know why it popped up, but it did also had no effect.

[[-hh]]

In the IDE it does not stop playing when minimizing the stack, also when choosing another video the first one keeps playing (sound) and the next one starts so 2 sound thru each other.

This is impossible if you set the htmltext each time you change tClipURL
set the htmltext of widget "clipinbrows" to merge(fld "HTML")

Could you please post the lines of your code after you set tClipURL?
Also the OS and LC version where my steps didn't work in the IDE.

[sphere]

These are the last lines of the dropdown btn in ide:

Code: Select all

 --answer tClipUrl
   --set the URL of widget"clipinbrows" to  tClipUrl
    --hh test
   put  479 into vWidth; put 250 into vHeight -- your example
--put "https://www.youtube.com/embed/rYIagCdmjqY" into tClipURL -- your example
set the htmltext of widget "clipinbrows" to merge(fld "HTML")
   end menuPick

so some are commented out

on work i had win10business and lc819rc1 and at home win10pro and lc819rc2, but i see the same result.
also checked on mobile, here it works,the video stops when out of view, but not when Power Off is pushed, effectively the same result as before.

[sphere]

Question: could we see this behaviour--Keeps playing while power is pressed-- as a bug?
Because normal out of view stops playing, precisely as it should.

Seeing this diagram here:https://developer.android.com/reference ... ivity.html at Activity Lifecycle
When Power is pressed onPause() should be called and app get out of view and should stop activity.

quoting a piece of text: "When the Power Button is pressed it will call the onPause() method of your application, and when you unlock the device it will call onResume(). This is where you should be managing your thread to prevent the app from crashing" from this page :https://stackoverflow.com/questions/684 ... ect=1&lq=1

or could it be related to the target where it's build for? as on the same page is spoken about a change in Kitkat,pressing power calls onStop().
the target is now Android 4.1