与HTML5视频的不一致在Android的WebView [英] Inconsistencies with HTML5 video in an Android WebView
问题描述
当展示在Android的WebView的HTML5网页上的.mp4格式的视频，视频和音频都正确时，文件从远程URL检索回放。当试图从设备的内播放同一媒体文件的/ mnt / SD卡/ ....路径，仅媒体文件的音频部分被回放。任何对此的思考？任何人都经历（希望解决）类似的事情？难道这是尽管一个codeC的问题，当在网络上检索到的视频可以看到？视频是在结束web视图之前返回了操纵网络或以某种方式转化。
When showing an .mp4 video on an HTML5 page in an Android WebView, the video and audio are both played back properly when the file is retrieved from a remote URL. When trying to play the same media file from within the device's "/mnt/sdcard/...." path, only the audio portion of the media file is played back. Any thoughts on this ? Has anyone experienced (and hopefully solved) anything similar? Could this be a codec issue despite the fact that video is seen when retrieved over a network? Is video returned over a network manipulated or transformed somehow before ending up in the WebView.
推荐答案
以下code为我工作，我希望它可以帮助你，
同时我想很多人都面临着同样的问题，所以这是我做过什么让在 HTML5视频可在我的应用程序运行的的WebView
the following code worked for me, I hope it helps you, also I think a lot of people are facing the same problem, so this is what I did to get the HTML5 video to run in my Applications WebView.
我将带您通过的程序
我想加载多个HTML页面，一个接一个，我应用的web视图里面。这些HTML页面包含的是电台其次是视频或视频后跟一个音频
I wanted to load multiple HTML pages, one after another, inside my App's WebView. These HTML pages contained either a Audio followed by a Video, or a Video followed by a Audio.
下面是一个这样的HTML页面的样本
Here is a sample of one such HTML page.
<!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>
现在我创建的类作为Android的之间的接口，并在 JavaScript中的HTML网页
Now I created Class to act as an interface between Android and the Javascript in the HTML pages.
下面是一个名为 JsHandler.java 在我的项目的JavaScriptInterface类的的src 文件夹
Here is the JavaScriptInterface class named JsHandler.java in my Projects src folder
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();
}
}
这是code在我MainActivity，加载web视图里的HTML页面
This is the code in my MainActivity, that loads the HTML page inside the WebView
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页这就是项目的资产文件夹加载所在。
This is considering that your HTML page which is to be loaded resides in the assets folder of the project.
我所做的是我放在媒体文件在 MNT / SD卡/
有关，我需要改变的的src 在音频和视频相应的标签属性。另外，作为我前面提到的，我创建了JavaScriptInterface类，我将使用这个类来调用音频或视频从Java玩，而不是HTML处理它。
For which I need to change the src attribute of the audio and video tags accordingly. Also as I mentioned earlier the JavaScriptInterface class that I created, I'll use that class to call the Audio or the Video to play from Java, instead of HTML handling it.
所以，这里是新的HTML页面的样子
So, here is how the new HTML page looks like
<!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页面中定义的方法
To explain what's happening here is that, when the HTML page loads completely, I've called the init(); method defined in the HTML page.
这个方法调用的 initVideo（）; 中定义的方法在 JsHandler类
This method calls the initVideo(); method defined in the JsHandler Class
正如你可以看到，这个 initVideo（）; 方法给出一个呼叫的playVideo（）; 在HTML页面中定义的方法
As you can see, this initVideo(); method gives a call to playVideo(); method defined in the HTML page.
您可能会问，为什么不叫的playVideo（）; 方式直接在页面加载
嗯，我尝试过了，没有工作，（ATLEAST对我来说）。
You may be wondering why not call the playVideo(); method directly on page load, well I've tried it and it didn't work, (atleast for me).
我希望它可以帮助你或其他人谁是面临着类似的问题，在加载的 HTML 5视频在的WebView
I hope it helps you or anyone else who's facing a similar problem in loading HTML 5 Video in WebView
这篇关于与HTML5视频的不一致在Android的WebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
