1. 首頁
  2. 問答
  3. Android WebView中HTML5視頻的不一致

Android WebView中HTML5視頻的不一致

2013-05-14 168 views
4

在Android WebView的HTML5頁面上顯示.mp4視頻時，當從遠程URL檢索文件時，視頻和音頻都會正常播放。當試圖從設備的「/ mnt/sdcard/....」路徑中播放相同的媒體文件時，只播放媒體文件的音頻部分。對此有何想法？有沒有人經歷過（有希望解決）類似的事情？儘管通過網絡檢索到視頻，這是否會成爲編解碼器問題？在WebView結束之前，視頻是否通過網絡操縱或轉換而返回。Android WebView中HTML5視頻的不一致

來源

2013-05-14 gman413

+0

面臨着類似的問題，在裝載HTML 5視頻你有你的清單啓用硬件加速（見例如https：//開頭要點。 github.com/Offbeatmammal/3718414） – Offbeatmammal 2013-05-17 06:17:01

回答

1

下面的代碼工作對我來說，我希望它可以幫助你， 也是我想很多人都面臨着同樣的問題，所以這是我做的事得到HTML5視頻在我的應用程序運行WebView。

我會帶你通過程序。

我想要在我的應用程序的WebView中一個接一個地加載多個HTML頁面。這些HTML頁面包含音頻，其次是視頻或視頻，然後是音頻。

下面是一個這樣的HTML頁面的示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
    <head> 
     <title>screen2</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link href="css/main-v1.css" rel="stylesheet" type="text/css"> 
     <link href="css/screen2-v1.css" rel="stylesheet" type="text/css"> 
     <script src="js/jQueryTest.js"></script> 
    </head> 
    <body>   
     <audio id="audio1" src="audio/screen2_a.mp3"></audio> 
     <video id="video1" src="video/mov_bbb.mp4"></video> 
    </body> 
</html>

現在我創建的類作爲在HTML頁面的Android和的JavaScript之間的接口。

這裏是我的項目SRC文件夾命名爲JsHandler.java的JavaScriptInterface類

package com.example.dms; 

import java.io.IOException; 

import com.example.dms.R; 

import android.app.Activity; 
import android.app.AlertDialog; 
import android.content.DialogInterface; 
import android.content.Intent; 
import android.net.Uri; 
import android.util.Log; 
import android.webkit.JavascriptInterface; 
import android.webkit.WebView; 

public class JsHandler { 
    Activity activity; 
    String TAG = "JsHandler"; 
    WebView webView; 

    public JsHandler(Activity _contxt,WebView _webView) { 
     activity = _contxt; 
     webView = _webView; 
    } 

    /** 
    * This function handles call from JS 
    */ 
    @JavascriptInterface 
    public void initVideo() 
    { 
     webView.loadUrl("javascript:playVideo()"); 
    } 

    public void initAudio() 
    { 
     webView.loadUrl("javascript:playAudio()"); 
    } 

    /** 
    * This function handles call from Android-Java 
    */ 
    public void javaFnCall(String jsString) { 

     final String webUrl = "javascript:diplayJavaMsg('"+jsString+"')"; 
     // Add this to avoid android.view.windowmanager$badtokenexception unable to add window 
     if(!activity.isFinishing()) 
      // loadurl on UI main thread 
     activity.runOnUiThread(new Runnable() { 

      @Override 
      public void run() { 
       webView.loadUrl(webUrl); 
      } 
     }); 
    } 

    /** 
    * function shows Android-Native Alert Dialog 
    */ 
    public void showDialog(String msg){ 

     AlertDialog alertDialog = new AlertDialog.Builder(activity).create(); 
     alertDialog.setTitle(activity.getString(R.string.app_dialog_title)); 
     alertDialog.setMessage(msg); 
     alertDialog.setButton(DialogInterface.BUTTON_POSITIVE,activity.getString(R.string.ok_text), new DialogInterface.OnClickListener() 
     { 
      public void onClick(DialogInterface dialog, int which) 
      { 
       dialog.dismiss(); 
      } 
     }); 
     alertDialog.setButton(DialogInterface.BUTTON_NEGATIVE,activity.getString(R.string.cancel_text), new DialogInterface.OnClickListener() 
     { 
      @Override 
      public void onClick(DialogInterface dialog, int which) 
      { 
       dialog.dismiss(); 
      } 
     }); 
     alertDialog.show(); 
    } 
}

這是我的MainActivity代碼，加載web視圖中的HTML頁面

public class MainActivity extends Activity{ 

//WebView Variables 
private JsHandler _jsHandler; 
private WebView myWebView; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    myWebView = (WebView) findViewById(R.id.webView); 

    myWebView.setOnTouchListener(new View.OnTouchListener() { 
     @Override 
     public boolean onTouch(View view, MotionEvent event) { 
      // TODO Auto-generated method stub 
      if(event.getAction() == MotionEvent.ACTION_DOWN && !view.hasFocus()) { 
        view.requestFocus(); 
       } 
      return false; 
     } 
    }); 

    initWebView(); 
} 

private void initWebView(){ 

    //Tell the WebView to enable javascript execution. 
    myWebView.getSettings().setJavaScriptEnabled(true); 
    myWebView.setBackgroundColor(Color.parseColor("#808080")); 

     //Set whether the DOM storage API is enabled. 
    myWebView.getSettings().setDomStorageEnabled(true); 

     //setBuiltInZoomControls = false, removes +/- controls on screen 
    myWebView.getSettings().setBuiltInZoomControls(false); 

    myWebView.getSettings().setPluginState(PluginState.ON); 
    myWebView.getSettings().setAllowFileAccess(true); 

    myWebView.getSettings().setAppCacheMaxSize(1024 * 8); 
    myWebView.getSettings().setAppCacheEnabled(true); 

    _jsHandler = new JsHandler(this, myWebView);   
    myWebView.addJavascriptInterface(_jsHandler, "JsHandler"); 

    myWebView.getSettings().setUseWideViewPort(false); 
    myWebView.setWebChromeClient(new WebChromeClient()); 
    myWebView.setWebViewClient(new WebViewClient()); 

    // these settings speed up page load into the webview 
    myWebView.getSettings().setRenderPriority(RenderPriority.HIGH); 
    myWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); 
    myWebView.requestFocus(View.FOCUS_DOWN); 
    myWebView.loadUrl("file:///android_asset/screen2.html"); 

}

}

這是考慮到你的HTML頁面即要加載的駐留在項目的資產文件夾中。

我所做的是我把媒體文件在MNT/SD卡/

因我所需要標籤相應地改變音頻和視頻的SRC屬性。也正如我前面提到的我創建的JavaScriptInterface類，我將使用該類來調用Audio或Video來從Java播放，而不是HTML處理它。

所以，這裏是新的HTML頁面看起來像

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
    <head> 
     <title>screen2</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link href="css/main-v1.css" rel="stylesheet" type="text/css"> 
     <link href="css/screen2-v1.css" rel="stylesheet" type="text/css"> 
     <script src="js/jQueryTest.js"></script> 

     <script> 
      function playVideo() 
      { 
       var cV = document.getElementById("video1"); 
       cV.addEventListener('ended', function() 
               { 
                cV.removeEventListener('ended'); 
                playAudio(); 
               }, false); 
       cV.play(); 
      } 

      function playAudio() 
      { 
       var cA = document.getElementById("audio1"); 
       cA.addEventListener('ended', function() 
               { 
                cA.removeEventListener('ended'); 
                playVideo(); 
               }, false); 
       cA.play(); 
      } 
      function init(){ 

       JsHandler.initVideo(); 
      } 
     </script> 
     <script> 
      $(document).ready(function(){ 
       init(); 
      }); 
     </script> 
    </head> 
    <body> 
      <audio id="audio1" src="/mnt/sdcard/Android/data/com.exapmle.dms/files/resources/audio/screen2_a.mp3"></audio> 
      <video id="video1" src="/mnt/sdcard/Android/data/com.exapmle.dms/files/resources/video/mov_bbb.mp4"></video> 

    </body> 
</html>

爲了解釋這裏發生了什麼時，當HTML頁面加載完全，我叫的init（）;在HTML頁面中定義的方法。

此方法調用initVideo（）;在JsHandler類

正如你可以看到，這個initVideo（）中定義的方法;方法打電話給playVideo（）;在HTML頁面中定義的方法。

您可能想知道爲什麼不致電playVideo（）;方法直接在頁面加載, 以及我已經試過它，它沒有工作，（至少對我來說）。

我希望它可以幫助你或其他人誰在的WebView

來源

2013-08-11 08:07:36

相關問題

 相關問題