gpt4 book ai didi

android - 在 Android webview 中自动播放 vimeo 视频

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:24:36 25 4
gpt4 key购买 nike

我已经设法使用以下方法加载和播放 vimeo 视频。但是,如 vimeo oembed doc 中所示,autoplay=1 s 不会在加载时自动播放。任何人都找到了自动播放的方法(还需要在视频结束时捕捉事件)

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");

最佳答案

此答案仅针对 Vimeo。在大约十几次失败的尝试之后,这就是我的工作。也许它会帮助别人。向其他 SO 答案的原作者道歉一千次。我在下面“借用”了一些模式——只是认为将所有这些放在一个地方会很方便,并且不要为我自己的代码声明它们。

首先,我还没有找到解决嵌入 Vimeo 播放器的方法(即你不能直接访问 mp4 流——至少不容易或不可靠——我很确定这是故意的)。其次,Vimeo 提供了一个 javascript 库来检测他们的播放器,并且使用它是相当不可避免的。当心,它需要消息传递,这是一种较新的浏览器功能。这记录在他们的 API 页面上。第三,正如 SO 的其他地方所记录的那样,您需要非常小心地等待部分堆栈准备就绪,并且不要跳枪。第四,Vimeo 播放器包含一个特别无用的背景图像,旨在传达插件丢失或损坏(一小帧电影,这是常见的图标)。真正的意思是你的 javascript 在某个地方被轰炸了,什么都没有运行。如果您在空白屏幕上看到一小段电影,请检查您的 javascript。

第 1 步。设置 WebView。你上面有这个正确的。作为引用,这是我使用的。

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);

第 2 步。如果您希望视频在 WebView 上工作,则需要 WebChromeClient。此处记录:http://developer.android.com/reference/android/webkit/WebView.html (请参阅 HTML 视频支持)。

再一次,我用的是引用。

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() {
}

}

WebViewClient 看起来像这样:

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);
}
}

}

第 3 步。您需要构建一点点 Javascript 来触发播放器。我用过这个:

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);" +
"});");
}

快速解释。 . .我在我的 JS 中使用 jQuery,它在下面。那只是为了方便,如果你想减轻负担,你可以直接做JS。请注意,在其他一切准备就绪之后,脚本会再等待 3 秒才能真正触发。在我软弱的时候,我想象 Vimeo 的好心人有一个 splinter 的“准备好”回调。 3 秒似乎可以做到。

第 4 步。页面上需要一些 HTML 和 JavaScript。我将它放在资源 (raw/vimeo_frame.html) 内的文本文件中。该文件如下所示:

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

然后我像这样加载这个 html 文件:

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);
}
}

然后像这样注入(inject):

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);

哇!当 WebView 准备就绪时,html 和 js 就会进入,包括带有 Vimeo 播放器的 iframe。加载文档后,我们等待播放器准备就绪。当播放器准备就绪时,我们添加一些监听器。 3 秒后,我们触发 api“播放”方法。

观众中那些爱吹毛求疵的人可能想知道,为了完整起见,如何停止视频?两位。首先,当它结束时,我通过观察控制台输出中显示的消息来停止它。因此:

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('');" +
"});");
}

可以这样插入:

@Override
public void onPause() {
super.onPause();
if(isFinishing()){
// Unload the page
if(mWebView != null) {
Log.i(TAG, " ------> Destroying WebView");
mWebView.destroy();
}
}
finish();
}

第二部分是视频完成它的小 self 的地方。因此,在上面的 vimeo_frame.html 中,就在“播放”回调之后,我输入:

froogaloop.addEvent('finish', function(data) { 
console.log('EVENT -- Finish');
});

在 Activity 中,我做了一些观察 - 请参阅上面的 onConsoleMessage 覆盖。

但是——在撰写本文时,我仍然没有解决一个棘手的问题。 MediaPlayer 在 WebView 及其所有后代消失后继续存在。我确信这会产生一些问题,但我还没有发现它们。

关于android - 在 Android webview 中自动播放 vimeo 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9030524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com