Calling javascript to reproduce video by streaming in android

Question

I am trying to reproduce video by streaming in my android app and I have the next html file inside of my app:

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            var vid;
            function init() {
                vid = document.getElementById("myVideo");
            }
            function loadVideoSource(videoSource) {
                vid.setAttribute("src", videoSource);
                vid.load();
                vid.play();
            }
            function stopVideoSource(){
                vid.pause();
            }
            function resizeBig(screenWidth, screenHeight){
                vid.style.width =screenWidth;
                vid.style.height =screenHeight;
            }
            function resizeSmall(){
                vid.style.width ='320px';
                vid.style.height ='180px';
            }
            </script>
    </head>
    <body onload="init()">
        <video src="" id="myVideo" optimized_for_streaming="true" autoplay="autoplay" x-webkit-airplay="allow" controls="controls" webkit-playsinline preload="metadata" height="180" width="320">
        </video>
    </body>
</html>

And this is the activity from which I am trying to call the javascript functions inside of the html file:

public class WebviewVideoRep extends Activity{

private WebView mWebView;  
private LinearLayout mContentView;
private FrameLayout mCustomViewContainer;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER);


    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.webview_activity);

    mContentView = (LinearLayout) findViewById(R.id.linearlayout);
        mWebView = (WebView) findViewById(R.id.webView);
        mCustomViewContainer = (FrameLayout) findViewById(R.id.fullscreen_custom_content);


        WebSettings webSettings = mWebView.getSettings();
        webSettings.setPluginState(WebSettings.PluginState.ON);
        webSettings.setJavaScriptEnabled(true);
            webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);

    mWebView.loadUrl("file:///android_asset/video_player.html");
    mWebView.setWebViewClient(new HelloWebViewClient());

    mWebView.loadUrl("javascript:loadVideoSource('videoUrl')");

    }

    private class HelloWebViewClient extends WebViewClient  {
        @Override
        public boolean shouldOverrideUrlLoading(WebView webview, String url)
        {
            webview.setWebChromeClient(new WebChromeClient() {

            private View mCustomView;

            @Override
            public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
            {
                // if a view already exists then immediately terminate the new one
                if (mCustomView != null)
                {
                    callback.onCustomViewHidden();
                    return;
                }

                // Add the custom view to its container.
                mCustomViewContainer.addView(view, COVER_SCREEN_GRAVITY_CENTER);
                mCustomView = view;
                mCustomViewCallback = callback;

                // hide main browser view
                mContentView.setVisibility(View.GONE);

                // Finally show the custom view container.
                mCustomViewContainer.setVisibility(View.VISIBLE);
                mCustomViewContainer.bringToFront();
            }

        }); 

          webview.loadUrl(url);

          return true;
        }
    }


    public class JavaScriptInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        JavaScriptInterface(Context c) {
            mContext = c;
        }

    }

}

And this is the layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
 tools:context=".MainActivity" >

    <FrameLayout
        android:id="@+id/fullscreen_custom_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF000000"/>

    <LinearLayout 
        android:id="@+id/linearlayout"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"> 

        <WebView
             android:id="@+id/webView"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent" />

    </LinearLayout>
</RelativeLayout>

When I start this activity, in the screen appears the video screen in white, with the play/pause go forward and so on controllers, but the video is never reproduced. What else I need to reproduce the video? What I am doing wrong?

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

Maybe you should execute your JS in onPageFinished():

private class HelloWebViewClient extends WebViewClient  {
    @Override
    public boolean onPageFinished(WebView webview, String url) {
        webView.loadUrl("javascript:loadVideoSource('videoUrl')");
    }
}

Not right after:

mWebView.loadUrl("file:///android_asset/video_player.html");

And it'd be better to call setWebViewClient() before loadUrl().

------------EDIT 01/04------------

Some more tips:

If you don't want fullscreen playback, then you don't have to invovle WebViewChromeClient.onShowCustomView() at all. Your HTML page works fine for me with the above code snippet I posted. But please also make sure that your video codec is supported by android webkit. I was using this video as the sample.
If you really want fullscreen playback, you can take a look into this thread or this one. Hope they can help.

------------EDIT 02/04------------

Also don't forget to do this:

Add android:hardwareAccelerated in your manifest. See this
Permission android.permission.INTERNET is also needed in your manifest as well.

edited May 23 '17 at 10:31

Community

1
1

answered Mar 31 '14 at 10:08

Wei WANG

1,748
19
23

Tried but still not working. I have tried with a couple of urls, but still having a withe reproductor – Tony_craft Mar 31 '14 at 10:32
I tried without the `onShowCustomView` method but is also not working. I also have tried the video you were using. Reading some other posts I realize sometimes they use a media player, but I am not using any media player, is it necessary? Note that this is all the code I am using to play the video – Tony_craft Apr 01 '14 at 08:32
Did you have **`android:hardwareAccelerated`** in your manifest? – Wei WANG Apr 02 '14 at 08:33
I have figure out which was the problem. It was the internet connection I was using. The code uphere works with your answer. Thanks a lot for all the help. – Tony_craft Apr 02 '14 at 10:23

Calling javascript to reproduce video by streaming in android

1 Answers1