如何将HTML5视频嵌入到webview中

时间:2013-04-15 18:44:23

标签: android html5 video

我之前已经看到过这个问题的实例,但我要么无法让他们工作,要么不理解他们......

我确保将我的webview设置为WebChromeClient并在清单文件中启用硬件加速。我将编译的应用程序发送到三星Galaxy Tab GT-P1000。结果是视频元素加载但文件不播放。 html文件在我的电脑上以chrome的形式运行。

我没有很多关于ADT的经验,所以如果你可以尝试尽可能详细地回复那些很棒的回复!

这是我的HTML代码..

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript"></script>
    </head>
    <body>
        <div id="video">
            <video id="vid" height="240" width="360" preload controls>
                <source src="ljmuvideo.mp4" type="video/mp4">
        </video>
        </div>
        <script>
            var video = document.getElementById('vid');
            video.addEventListener('click',function(){
            video.play();
            },false);
        </script>
    </body>
</html>

这是我的MainActivity.java

package com.ljmu.sltwebview;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.view.Menu;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    @SuppressLint("SetJavaScriptEnabled") @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView mywebview = (WebView) findViewById(R.id.webview);
        mywebview.loadUrl("file:///android_asset/html5vid.html");
        mywebview.getSettings().setUseWideViewPort(true);
        WebSettings webSettings = mywebview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(true);
        mywebview.setWebChromeClient(new WebChromeClient());

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

这是我的清单文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ljmu.sltwebview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

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

    <application
        android:allowBackup="true"
        android:hardwareAccelerated="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.ljmu.sltwebview.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

1 个答案:

答案 0 :(得分:2)

由于它不允许您从Assets文件夹中播放电影,因此您需要将视频(以及方便其他资源)复制到SD卡。

这篇文章有一个很好的示例How to copy files from 'assets' folder to sdcard?虽然你需要添加代码来创建输出目录(也来自那里的评论)。您可能还想检查文件是否存在,并避免在不需要时复制它们

移动HTML页面后,您可以通过file:/// sdcard / {myapp} /default.html在webview中引用它,然后资源路径将相对于文档