2014-03-31 46 views
0

我想在我的Android應用程序流再現視頻和我有我的應用程序內的下一個HTML文件複製視頻:調用JavaScript的通過流中的Android

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

當我開始這個活動時,在屏幕上出現白色的視頻屏幕,播放/暫停等等控制器,但視頻不會被重現。還有什麼我需要重現視頻?我做錯了什麼?

回答

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"); 

它會更好loadUrl()之前調用setWebViewClient()

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

一些更多的提示:

  1. 如果您不想全屏播放,那麼你根本不需要調用WebViewChromeClient.onShowCustomView()。您的HTML頁面適用於我發佈的上述代碼片段。但是請確保您的視頻編解碼器受到android webkit的支持。我使用this video作爲示例。
  2. 如果你真的想全屏播放,你可以看看threadthis one。希望他們能幫助。

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

也不要忘記這樣做:

  1. 在您的清單中添加android:hardwareAccelerated。請參閱this
  2. 權限android.permission.INTERNET也需要在您的清單中。
+0

嘗試過,但仍然無法正常工作。我已經嘗試了幾個網址,但仍然有一個繁殖者 –

+0

剛編輯帖子。希望能幫助到你。 –

+0

我嘗試不使用'onShowCustomView'方法,但也不起作用。我也嘗試過您使用的視頻。讀一些其他的帖子,我知道有時他們會使用媒體播放器,但我沒有使用任何媒體播放器,是否有必要?請注意,這是我用來播放視頻的所有代碼 –

相關問題