CODEWITHSUNDEEP
androidhtmlvideo
David Folksman
David Folksman

Reputation: 235

How can I embed HTML5 Video into a webview

I have seen instances of this question asked before, but I either couldn't get them to work or didnt understand them..

I have made sure to set my webview to WebChromeClient and enable hardware scceleration in the manifest file. I am sending the compiled application to a Samsung Galaxy Tab GT-P1000. The result is that the video element loads but the file does not play. The html file runs as exptected in chrome on my PC.

I don't have a lot of experience with ADT so if you could try to be as verbose as possible with your replies that would be great!

Here is my html code..

<!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>

Here is my 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;
    }

}

Here is my manifest file

<?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>

Upvotes: 2

Views: 4508

Answers (1)

Offbeatmammal
Offbeatmammal

Reputation: 8228

As it won't let you play a movie from the Assets folder you will need to copy the video (and for convenience other assets) to the SDcard.

This post has a great sample to do this How to copy files from 'assets' folder to sdcard? though you will need to add code to create the output directory (also from the comments there). You might also want to check if the files exist and avoid copying them when you don't need to

Once you have moved the HTML page you can reference it in the webview via file:///sdcard/{myapp}/default.html and then paths to assets will be relative to the document

Upvotes: 2

Related Questions