Android TV（Android 7）WebView本地MP4视频无法播放求助

我是Web开发者，刚接触Gradle、Kotlin和Android开发，用ChatGPT把简单HTML/JS/CSS网站转成原生App，大部分功能正常，但本地MP4视频播不了。App要跑在Android 7（Nougat）的Android TV上，测试用的基础HTML里视频只显示带播放图标的灰色框。我已经检查调整过视频编码，配置了WebView相关设置，简化了HTML结构，也验证过视频文件路径能被识别，但问题还是没解决。

相关代码文件 #

HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Test</title>
</head>
<body>
<video id="video_holding">
    <source src="file:///android_asset/assets/videos/holding_video_720.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
</body>
</html>

MainActivity.kt #

package com.mytest.app

import android.os.Bundle
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebChromeClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.brownforman.jdoceana.ui.theme.JDOceanaTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val webView = WebView(this)

        webView.webViewClient = WebViewClient()
        webView.webChromeClient = WebChromeClient() // This is needed for HTML5 video
        webView.settings.javaScriptEnabled = true
        webView.settings.domStorageEnabled = true
        webView.settings.mediaPlaybackRequiresUserGesture = false // Allows autoplay of videos
        webView.settings.allowFileAccess = true

        webView.loadUrl("file:///android_asset/index.html")
        setContentView(webView)
        /*enableEdgeToEdge()
        setContent {
            JDOceanaTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }*/
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    JDOceanaTheme {
        Greeting("Android")
    }
}

AndroidManifest.xml #

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />


    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.Oceana">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

解决步骤 #

1. 修正视频路径 #

file:///android_asset/ 已直接指向项目assets根目录，原路径多了一层冗余的assets/，修改HTML中的视频源：

<source src="file:///android_asset/videos/holding_video_720.mp4" type="video/mp4">

确保视频文件实际存放在项目的src/main/assets/videos/目录下。

2. 完善WebView视频播放配置 #

Android 7的WebView需要额外开启硬件加速和内容访问权限，同时自定义WebChromeClient处理全屏播放和错误日志：

// 补充WebView设置
webView.settings.allowContentAccess = true
webView.setLayerType(android.view.View.LAYER_TYPE_HARDWARE, null)

// 替换原WebChromeClient设置
webView.webChromeClient = object : WebChromeClient() {
    override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
        super.onShowCustomView(view, callback)
        if (view is FrameLayout) {
            setContentView(view)
        }
    }

    override fun onHideCustomView() {
        super.onHideCustomView()
        setContentView(webView)
    }

    override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
        Log.d("WebViewConsole", consoleMessage?.message() ?: "")
        return super.onConsoleMessage(consoleMessage)
    }
}

需要添加对应的import：

import android.util.Log
import android.view.View
import android.widget.FrameLayout
import android.webkit.ConsoleMessage
import android.webkit.WebChromeClient.CustomViewCallback

3. 调整Manifest适配Android TV #

添加Leanback模式支持，并移除无用的外部存储权限（读取assets目录不需要）：

<!-- 在<manifest>标签内添加 -->
<uses-feature
    android:name="android.software.leanback"
    android:required="true" />

<!-- 移除以下两个权限 -->
<!-- <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> -->
<!-- <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> -->

4. 强制验证视频编码兼容性 #

Android 7仅支持H.264（Baseline/Main/High Profile）视频编码和AAC音频，用ffmpeg重新编码确保兼容：

ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k output.mp4

5. 添加用户触发播放逻辑 #

即使关闭了mediaPlaybackRequiresUserGesture，Android TV的WebView仍可能需要用户交互触发播放，在HTML中添加JS逻辑：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const video = document.getElementById('video_holding');
        video.addEventListener('click', function() {
            video.play().catch(err => console.log('播放失败:', err));
        });
    });
</script>

内容的提问来源于stack exchange，提问作者Natalie