行是知之始,知是行之成。这篇文章主要讲述html5视频无法与android webview一起使用相关的知识,希望能为你提供帮助。
我一直在webview上运行android应用程序一年。但也有一些客户说几天前我的应用程序中没有播放html5视频。我有五部手机需要测试,我的所有手机都没有问题。大多数客户使用该应用程序没有任何问题。
我将preload属性值从auto更改为meta,因为我想要归因于网络负载。
下图是客户的截图。有一个27:10的时间,并没有装载的微调器。 (我认为加载已结束)但是,客户无法按下播放按钮,按下播放按钮时,视频元素周围会出现橙色线条。
文章图片
【html5视频无法与android webview一起使用】客户的手机是galaxy note 8和galaxy J7,Android版本是8.但在我的测试中没有问题。并且有Android 8客户正在使用该服务而没有任何问题。
我该如何解决?谢谢。
HTML
<
video preload="meta" width="95%" autoplay="autoplay" controls="" playsinline="">
<
source type="video/mp4" src="https://www.songbingjia.com/android/url.../file.mp4">
HTML5 is not supported.
<
/video>
android-MainActivity
public class MainActivity extends AppCompatActivity {private WebView webView;
private BackPressCloseHandler backPressCloseHandler = new BackPressCloseHandler(this);
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
/* webView settings */
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setjavascriptEnabled(true);
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webView.setWebChromeClient(new FullscreenableChromeClient(MainActivity.this));
webView.setWebViewClient(new WebViewClientClass());
webView.loadUrl("MY URL IS HERE");
} //onCreateprivate class WebViewClientClass extends WebViewClient {@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
自定义类以启用视频全屏
import android.app.Activity;
import android.content.Context;
import android.os.Build;
import android.support.v4.content.ContextCompat;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.widget.FrameLayout;
public class FullscreenableChromeClient extends WebChromeClient {
private Activity mActivity = null;
private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
private int mOriginalOrientation;
private FrameLayout mFullscreenContainer;
private static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
public FullscreenableChromeClient(Activity activity) {
this.mActivity = activity;
}@Override
public void onShowCustomView(View view, CustomViewCallback callback) {if (Build.VERSION.SDK_INT >
= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
if (mCustomView != null) {
callback.onCustomViewHidden();
return;
}mOriginalOrientation = mActivity.getRequestedOrientation();
FrameLayout decor = (FrameLayout) mActivity.getWindow().getDecorView();
mFullscreenContainer = new FullscreenHolder(mActivity);
mFullscreenContainer.addView(view, COVER_SCREEN_PARAMS);
decor.addView(mFullscreenContainer, COVER_SCREEN_PARAMS);
mCustomView = view;
setFullscreen(true);
mCustomViewCallback = callback;
//mActivity.setRequestedOrientation(requestedOrientation);
}super.onShowCustomView(view, callback);
}@SuppressWarnings("deprecation")
@Override
public void onShowCustomView(View view, int requestedOrientation, WebChromeClient.CustomViewCallback callback) {
this.onShowCustomView(view, callback);
}@Override
public void onHideCustomView() {
if (mCustomView == null) {
return;
}setFullscreen(false);
FrameLayout decor = (FrameLayout) mActivity.getWindow().getDecorView();
decor.removeView(mFullscreenContainer);
mFullscreenContainer = null;
mCustomView = null;
mCustomViewCallback.onCustomViewHidden();
mActivity.setRequestedOrientation(mOriginalOrientation);
}private void setFullscreen(boolean enabled) {Window win = mActivity.getWindow();
WindowManager.LayoutParams winParams = win.getAttributes();
final int bits = WindowManager.LayoutParams.FLAG_FULLSCREEN;
if (enabled) {
winParams.flags |= bits;
} else {
winParams.flags &
= ~bits;
if (mCustomView != null) {
mCustomView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
}
}
win.setAttributes(winParams);
}private static class FullscreenHolder extends FrameLayout {
public FullscreenHolder(Context ctx) {
super(ctx);
setBackgroundColor(ContextCompat.getColor(ctx, android.R.color.black));
}
@Override
public boolean onTouchEvent(MotionEvent evt) {
return true;
}
}
}
的manifest.xml
<
?xml version="1.0" encoding="utf-8"?>
<
manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="...">
<
uses-permission android:name="android.permission.INTERNET" />
<
uses-permission android:name="android.permission.READ_PHONE_STATE" />
<
application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:hardwareAccelerated="true"
android:theme="@style/AppTheme">
<
activity android:name="....webview.MainActivity"
android:configChanges="keyboardHidden|orientation|screenSize">
<
/activity>
<
activity android:name="....webview.IntroActivity">
<
intent-filter>
<
action android:name="android.intent.action.MAIN" />
<
category android:name="android.intent.category.LAUNCHER" />
<
/intent-filter>
<
/activity>
<
/application>
<
/manifest>
答案我在视频应用上遇到了与Android System Webview 73相同的问题。看起来默认的html5视频播放器存在一些风格问题。我可以在javascript中进行自动播放或调用play()函数。
我的解决方案是使用其他一些javascript视频播放器。我使用videoJS来取代视频播放器界面,它现在正在运行。
另一答案以下代码对我来说工作正常,请检查一次
在清单文件中添加此行
<
application android:hardwareAccelerated="true" ...>
主要信息
public class MainActivity extends AppCompatActivity {private WebView webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = findViewById(R.id.webView);
webview.setWebViewClient(new MyBrowser());
webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setLoadsImagesAutomatically(true);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAllowFileAccess(true);
webview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webview.getSettings().setPluginState(WebSettings.PluginState.ON);
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);
webview.loadUrl("https://www.w3schools.com/html/html5_video.asp");
}private class MyBrowser extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
}
activity_main.xml中
<
?xml version="1.0" encoding="utf-8"?>
<
WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
另一答案由于javascript调用播放/暂停视频工作,我通过在视频前面添加div并调整大小以匹配Android放置在视频中心附近的播放按钮来修复此问题。以下是React的片段:
const isAndroid = () =>
navigator.userAgent.indexOf('Android') >
= 0;
let videoPlayer;
...<
div className="video-wrap">
<
video
ref={node =>
videoPlayer = node}
controls
controlsList="nodownload"
crossOrigin="anonymous"
poster={episode.posterUrl}
>
<
source src=https://www.songbingjia.com/android/{episode.h264Url} type="video/mp4" />
{episode.webmUrl ? (
<
source src=https://www.songbingjia.com/android/{episode.webmUrl} type="video/webm" />
) : null}
{episode.vttUrl ? (
<
track kind="captions" label="English" src=https://www.songbingjia.com/android/{episode.vttUrl} srcLang="en" />
) : null}
<
/video>
{ isAndroid() ? (
<
div
className="android-playback-fix"
onClick={e =>
{
e.preventDefault();
if (videoPlayer.paused) {
videoPlayer.play();
} else {
videoPlayer.pause();
}
}}
>
<
/div>
) : null}
<
/div>
这是CSS:
.video-wrap {
position: relative;
}.android-playback-fix {
border-radius: 100%;
height: 75px;
left: 50%;
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
width: 75px;
}
另一答案我遇到了同样的问题。
解决这个问题。
将
id
放在HTML视频标记上,并在java代码中调用id
。例如
<
video id = "video" preload="meta" width="95%" autoplay="autoplay" controls="" playsinline="">
<
source type="video/mp4" src="https://www.songbingjia.com/android/url.../file.mp4">
<
/video>
在
onPageFinished
-WebViewClient
的覆盖,把这个代码webView.loadUrl("javascript:(function() { document.getElementById('video').play();
})()");
webView.loadUrl("javascript:(function() { document.getElementById('video').pause();
})()");
这将注入javascript函数以允许自动播放视频
推荐阅读
- 如何从URL获取'apple-touch-icon()
- 带Spinner的Android Studio对话框[关闭]
- EditText Android中的多语言问题
- Android EditText禁用编辑但允许滚动
- 在Android中的edittext中从textview获取价值
- In App Purchase产品ID是否必须以Reverse-DNS开头()
- Android Studio无法构建具有交叉模块依赖性的模块
- Android Studio 3.0+上的Kapt问题(TargetApi)
- 无法解析github库Android gradle