如何在WebView中內嵌HTML5視頻？

Question

我需要在WebView中內聯播放html5視頻。我發現了一種應該可以工作的技術，但它只能偶爾工作（請參閱問題的結尾）。當它不起作用時，onShowCustomView不會被調用。任何人都可以看到一個原因，這是不工作或建議替代？希望這將解決您的問題 -

package com.richcollins.VideoView; 

import java.io.ByteArrayOutputStream; 
import java.io.InputStream; 

import android.app.Activity; 
import android.media.MediaPlayer; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.webkit.WebChromeClient; 
import android.webkit.WebSettings; 
import android.webkit.WebView; 
import android.widget.FrameLayout; 
import android.widget.VideoView; 

public class WebViewActivity extends Activity 
{ 
    WebView webView; 
    FrameLayout frameLayout; 

    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     LayoutInflater inflator = getLayoutInflater(); 
     View inflatedView = inflator.inflate(R.layout.webview, null); 

     if (!(inflatedView instanceof FrameLayout)) 
     { 
      throw new RuntimeException("inflated view not FrameLayout"); 
     } 
     else 
     { 
      frameLayout = (FrameLayout)inflatedView; 
     } 

     setContentView(frameLayout); 

     webView = (WebView) findViewById(R.id.webView); 
     webView.getSettings().setJavaScriptEnabled(true); 
     webView.getSettings().setPluginState(WebSettings.PluginState.ON); 
     webView.setWebChromeClient(new MyWebChromeClient());   

     InputStream inputStream = getResources().openRawResource(R.raw.index); 
     ByteArrayOutputStream outStream = new ByteArrayOutputStream(); 
     int readByte; 

     try 
     { 
      while((readByte = inputStream.read()) != -1) 
      { 
       outStream.write(readByte); 
      } 

      String html = outStream.toString("UTF8"); 

      webView.loadDataWithBaseURL("http://localhost/index.html", html, "text/html", "utf-8", "http://localhost/index.html");   
     } 
     catch(Exception e) 
     { 
      throw new RuntimeException(); 
     } 

    } 

    private class MyWebChromeClient extends WebChromeClient implements MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener, MediaPlayer.OnPreparedListener { 
     VideoView videoView; 
     WebChromeClient.CustomViewCallback customViewCallback; 

     public void onProgressChanged(WebView view, int newProgress) 
     { 
      if (newProgress == 100) 
      { 
       view.loadUrl("javascript:playVideo()"); 
      } 

     } 

     public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) 
     { 
      customViewCallback = callback; 

      if (view instanceof FrameLayout){ 
       FrameLayout videoFrameLayout = (FrameLayout) view; 

       if (videoFrameLayout.getFocusedChild() instanceof VideoView){ 
        videoView = (VideoView) videoFrameLayout.getFocusedChild(); 
        // hide the video controls 
        videoView.setMediaController(null); 

        //remove videoView from MediaPlayer and ad it to the content view 
        videoFrameLayout.removeView(videoView); 
        frameLayout.addView(videoView, ViewGroup.LayoutParams.WRAP_CONTENT); 

        videoView.setOnCompletionListener(this); 
        videoView.setOnErrorListener(this); 
        videoView.setOnPreparedListener(this); 
        videoView.start(); 
       } 
      } 
     } 

     public void onPrepared(MediaPlayer mp) 
     { 
     } 

     public void onCompletion(MediaPlayer mp) 
     { 
      // this is needed to release the MediaPlayer and its resources so it can 
      // be used again later 
      videoView.stopPlayback(); 

      // now remove the video and tell the callback to hide the custom view 
      frameLayout.removeView(videoView); 
      customViewCallback.onCustomViewHidden(); 

      finish(); 
     } 

     public boolean onError(MediaPlayer mp, int what, int extra) 
     { 
      return false; // we did not handle the error - onCompletion will be called 
     } 
    } 
} 

Answer 1

對於使用網頁視圖內HTML5來顯示視頻的ICS應用的例子見this。

如果您想「僞裝」自動播放（在webview中阻止），您需要從頁面onload事件觸發.play（）。如果你想通過播放列表工作，那麼你需要捕獲並回應這個冒險事件。