• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Apps Enabling HTML5 video playback in android WebView?

Jump to latest Follow Reply
Sort by date Sort by votes
V

Vedtam

Lurker
Jun 19, 2013
9
0
#1
Hi,

I am building a simple webview application which is now displaying a website filled with short video clips, using the HTML5 video player. Everything runs ok in the default android web browser but webview wont't play any of the video clips.


Html code used to play the video clips:

[HIGH]<video poster preload="true" controls autoplay with="500" height="200">
<source src="http://www.edmondvarga.com/demo/videos/video.mp4" type="video/mp4">
</video>[/HIGH]




Main Activity.java :

[HIGH]package tscolari.mobile_sample;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class InfoSpotActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);


setContentView(R.layout.main);

WebView mainWebView = (WebView) findViewById(R.id.mainWebView);

WebSettings webSettings = mainWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

mainWebView.setWebViewClient(new MyCustomWebViewClient());
mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

mainWebView.loadUrl("http://server.info-spot.net");
}

private class MyCustomWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
}
[/HIGH]

How could I enable video playback inside webview?


Best regards,
vedtam
 
#2
I have managed to get my video autoplay inside my webview.apk, tested on my phone (4.1.2) and it works, while on my android mini pc (4.2) has to be clicked to start the playback...:(

Could WebChromeClient may be the reason? If it has something in common with chromium, which fails to autoplay as well, while the stock web browser plays nicely??

The javascript I use to get the autoplay working is the following:

<html>
<head>

<script>

function callback () {
document.querySelector('video').play();
}

window.addEventListener("load", callback, false);


</script>

</head>



<body>
<div id="video_post1" style="margin: -454px 0px 0px -3px;position: absolute;">
<video controls autoplay with="600" height="400">

<source src="http://www.edmondvarga.com/demo/videos/trx.mp4" type="video/mp4">


</video>
</div>

</body>
</html>


Maybe I would use another syntax to play it (like: document ready)?

---------

Eclipse code, just for demonstration:

package tscolari.mobile_sample;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebChromeClient;

import android.media.MediaPlayer;


public class InfoSpotActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);


setContentView(R.layout.main);

WebView mainWebView = (WebView) findViewById(R.id.mainWebView);

WebSettings webSettings = mainWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

mainWebView.setWebChromeClient(new WebChromeClient());

mainWebView.setWebViewClient(new MyCustomWebViewClient());
mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);




mainWebView.loadUrl("http://server.info-spot.net");
}


private class MyCustomWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
}
 
Upvote 0
You must log in or register to reply here.

BEST TECH IN 2023

We've been tracking upcoming products and ranking the best tech since 2007. Thanks for trusting our opinion: we get rewarded through affiliate links that earn us a commission and we invite you to learn more about us.

Smartphones

Best Android Phones

See All
  1. Google Pixel 8 Pro Check Price
  2. Samsung Galaxy S23 Ultra Check Price
  3. Samsung Galaxy Z Fold5 Check Price
  4. Google Pixel 8 Check Price
  5. Samsung Galaxy S23 Check Price

Upcoming

See All
  1. Samsung Galaxy S24 Early Access

Best iPhones

See All
  1. Apple iPhone 15 Pro Max Check Price
  2. Apple iPhone 15 Pro Check Price
  3. Apple iPhone 15 Plus Check Price
  4. Apple iPhone 15 Check Price
  5. Apple iPhone SE (2022) Check Price

Upcoming

See All
  1. Apple iPhone 16 Early Access

Tablets

Best Tablets

See All
  1. Samsung Galaxy Tab S9 Ultra Check Price
  2. Apple iPad Pro (2022) Check Price
  3. Apple iPad Air (2022) Check Price
  4. Apple iPad Mini (2021) Check Price
  5. Microsoft Surface Pro 9 Check Price

Upcoming

See All
  1. Apple iPad Air 6 Early Access
  2. Apple iPad Fold Early Access

Laptops

Best Laptops

See All
  1. Apple Macbook Pro Check Price
  2. Apple Macbook Air (2023) Check Price
  3. Dell XPS 13 Check Price
  4. Acer Chromebook Spin 714 Check Price
  5. Dell Alienware m18 (2022) Check Price

Upcoming

See All
  1. Microsoft Surface Laptop 6 Early Access
  2. Microsoft Surface Pro 10 Early Access

Televisions

Best TVs

See All
  1. Samsung The Frame TV Check Price
  2. Samsung Neo QLED 4K QN90C Check Price
  3. LG G3 OLED Check Price
  4. LG A2 OLED Check Price
  5. ROKU Plus Series Check Price
  6. Samsung S90C OLED Check Price
  7. SunBriteTV Veranda 3 Check Price

Upcoming

See All
  1. Hisense 110UX ULED X TV Early Access

Game Consoles

Best Game Consoles

See All
  1. Nintendo Switch OLED Check Price
  2. Microsoft XBOX Series X Check Price
  3. Sony Playstation 5 Check Price
  4. Microsoft XBOX Series S Check Price
  5. Nintendo Switch Lite Check Price

Upcoming

See All
  1. Nintendo Switch 2 Early Access

Wearables

Best Wearables

See All
  1. Oura Ring 3 Check Price
  2. Apple Watch Series 9 Check Price
  3. Google Pixel Watch 2 Check Price
  4. Samsung Galaxy Watch 6 Classic Check Price
  5. Fitbit Inspire 3 Check Price
  6. Amazfit Amazfit Band 7 Check Price
  7. Apple Watch SE Check Price
  8. Apple Watch Ultra 2 Check Price

Upcoming

See All
  1. Samsung Galaxy Watch 7 Early Access

Smart Home

Smart Home Tech

See All
  1. Amazon Echo (4th Gen) Check Price
  2. Schlage Encode Smart Lock Check Price
  3. Amazon Blink Smart Cameras Check Price
  4. Google Nest Thermostat Check Price
  5. Phillips Hue Smart Lights Check Price

Upcoming

See All
  1. Apple Homepod Vision Early Access

Similar threads

M
"Can't resolve symbol 'mywebview'"
Replies
0
Views
791
Android Development
Mekaboo
M
netgoogle
load local html file in webview android studio
Replies
2
Views
2K
Android Development
netgoogle
netgoogle
StephaneM
ImageView clickable, Webview and php
Replies
1
Views
3K
Android Development
StephaneM
StephaneM
T
webView
Replies
2
Views
2K
Android Development
testDev
T
U
Apps (Help) Pressing back on webview fragment activity does not go back to previous page
Replies
0
Views
3K
Android Development
unet
U
Top Bottom
Back
Jump to latest Follow Reply
Jump to latest Follow Reply