調用javascript通過在Android中進行流式傳輸來再現視頻

Question

我正在嘗試通過在Android應用程序中流式傳輸來重現視頻，並且我的應用程序中有下一個html文件：

<!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>

這是我嘗試從html文件中調用javascript函數的活動：

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;
        }

    }

}

這是布局：

<?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>

當我開始此活動時，屏幕上會出現白色的視頻屏幕，並帶有播放/暫停等控制器，但是從不復制視頻。 我還需要重播視頻嗎？ 我做錯了什么？

Answer 1

也許您應該在onPageFinished()執行JS：

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

之后不正確：

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

而且最好在setWebViewClient()之前調用loadUrl() 。

------------編輯01/04 ------------

更多提示：

如果您不希望全屏播放，則根本不需要調用WebViewChromeClient.onShowCustomView() 。 您的HTML頁面適合我使用上面發布的上述代碼段。 但也請確保您的視頻編解碼器受android webkit支持。 我以這段視頻為樣本。
如果您確實想要全屏播放，則可以查看此線程或該線程。 希望他們能提供幫助。

------------編輯02/04 ------------

同樣不要忘記這樣做：

在清單中添加android:hardwareAccelerated 。 看到這個
清單中還需要android.permission.INTERNET權限。

調用javascript通過在Android中進行流式傳輸來再現視頻

問題描述

1 個解決方案

解決方案1
1 已采納 2014-03-31 10:08:08

調用javascript通過在Android中進行流式傳輸來再現視頻

問題描述

1 個解決方案

解決方案1 1 已采納 2014-03-31 10:08:08

解決方案1
1 已采納 2014-03-31 10:08:08