How to check if webview YouTube video player was started

Question

In my Android app, I have a webview where there is an embedded YouTube video inside the webview. My app has a native AdMob banner.

I'd like to hide the native admob banner from the app when user plays the video, so the banner does not show while the video is playing and then show the ads again when the video stops playing

The issue is that I do not know how to check if the video was started or stopped.

Any idea how this can be done? Thanks much.

score 2 · Answer 1 · answered Apr 10 '19 at 13:24

2

One of the suggestions I think of is to set your AdView's visibility to GONE and also call mAdView.pause() the AdView while the video is playing. This should prevent any additional requests being made to AdMob. Once the video is done playing and you want to show your banner again - you should set the AdView's visibility to VISIBLE and call mAdView.resume()

answered Apr 10 '19 at 13:24

Kasiopeous

186
3

Thank you. That makes sense. Now, the second part of the question would be - how do you know when the YouTube video starts and stops playing? – Kenneth Browning May 22 '19 at 09:00

Rahul Khurana · Accepted Answer · 2019-09-13T04:08:02.940

The communication between webview and native are done through JavascriptInterface. YouTube has built it's API in a similar fashion. you can use the below code to achieve what you want.

To achieve the play/pause functionality via Youtube video you can use YouTube JavaScript Player API.

Example:

<div id="video-placeholder"></div>

<script src="https://www.youtube.com/iframe_api"></script>

When the API is fully loaded, it looks for a global function called onYouTubeIframeAPIReady() which you should define.

Your code should look something like this

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'Xa0Q0J5tOP0',
        playerVars: {
            color: 'white',
            playlist: 'taJ60kskkns,FG0fTKAqZ5g'
        },
        events: {
            onReady: initialize
        }
    });
}

Just make two buttons and call the needed method on click.

$('#play').on('click', function () {
    player.playVideo();
});

$('#pause').on('click', function () {
    player.pauseVideo();
});

You can use JavascriptInterface to get the callback inside the native java/kotlin code from WebView.

More details info

Youtube javascript player API with example
JavaScript Interface with example

Thank you, this is basically what I did. Apart from the two buttons. I used: 1) YT JS API player, then through 2) JS interface passed the state of the video (paused, playing etc. ) into Java code, 3) in the Java code, I've set visibility to GONE when playing and to VISIBLE when in other states (NOTE: the visibility needs to be set on UIThread otherwise it won't work). This worked well. (I did not pause and resume the ads). — Kenneth Browning, Mar 16 '20 at 15:19

score 1 · Answer 3 · answered Sep 17 '19 at 09:11

I am using jquery to show my videos along wither other contents and the admob. It should apply to your case too as you are using webview.
You need to detect the event - onPlayerStateChange. Check this question which shows the code and prerequisties:
Check if YouTube video is playing and run script

score 0 · Answer 4 · answered Sep 17 '19 at 09:31

0

why don't you use default videoview to play youtube videos it'll make easier communication between admob bannner and played video apply same logic as mentioned by kasiopeous

answered Sep 17 '19 at 09:31

Black mamba

462
4
15

How to check if webview YouTube video player was started

4 Answers4