问题描述
我已经得到了一个VIMEO视频加载和播放，请使用以下。但是自动播放= 1作为负载的VIMEO oembed文档 S不自动播放显示。任何人都找到了一种方法来自动播放（也需要捕捉事件时，视频结束）
mWebView.getSettings（）setJavaScriptEnabled（真）。
mWebView.getSettings（）setAppCacheEnabled（真）。
mWebView.getSettings（）setDomStorageEnabled（真）。
//如何插件启用变化API 8
如果（Build.VERSION.SDK_INT＆所述; 8）{
mWebView.getSettings（）setPluginsEnabled（真）。
} 其他 {
。mWebView.getSettings（）setPluginState（PluginState.ON）;
}
mWebView.loadUrl("http://player.vimeo.com/video/24577973?player_id=player&autoplay=1&title=0&byline=0&portrait=0&api=1&maxheight=480&maxwidth=800");
这答案是具体到Vimeo只。大约过了十几个失败的尝试，这是我所工作。也许这会帮助别人。千道歉的其他SO答案原作者。我已经借了一批低于模式 - 只是认为这将是方便有这一切都在一个地方，不主张他们自己的code
首先，我还没有发现周围嵌入Vimeo的球员的方式（即你不能在直接在MP4流 - 至少不容易和可靠的 - 我是pretty的肯定是故意的）。其次，Vimeo的提供了一个JavaScript库仪器的播放器，并使用它是相当不可避免的。要注意，这需要消息传递，这是一个较新的浏览器的功能。这是记录在他们的API页面。第三，在其他地方在案的话，你需要非常小心地等待栈部分准备就绪，并没有枪跳。四，Vimeo的球员包括意在表达这样的插件丢失或损坏特别无益的背景图像（电影有点框架，为这个共同的图标）。什么是真正的意思是，你的JavaScript已经轰炸了某个地方，并没有在所有正在运行。如果你看到一个空白屏幕上的电影一点，请检查您的JavaScript。
步骤1.设置的WebView。你有这个正确的上方。作为参考，下面是我用的东西。
mWebView =新的WebView（（上下文）本）;
mWebView.setLayoutParams（新的LayoutParams（WINDOWWIDTH，WINDOWHEIGHT））;
mWebView.getSettings（）setJavaScriptEnabled（真）。
//看这里的SDK水平，与LT; 12，需要假
//诚征给力HTML5 / 264 / MP4，你可能要闪光
//在这里仍然可用
。mWebView.getSettings（）setPluginState（PluginState.OFF）;
。mWebView.getSettings（）setLoadWithOverviewMode（真正的）;
。mWebView.getSettings（）setUseWideViewPort（真正的）;
mWebView.getSettings（）setUserAgentString（机器人的Mozilla / 5.0为AppleWebKit / 534.30（KHTML，像壁虎）版/ 4.0移动Safari / 534.30）。
WCC =新MyWebChromeClient（）;
mWebView.setWebChromeClient（WCC）;
WVC =新MyWebViewClient（）;
mWebView.setWebViewClient（WVC）;
步骤2.你需要WebChromeClient，如果你想视频工作，对web视图。这是记录在这里：http://developer.android.com/reference/android/webkit/WebView.html （见HTML视频支持）。
此外，以供参考下面是我用的东西。
私有类MyWebChromeClient扩展WebChromeClient {
@覆盖
公共无效onProgressChanged（web视图来看，INT进度）{
如果（进度== 100）{
//你的页面加载，但不可见，
//添加任何导航元素，你打算在这里使用。
// N.B.这些都是JAVA，不是JS导航元素
}
}
@覆盖
公共布尔onConsoleMessage（ConsoleMessage厘米）{
//我喜欢在控制台中观看。并且，因为它是
//一个非常方便的方式来监测的JavaScript，我
//使用它太。纯粹主义者会反对，无疑
如果（cm.message（）equalsIgnoreCase（事件 - 完成。））{
Log.i（TAG， - ＆GT;完成。）;
//出发活动
完（）;
} 其他 {
Log.d（TAG，**控制台[+ cm.sourceId（）+（+ cm.lineNumber（）+）+ cm.message（）+]）;
}
返回（真）;
}
@覆盖
公共查看getVideoLoadingProgressView（）{
//娱乐的东西，而字节抵达
Log.i（TAG。-------------＆GT;加载进度。）;
LayoutInflater充气=（LayoutInflater）getSystemService（Context.LAYOUT_INFLATER_SERVICE）;
返程（inflater.inflate（R.layout.loading_video，NULL））;
}
@覆盖
公共无效onShowCustomView（视图V，WebChromeClient.CustomViewCallback回调）{
//非常悲伤，我报告，这永远不会触发。
//无论是否在隐藏。
}
@覆盖
公共无效onHideCustomView（）{
}
}
在WebViewClient看起来是这样的：
私有类MyWebViewClient扩展WebViewClient {
@覆盖
公共无效onPageFinished（web视图查看，字符串URL）{
super.onPageFinished（查看，网址）;
串注射= injectPageMonitor（）;
如果（注射！= NULL）{
Log.d（TAG，---------------＆gt;页面加载。）;
Log.d（TAG。注入[+注射+]）;
view.loadUrl（注射）;
}
}
}
步骤3.你需要建立的Javascript一点点火的球员。我用这样的：
公共字符串injectPageMonitor（）{
返回（JavaScript的：+
jQuery的（文件）。就绪（函数（）{+
的console.log（'===页就绪===＆GT;设置'）; +
的console.log（'====发送播放命令==='）; +
变种froogaloop = $ F（'froog'）; +
的setTimeout（函数（）{froogaloop.api（'玩'）;}，3000）; +
}）;）;
}
简单说明。 。 。我在JS使用jQuery，这是未来如下。这只是为了方便，你可以，如果你想减轻负担做直JS。需要注意的是后一切准备就绪后，该脚本将等待另外3秒钟，居然火。在我弱的时刻，我想象的那种人在Vimeo的有一个破碎的准备就绪的回调。 3秒似乎做了。
第四步：您需要在页面上一些HTML和JavaScript。我把它的资源（原材料/ vimeo_frame.html）内的文本文件。该文件是这样的：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
＆LT;脚本类型=文/ JavaScript的＆GT; jQuery.noConflict（）;＆LT; / SCRIPT＆GT;
＆所述;脚本的src =http://a.vimeocdn.com/js/froogaloop2.min.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
jQuery的（文件）。就绪（函数（）{
VAR showing_player = FALSE;
变种froogaloop = $ F（'froog'）;
的console.log（'===页就绪===＆GT;设置'）;
jQuery的（'froog_container_class。）隐藏（）。
jQuery的（'控制台。'）的CSS（高度，100％）。
froogaloop.addEvent（'准备好'，函数（）{
的console.log（'====球员准备====＆GT;设置播放回调'）;
froogaloop.addEvent（'玩'，功能（数据）{
的console.log（'活动 - 播放）;
/ *不知道为什么，但如果不显示播放器，这是不言而喻
直奔暂停。可能是一个功能。所以我给它4x4px
要做到这一点是在安装过程中的事* /
jQuery的（'froog_container_class。）显示（）。
jQuery的（'froog_container_class。），CSS（高度，递四方）。
jQuery的（'froog_container_class。'）的CSS（'宽'，'4PX）。
jQuery的（'froog_container_class。'）的CSS（'溢出'，'隐藏'）。
}）;
/ *我不想以显示视频，直到它实际上是
播放。因此，我在这里* /
VAR showingPlayer = FALSE;
froogaloop.addEvent（'playProgress'，功能（数据）{
如果（showingPlayer＆安培;！＆安培; data.percent大于0）{
showingPlayer = TRUE;
jQuery的（'froog_container_class。）显示（）。
jQuery的（'froog_container_class。'）的CSS（'身高'，'_windowHeight'）。
jQuery的（'froog_container_class。'）的CSS（'宽度'，'_windowWidth'）。
/ *是大多数平板电脑我测试不够快，使这项工作
但人们仍然可以期待* /
jQuery的（'＃装载）淡出（慢）。
}
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;风格＆GT;
体 {
背景图像：网址（HTTP：//＆LT; SomethingEntertainingToWatch＆GT;巴纽'）;
背景尺寸：包含;
}
。面具 {
浮动：左;
身高：_windowHeight;
宽度：_windowWidth;
的z-index：100;
背景：透明;
显示：内联;
位置：绝对的;
顶部：0;
左：0;
}
.froog_container_class {
位置：绝对的;
身高：_windowHeight;
宽度：_windowWidth;
左：0;
顶部：0;
显示：内联;
的z-index：1;
}
#froog {
显示：内联;
身高：_windowHeight;
宽度：_windowWidth;
现在的位置是：绝对的;
顶部：0;
左：0;
}
＆LT; /风格＆GT;
＆LT; DIV ID =加载级=加载＆GT;＆LT; H1＆GT;装载＆LT; / H1＆GT;＆LT; IMG类=loading_animSRC =http://foo.bar.com/assets/global/loading .gif注意/＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 完全可选的，我把一个div在玩家块控制前 - ＆GT;
＆LT; DIV ID =面具级=面具＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =froog_container级=froog_container_class＆GT;
＆所述; iframe中的id =froogSRC =_ TargetURL中API = 1＆安培;标题= 0＆安培;署名= 0＆安培;肖像= 0＆安培; player_id = froogFRAMEBORDER =0webkitAllowFullScreen mozallowfullscreen的allowFullScreen＆GT;
＆LT; / IFRAME＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
和我打开这个HTML文件像这样：
公共字符串genMainHTML（）{
字符串code = NULL;
尝试 {
资源RES = getResources（）;
InputStream的in_s = res.openRawResource（R.raw.vimeo_frame）;
byte []的B =新的字节[in_s.available（）];
in_s.read（B）;
code =新的String（B）;
}赶上（例外五）{
e.printStackTrace（）;
}
如果（code！= NULL）{
code = code.replaceAll（_ WINDOWHEIGHT，+ WINDOWHEIGHT +PX）;
code = code.replaceAll（_ WINDOWWIDTH，+ WINDOWWIDTH +PX）;
code = code.replaceAll（_ TargetURL的，TargetURL中）;
返回（code）;
} 其他 {
返程（空）;
}
}
和注入它像这样：
mDomain =http://player.vimeo.com;
mWebView.requestFocus（View.FOCUS_DOWN）;
TargetURL中= extras.getString（URL）;
串肉= genMainHTML（）;
mWebView.loadDataWithBaseURL（mDomain，肉，text / html的，UTF-8，NULL）;
的setContentView（mWebView）;
呼！当web视图准备就绪，那么HTML和JS去，包括与Vimeo的球员的iframe。当文件被加载，那么我们等待玩家准备就绪。当玩家准备就绪，我们添加一些听众。而3秒后，我们火了API'玩'的方法。
这些苹果打蜡机在观众可能会疑惑，完整性，一个人如何停止视频？两位。首先，它结束时，我通过观察消息我显示控制台输出停止。因此：
公共字符串injectPageFinisher（）{
返回（JavaScript的：+
jQuery的（文件）。就绪（函数（）{+
的console.log（'===页就绪===＆GT;拆除'）; +
的console.log（'====发送暂停命令==='）; +
变种froogaloop = $ F（'froog'）; +
froogaloop.api（暂停）; +
jQuery的（'＃froog_container'）的HTML（''）;。 +
}）;）;
}
可以插入像这样：
@覆盖
公共无效的onPause（）{
super.onPause（）;
如果（isFinishing（））{
//卸载页面
如果（mWebView！= NULL）{
Log.i（TAG，------＆GT;销毁的WebView）;
mWebView.destroy（）;
}
}
完（）;
}
第二位的是在视频完成它一点自我。因此，在上述vimeo_frame.html，只是'玩'的回调后，我把：
froogaloop.addEvent（'完成'，功能（数据）{
的console.log（事件 - 完成'）;
}）;
和活动中，我说得有点看这个 - 见上面的onConsoleMessage覆盖
不过 - 在撰写本文时，我还没有进行排序1恼人的问题。在MediaPlayer住在之后的WebView及其所有后代都没有了。我敢肯定，这产生了一些问题，但我还没有确定他们没有。
I've managed to get a vimeo video to load and play, using the following. However the autoplay=1 as indicated in the vimeo oembed docs doesn't auto play on load. Anyone found a way to auto play (also need to catch event when video finishes)
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setAppCacheEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
// how plugin is enabled change in API 8
if (Build.VERSION.SDK_INT < 8) {
mWebView.getSettings().setPluginsEnabled(true);
} else {
mWebView.getSettings().setPluginState(PluginState.ON);
}
mWebView.loadUrl("http://player.vimeo.com/video/24577973?player_id=player&autoplay=1&title=0&byline=0&portrait=0&api=1&maxheight=480&maxwidth=800");
This answer is specific to Vimeo only. After about a dozen failed attempts, here's what I have working. Perhaps it will help somebody else. A thousand apologies to the original authors of other SO answers. I have 'borrowed' a number of patterns below -- just thought it would be handy to have all this in one place, and do not claim them for my own code.
First, I have not found a way around embedding the Vimeo player (i.e. you can't get at the mp4 stream directly -- at least not easily or reliably -- I'm pretty sure that's deliberate). Second, Vimeo offers a javascript library to instrument their player, and using it is fairly unavoidable. Beware, it requires message passing, which is a newer browser feature. This is documented on their API page. Third, as is documented elsewhere on SO, you need to be very careful to wait for parts of the stack to become ready, and to not gun-jump. Fourth, the Vimeo player includes a particularly unhelpful background image meant to convey that the plugin is missing or broken (a little frame of film, common icon for this). What is really means is that your javascript has bombed out someplace, and nothing at all is running. If you see the little bit of film on a blank screen, check your javascript.
Step 1. Set up a WebView. You have this correct above. For reference, here is what I used.
mWebView = new WebView((Context) this);
mWebView.setLayoutParams(new LayoutParams(windowWidth, windowHeight));
mWebView.getSettings().setJavaScriptEnabled(true);
// Watch the sdk level here, < 12 requires 'false
// Wanted to force HTML5/264/mp4, you may want flash
// where still available
mWebView.getSettings().setPluginState(PluginState.OFF);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setUserAgentString("Android Mozilla/5.0 AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30");
wcc = new MyWebChromeClient();
mWebView.setWebChromeClient(wcc);
wvc = new MyWebViewClient();
mWebView.setWebViewClient(wvc);
Step 2. You need the WebChromeClient if you want video to work on the WebView. That's documented here: http://developer.android.com/reference/android/webkit/WebView.html (See HTML Video Support).
Again, for reference here is what I used.
private class MyWebChromeClient extends WebChromeClient {
@Override
public void onProgressChanged(WebView view, int progress) {
if(progress == 100) {
// Your page is loaded, but not visible,
// add whatever navigation elements you plan to use here.
// N.B. these are JAVA, not JS nav elements
}
}
@Override
public boolean onConsoleMessage(ConsoleMessage cm) {
// I like to watch in the console. And, since it was
// a very convenient way to monitor the javascript, I
// use it for that too. Purists will object, no doubt
if(cm.message().equalsIgnoreCase("EVENT -- Finish")) {
Log.i(TAG, "---> Finishing . . .");
// Depart the activity
finish();
} else {
Log.d(TAG, " **Console ["+cm.sourceId()+"] ("+cm.lineNumber()+") ["+cm.message()+"]");
}
return(true);
}
@Override
public View getVideoLoadingProgressView() {
// Something entertaining while the bytes arrive
Log.i(TAG, " -------------> Loading Progress . . . ");
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
return(inflater.inflate(R.layout.loading_video, null));
}
@Override
public void onShowCustomView(View v, WebChromeClient.CustomViewCallback callback) {
// With great sadness, I report that this never fires.
// Neither does the 'hide'.
}
@Override
public void onHideCustomView() {
}
}
The WebViewClient looks like this:
private class MyWebViewClient extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String injection = injectPageMonitor();
if(injection != null) {
Log.d(TAG, " ---------------> Page Loaded . . .");
Log.d(TAG, " Injecting . . . ["+injection+"]");
view.loadUrl(injection);
}
}
}
Step 3. You need to build a tiny bit of Javascript to fire the player. I used this:
public String injectPageMonitor() {
return( "javascript:" +
"jQuery(document).ready( function() { " +
"console.log(' === Page Ready ===> Setting up');" +
"console.log(' ==== Sending PLAY Command ===');" +
"var froogaloop = $f('froog');" +
"setTimeout(function() { froogaloop.api('play'); }, 3000);" +
"});");
}
Quick explanation . . . I use jQuery in my JS, that's coming below. That's only for convenience, you can do straight JS if you want to lighten the load. Note that after everything else is ready, the script waits another 3 seconds to actually fire. In my weaker moments, I imagine that the kind folks at Vimeo have a broken "ready" callback. 3 Seconds seems to do it.
Step 4. You need some HTML and JavaScript on the page. I put it in a text file inside the resources (raw/vimeo_frame.html). The file looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
var showing_player = false;
var froogaloop = $f('froog');
console.log(' === Page Ready ===> Setting up');
jQuery('.froog_container_class').hide();
jQuery('.console').css('height', '100%');
froogaloop.addEvent('ready', function() {
console.log('==== PLAYER READY ====> Setting Play Callback');
froogaloop.addEvent('play', function(data) {
console.log('EVENT -- Play');
/* No idea why, but if the player isn't displayed, it goes
straight to 'pause'. Probably a feature. So I give it 4x4px
to do it's thing during setup */
jQuery('.froog_container_class').show();
jQuery('.froog_container_class').css('height', '4px');
jQuery('.froog_container_class').css('width', '4px');
jQuery('.froog_container_class').css('overflow', 'hidden');
});
/* I don't want to reveal the video until it is actually
playing. So I do that here */
var showingPlayer = false;
froogaloop.addEvent('playProgress', function(data) {
if(!showingPlayer && data.percent > 0) {
showingPlayer = true;
jQuery('.froog_container_class').show();
jQuery('.froog_container_class').css('height', '_windowHeight');
jQuery('.froog_container_class').css('width', '_windowWidth');
/* Most tablets I tested aren't quick enough to make this work
but one can still hope */
jQuery('#loading').fadeOut('slow');
}
});
});
});
</script>
</head>
<body>
<style>
body {
background-image: url('http://<SomethingEntertainingToWatch>.png');
background-size: contain;
}
.mask {
float: left;
height: _windowHeight;
width: _windowWidth;
z-index: 100;
background: transparent;
display: inline;
position: absolute;
top: 0;
left: 0;
}
.froog_container_class {
position: absolute;
height: _windowHeight;
width: _windowWidth;
left: 0;
top: 0;
display: inline;
z-index: 1;
}
#froog {
display: inline;
height: _windowHeight;
width: _windowWidth;
postion: absolute;
top: 0;
left: 0;
}
</style>
<div id="loading" class="loading"><h1>Loading</h1><img class="loading_anim" src="http://foo.bar.com/assets/global/loading.gif"/>
</div>
<!-- Completely optional, I put a div in front of the player to block controls -->
<div id="mask" class="mask">
</div>
<div id="froog_container" class="froog_container_class">
<iframe id="froog" src="_targetUrl?api=1&title=0&byline=0&portrait=0&player_id=froog" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>
</body>
</html>
And I load this html file like so:
public String genMainHTML() {
String code = null;
try {
Resources res = getResources();
InputStream in_s = res.openRawResource(R.raw.vimeo_frame);
byte[] b = new byte[in_s.available()];
in_s.read(b);
code = new String(b);
} catch (Exception e) {
e.printStackTrace();
}
if(code != null) {
code = code.replaceAll("_windowHeight", "" + windowHeight + "px");
code = code.replaceAll("_windowWidth", "" + windowWidth + "px");
code = code.replaceAll("_targetUrl", targetUrl);
return(code);
} else {
return(null);
}
}
And inject it like so:
mDomain = "http://player.vimeo.com";
mWebView.requestFocus(View.FOCUS_DOWN);
targetUrl = extras.getString("URL");
String meat = genMainHTML();
mWebView.loadDataWithBaseURL(mDomain, meat, "text/html", "utf-8", null);
setContentView(mWebView);
Whew! When the WebView is ready, then the html and js go in, including the iframe with the Vimeo player. When the document is loaded, then we wait for the player to become ready. When the player is ready, we add some listeners. And 3 seconds later, we fire the api 'play' method.
Those apple-polishers in the audience may be wondering, for completeness, how does one stop the video? Two bits. First, when it ends, I stop it by watching the console output for a message I display. Thus:
public String injectPageFinisher() {
return( "javascript:" +
"jQuery(document).ready( function() { " +
"console.log(' === Page Ready ===> Tearing down');" +
"console.log(' ==== Sending PAUSE Command ===');" +
"var froogaloop = $f('froog');" +
"froogaloop.api('pause');" +
"jQuery('#froog_container').html('');" +
"});");
}
Which can be inserted like so:
@Override
public void onPause() {
super.onPause();
if(isFinishing()){
// Unload the page
if(mWebView != null) {
Log.i(TAG, " ------> Destroying WebView");
mWebView.destroy();
}
}
finish();
}
The second bit is where the video completes its little self. Thus, in the vimeo_frame.html above, just after the 'play' callback, I put:
froogaloop.addEvent('finish', function(data) {
console.log('EVENT -- Finish');
});
And in the Activity, I put a bit to watch for this -- see above in the onConsoleMessage override.
HOWEVER -- as of this writing, I still have not sorted one nagging problem. The MediaPlayer lives on after the WebView and all its progeny are gone. I'm sure this creates some problems, but I haven't identified them yet.
这篇关于自动播放VIMEO视频Android中的WebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！