How to listen to the state of a youtube object inside webview

Question

I am going to embed a youtube player inside an Activity. I have to check whether it is playing or has already finished. Here is the code

package com.example.videotest;

import java.util.regex.Matcher;
import java.util.regex.Pattern;
import org.json.JSONException;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.os.HandlerThread;
import android.annotation.SuppressLint;
import android.app.Activity; 
import android.content.Intent;
import android.graphics.Color;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.Toast;

public class MainActivity extends Activity {

 WebView webview;


@SuppressLint({ "SetJavaScriptEnabled", "NewApi", "NewApi" })
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    String ytId = getYoutubeID("http://youtu.be/GDka8VKLMJY");
  final String iframe = "<html>" +
        "<body>" +
        "<object width="+"300"+"height="+"220"+">" +
        "<param name=\"movie\" value=\"https://www.youtube.com/v/"+ytId+"?autoplay=&enablejsapi=1&modestbranding=1&rel=0&showinfo=0&autohide=1&theme=light&version=3\">" +
        "</param>" +
        "<param name="+"allowFullScreen"+ "value="+"false"+">" +
        "</param>" +
        "<param name="+"allowScriptAccess"+"value="+"always"+">" +
        "</param>" +
        "<embed src=\"https://www.youtube.com/v/"+ytId+"?autoplay=1&enablejsapi=1&modestbranding=1&rel=0&showinfo=0&autohide=1&theme=light&version=3\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowScriptAccess=\"always\" width=\"300\" height=\"220\">" +
        "</embed>" +
        "</object>" +
        "</body>" +
        "<html>";

    ImageView play = (ImageView)findViewById(R.id.ImageView1);

    play.setScaleType(ImageView.ScaleType.FIT_XY);
    play.getLayoutParams().height=200;
    play.getLayoutParams().width=-1;
    webview=(WebView) findViewById(R.id.webView1);
    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setPluginState(PluginState.ON);
    webview.setBackgroundColor(Color.parseColor("#00000000"));
    play.setOnClickListener(new OnClickListener(){

        public void onClick(View v) {
            webview.loadData(iframe, "text/html", "utf-8");
        }});


}

public String getYoutubeID (String URL){
    String youtubeId = "";
    String pattern = "https?:\\/\\/(?:[0-9A-Z-]+\\.)?(?:youtu\\.be\\/|youtube\\.com\\S*[^\\w\\-\\s])([\\w\\-]{11})(?=[^\\w\\-]|$)(?![?=&+%\\w]*(?:['\"][^<>]*>|<\\/a>))[?=&+%\\w]*";
    Pattern compiledPattern = Pattern.compile(pattern, Pattern.CASE_INSENSITIVE);
    CharSequence cs = URL;
    Matcher matcher = compiledPattern.matcher(cs);
    if(matcher.find()){
        youtubeId=matcher.group(1);
        Toast.makeText(getBaseContext(), matcher.group(1), Toast.LENGTH_LONG).show();
    }
    return youtubeId;
}

}

How can I trace the video is playing or not? Thank You for any advise!

I think you can try to include the YT API, there are calls that can handle some events like play, stop ... look here: https://developers.google.com/youtube/js_api_reference — Andreas, Nov 07 '12 at 08:25
I know that there is a javascript onstatechange, but how to connect it with the object above? — user1805396, Nov 07 '12 at 09:10
You have to interact with Javascript if you want to connect your activity with the webview javascript: here is a link, that explains that thing with code sample :) http://stackoverflow.com/questions/4325639/android-calling-javascript-functions-in-webview — Andreas, Nov 07 '12 at 09:16
Thank You for your advise. However,in the above code, I haven't use any javascript. I know that there is method to communicate with java and javascript, but what I want to know is that whether there is a way to listen to a html object in webView. Or how to use java to listen to the html object above. — user1805396, Nov 07 '12 at 09:23

score 0 · Answer 1 · answered Dec 24 '12 at 01:11

Have you considered using the YouTube Android Player API? http://apiblog.youtube.com/2012/12/no-webview-required-with-native-youtube.html. It provides a Java API so you do not need to include a WebView and playback will be more reliable with this mechanism than with a WebView.

How to listen to the state of a youtube object inside webview

1 Answers1