You can refer to the code below for JWPlayer to Webview
private void createVideoHtml(File flvDirectory, File htmlFile, String videofilename)
{
String htmlPre = "<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body style='margin:0; padding:0;'>";
String htmlCode =
"<script type='text/javascript' src='"+ flvDirectory.getAbsolutePath() + "/jwplayer.js'></script>" +
"<div id='mediaspace'>EZ Stream TV FLV Player</div>" +
"<script type='text/javascript'>" +
"jwplayer('mediaspace').setup({" +
"'flashplayer': '"+ flvDirectory.getAbsolutePath() + "/player.swf', 'file': '" + videofilename + "', 'backcolor': 'FFFFFF', 'frontcolor': '000000', 'lightcolor': '000000'," +
"'screencolor': '000000', 'volume': '100', 'autostart': 'true', 'mute': 'false', 'quality': 'false', 'controlbar': 'bottom', 'width': '100%', 'height': '100%'," +
"events: { " +
"onComplete: function() { alert('COMPLETED');}" +
"}});" +
"</script>";
String htmlPost = "</body></html>";
String finalHTML = htmlPre + htmlCode + htmlPost;
try {
FileWriter f = new FileWriter(htmlFile);
PrintWriter p = new PrintWriter(f);
p.print(finalHTML);
p.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
webView = (WebView)findViewById(R.id.web_player);
webView.getSettings().setBuiltInZoomControls(false);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setAllowFileAccess(true);
webView.setInitialScale(60);
webView.setBackgroundColor(Color.BLACK);
getWindow().addFlags(128);
webView.getSettings().setUserAgentString("Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)");
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final android.webkit.JsResult result)
{
Log.d(TAG, message);
new AlertDialog.Builder(view.getContext()).setMessage(message).setCancelable(true).show();
result.confirm();
return true;
}
});
In fact, there IS a VideoJS-based plug-in for displaying thumbnails that was done by BrightCove. See here on GitHub:
https://github.com/brightcove/videojs-thumbnails/blob/master/example.html
The base-poster here seems to favor generating the images in real-time
and notes the following:
"The only real issue is that the user has to wait a couple of seconds before the video is ready to be watched."
Unless I'm missing something, it should be preferable and straight-forward to generate the needed VTT-file (of the thumbnail-image info) offline.
EDIT: Choosing to do the extraction offline has the additional advantage
that the robust tool 'ffmpeg' seems to be the clear choice. (After evaluating the suggested and immature 'mtn' tool, I rejected it because I could never manage to prevent it from skipping/omitting shots .)
EDIT: BrightCove has nice example code and explanation, including how to
do things more efficiently using video 'sprites'. See here:
https://support.brightcove.com/display-thumbnail-previews-plugin#Example
EDIT: [I am planning to develop such an example, and will update
this answer when I complete that effort...stay tuned.]
EDIT: I finally completed my approach to implementing 'thumbnails' for a video... it is here:
https://weasel.firmfriends.us/Private3-BB/
Best Answer
I wrote a script to do this task. Given a video file (MP4 or M4v), generate thumbnail images, compress into a sprite, and generate a VTT file compatible with JWPlayer tooltip thumbnails. All of the image manipulation uses tools from ffmpeg, ImageMagick, and optionally sips and optipng. The WebVTT generation part, I had to write.
You will have to install ffmpeg & imagemagick, at a minimum to use this.
Github code is here: https://github.com/vlanard/videoscripts (under sprites/).
The basic gist is:
Create a bunch of thumbnails, e.g. every 45th second from a video
Resize those thumbnails to be small, e.g. 100pixels wide
OR if sips not available, use imageMagick utility:
Get the height & width dimensions of one of the thumbnails to use as the basis of our grid coordinates, using ImageMagick utility
which returns output like : 100x55+0+0 - tv001.png
from which we parse 100 and 55 as our Width & Height, and the general geometry of each thumbnail (W, H, X, Y)
We then generate our single spritemap from the individual thumbnails. We determine the target grid size (e.g. 2x2, 8x8) to suit the number of thumbnails we generated for this video, as well as passing in the sprite geometry, using an ImageMagick utility
Optionally we can run an extra compression step here to make the sprite smaller
We then generate a VTT file based on the number of thumbnails we created, using the interval that we used to space out the thumbnails to label each time segment, and using the known coordinates of each consecutive image within our sprite that maps to the associated segment.