資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物
數學
英語
經濟
心理學
社會科學
時尚研究
法律研究如何在 Android WebView 中全屏播放 HTML5 影片？
簡介
許多 Android 應用程式在應用程式中使用 WebView 向用戶顯示網頁。此網頁很多時候包含嵌入其中的影片。例如，許多在 WebView 中開啟 YouTube 的應用程式可在其應用程式中顯示。當應用程式使用者從該網頁中開啟任何影片時，全屏選項以播放該影片會被停用。在本文中，我們將瞭解如何在 WebView 中啟用該全屏，以便我們可以在 Android 應用程式中的 WebView 中全屏播放 HTML 5 影片。
實現
我們將建立一個在其中顯示 WebView 的簡單應用程式。在該 WebView 中，我們將載入 YouTube，並且我們將為我們的 WebView 新增設定，以便使用者也可以全屏播放影片。
步驟 1：在 Android Studio 中建立一個新專案。
導航至 Android Studio，如下圖所示。在以下螢幕中，單擊“新建專案”以建立一個新的 Android Studio 專案。
單擊“新建專案”後，您將看到以下螢幕。
在此螢幕中，我們只需要選擇“空白活動”並單擊“下一步”。單擊“下一步”後，您將看到以下螢幕。
在此螢幕中，我們只需要指定專案名稱。然後，將自動生成包名稱。
注意 - 確保將語言選擇為 Java。
指定所有詳細資訊後，單擊完成以建立一個新的 Android Studio 專案。
建立專案後，我們將看到 2 個開啟的檔案，即 activity_main.xml 和 MainActivity.java 檔案。
步驟 2：使用 activity_main.xml。
導航到 activity_main.xml。如果此檔案不可見。要開啟此檔案。在左側窗格中，導航到 app>res>layout>activity_main.xml 以開啟此檔案。開啟此檔案後。向其中新增以下程式碼。程式碼中添加了註釋以詳細瞭解。
語法
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!-- creating a webview for displaying our youtube web page-->
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
說明 - 在上述程式碼中，根元素是 Android 中的相對佈局。此佈局是一個檢視組，用於將其中所有元素相互相對排列。藉助 id 或位置，我們可以在相對佈局中相對排列所有元素。
在此相對佈局中，我們正在建立自己的 WebView，我們將在其中顯示 YouTube 網頁。
最後，我們正在為相對佈局新增一個結束標記，因為文字檢視和按鈕都包含在我們的相對佈局中。
步驟 3：在 AndroidManifest.xml 檔案中新增 Internet 許可權。
導航到 app>manifests>AndroidManifest.xml 檔案並在清單標記中向其新增 Internet 許可權。
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
說明 - 由於我們在 WebView 中載入網頁，因此我們需要網際網路
許可權。在我們的 AndroidManifest.xml 中，我們指定了使用 Internet 的許可權。
步驟 4：使用 MainActivity.java。
導航到 MainActivity.java。如果此檔案不可見。要開啟此檔案。在左側窗格中，導航到 app>java>您的應用程式包名>MainActivity.java 以開啟此檔案。開啟此檔案後。向其中新增以下程式碼。程式碼中添加了註釋以詳細瞭解。
package com.example.androidjavaapp;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;
public class MainActivity extends AppCompatActivity {
// on below line creating a variable for web view.
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// on below line initializing web view with id.
webView = findViewById(R.id.webView);
// on below line setting web view client.
webView.setWebViewClient(new WebClient());
// on below line setting web chrome client for web view.
webView.setWebChromeClient(new WebChromeClient());
// on below line getting web settings.
WebSettings webSettings = webView.getSettings();
// on below line setting java script enabled to true.
webSettings.setJavaScriptEnabled(true);
// on below line setting file access to true.
webSettings.setAllowFileAccess(true);
// on below line setting url for the web page which we have to load in our web view.
webView.loadUrl("https://www.youtube.com");
}
// on below line creating a class for web chrome client.
class WebChromeClient extends android.webkit.WebChromeClient {
// on below line creating variables.
private View customView;
private android.webkit.WebChromeClient.CustomViewCallback customViewCallback;
private int originalOrientation;
private int originalSystemVisibility;
WebChromeClient() {
}
@Nullable
@Override
public Bitmap getDefaultVideoPoster() {
// on below line returning our resource from bitmap factory.
if (customView == null) {
return null;
}
return BitmapFactory.decodeResource(getApplicationContext().getResources(), 2130837573);
}
@Override
public void onHideCustomView() {
// on below line removing our custom view and setting it to null.
((FrameLayout) getWindow().getDecorView()).removeView(customView);
this.customView = null;
// on below line setting system ui visibility to original one and setting orientation for it.
getWindow().getDecorView().setSystemUiVisibility(this.originalSystemVisibility);
setRequestedOrientation(this.originalOrientation);
// on below line setting custom view call back to null.
this.customViewCallback.onCustomViewHidden();
this.customViewCallback = null;
}
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
if (this.customView != null) {
onHideCustomView();
return;
}
// on below line initializing all variables.
this.customView = view;
this.originalSystemVisibility = getWindow().getDecorView().getSystemUiVisibility();
this.originalOrientation = getRequestedOrientation();
this.customViewCallback = callback;
(FrameLayout) getWindow().getDecorView()).addView(this.customView, new FrameLayout.LayoutParams(-1, -1));
getWindow().getDecorView().setSystemUiVisibility(3846);
}
}
// on below line creating a class for Web Client.
class WebClient extends WebViewClient {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
}
}
說明 - 在上述程式碼中，對於 MainActivity.java 檔案。首先，我們正在為 WebView 建立一個變數。
現在，我們將看到 onCreate 方法。這是每個 Android 應用程式的預設方法。此方法在建立應用程式檢視時呼叫。在此方法中，我們正在設定內容檢視，即名為 activity_main.xml 的佈局檔案，以設定來自該檔案的 UI。
指定檢視後，我們正在使用其在 activity_main.xml 檔案中給出的唯一 id 來初始化名為 webView 的 WebView 變數。
初始化我們的 webView 後，我們正在為我們的 WebView 設定 WebView 客戶端、Web Chrome 客戶端。之後，我們正在為 WebView 設定 Java 指令碼和檔案訪問。之後，我們正在為 YouTube 指定 URL，因為我們必須在 WebView 中載入 YouTube 網頁。
最後，我們正在為我們用於 WebView 的 WebChromeClient 和 WebViewClient 建立一個類。
新增上述程式碼後，我們現在只需單擊頂部欄中的綠色圖示即可在移動裝置上執行我們的應用程式。
注意 - 確保已連線到您的真實裝置或模擬器。
輸出
結論
在上述文章中，我們瞭解瞭如何在 Android WebView 全屏播放 HTML5 影片。
5000+ 次瀏覽
