android webview youtube嵌入视频自动播放不起作用
Posted
技术标签:
【中文标题】android webview youtube嵌入视频自动播放不起作用【英文标题】：android webview youtube embed video autoplay not working 【发布时间】：2015-03-18 07:39:34 【问题描述】：我无法自动播放我的视频，请帮忙。 我的sdk版本
android:minSdkVersion="14"
android:targetSdkVersion="19" />
我尝试按照代码中指定的方式放置 java 脚本：
public void onPageFinished(WebView view, String url) webView.loadUrl("javascript:(function() document.getElementsByTagName('video')[0].play(); )()");
);
我也尝试在 URL 中附加自动播放但不起作用
//webView.loadUrl("http://youtube.com/embed/oY2OxMpCUVY?autoplay=1");
我的网络设置 `
customViewContainer = (FrameLayout)rootView.findViewById(R.id.customViewContainer);
webView = (WebView) rootView.findViewById(R.id.HelpView_Video);
final GlobleClass globalVariable = (GlobleClass) GlobleClass.getContext();
mWebViewClient = new HelpWebViewClient();
webView.setWebViewClient(mWebViewClient);
mWebChromeClient = new myWebChromeClient();
webView.setWebChromeClient(mWebChromeClient);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setPluginState(PluginState.ON);
webView.setWebViewClient(new WebViewClient()
// autoplay when finished loading via javascript injection
public void onPageFinished(WebView view, String url) webView.loadUrl("javascript:(function() document.getElementsByTagName('video')[0].play(); )()");
);
// if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
// webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
//
webView.getSettings().setAppCacheEnabled(true);
//webView.getSettings().setBuiltInZoomControls(true);
// webView.getSettings().setSaveFormData(true);
//webView.loadUrl("http://youtube.com/embed/oY2OxMpCUVY?autoplay=1");
webView.loadUrl(globalVariable.getHelpVideoUrl());
`
【问题讨论】：
试试这个 urlhttps://www.youtube.com/embed/oY2OxMpCUVY?autoplay=1 将 www 添加到 url。
我的视频可以正常播放，但无法自动播放。我试过你说的。。不行。。
【参考方案1】：
受 Orsi 的 answer 的启发，我能够在显示视频播放器的 WebView 中心模拟 onClick() 事件。这最终会自动播放视频，或者更确切地说，无需用户交互。
private class AutoPlayVideoWebViewClient extends WebViewClient
@Override
public void onPageFinished(WebView view, String url)
super.onPageFinished(view, url);
// mimic onClick() event on the center of the WebView
long delta = 100;
long downTime = SystemClock.uptimeMillis();
float x = view.getLeft() + (view.getWidth()/2);
float y = view.getTop() + (view.getHeight()/2);
MotionEvent tapDownEvent = MotionEvent.obtain(downTime, downTime + delta, MotionEvent.ACTION_DOWN, x, y, 0);
tapDownEvent.setSource(InputDevice.SOURCE_CLASS_POINTER);
MotionEvent tapUpEvent = MotionEvent.obtain(downTime, downTime + delta + 2, MotionEvent.ACTION_UP, x, y, 0);
tapUpEvent.setSource(InputDevice.SOURCE_CLASS_POINTER);
view.dispatchTouchEvent(tapDownEvent);
view.dispatchTouchEvent(tapUpEvent);
某处，
myWebView.setWebViewClient(new AutoPlayVideoWebViewClient());
【讨论】：
非常感谢您节省了我的时间！【参考方案2】：首先使用下面的代码：
webSettings.setMediaPlaybackRequiresUserGesture(false);
之后使用以下方法进行加载：
webView.loadDataWithBaseURL("https://www.youtube.com/", html.replace("CUSTOM_ID","YOUR_YOUTUBE_VIDEO_ID"), "text/html", "utf-8", null);
在 HTML 字符串中使用 YouTube API 传递下面的代码（替换您的 YouTube 视频 ID）
<!DOCTYPE html>
<html>
<style type="text/css">
html, body
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #000000;
overflow: hidden;
position: fixed;
</style>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady()
player = new YT.Player('player',
height: '100%',
width: '100%',
videoId: 'CUSTOM_ID',
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
,
playerVars:
'autoplay': 0,
'showinfo': 1,
'controls': 1
);
function onPlayerReady(event)
event.target.playVideo();
var done = false;
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.PLAYING && !done)
done = true;
function stopVideo()
player.stopVideo();
</script>
</body>
</html>
【讨论】：
谢谢。它真的对我有用。 'playerVars' 似乎是不必要的。【参考方案3】：我终于成功了。。 您需要使用此 API 在“OnReady”事件中播放视频： https://developers.google.com/youtube/iframe_api_reference#Getting_Started
加载包含此示例代码的页面。
并确保你有
webSettings.setMediaPlaybackRequiresUserGesture(false);
（API 16+）
【讨论】：
酷。所以谷歌提供了一个指南偏好。从来不知道。【参考方案4】：您不能在 web 视图上使用 JavaScript 进行自动播放。 为了增强用户体验，WebKit 禁用了在移动浏览器上自动播放视频的选项。
【讨论】：
如何启用该选项？【参考方案5】：自动播放问题是已知问题，请看我的回答here。
【讨论】：
【参考方案6】：bonnyz 在他的回答 here 中发布的代码的 C# 版本。以防万一有人需要 Xamarin :) 我测试了它并且它有效。这是我找到的在 web 视图中自动播放 youtube 视频的唯一解决方案。
public class MyWebViewClient : WebViewClient
WebView webView;
MotionEvent motionEvent, motionEvent2;
public override void OnPageFinished(WebView view, string url)
long delta = 100;
long downTime = SystemClock.UptimeMillis();
float x = view.Left + view.Width / 2;
float y = view.Top + view.Height / 2;
webView = view;
motionEvent = MotionEvent.Obtain(downTime, downTime + delta, MotionEventActions.Down, x, y, 0);
motionEvent2 = MotionEvent.Obtain(downTime + delta + 1, downTime + delta * 2, MotionEventActions.Up, x, y, 0);
int delay = 100;
view.PostDelayed(TapDown, delay);
delay += 100;
view.PostDelayed(TapUp, delay);
private void TapDown()
webView.DispatchTouchEvent(motionEvent);
private void TapUp()
webView.DispatchTouchEvent(motionEvent2);
使用它：
webView.SetWebViewClient(new MyWebViewClient());
【讨论】：
感谢这个答案，我设法在 Java 中进行了一些关键的调整。见，***.com/a/45655979/1157458【参考方案7】：增加价值@Dhunju_likes_to_Learn 的回答。按照Thiago的建议处理在 onResume、onPause 和 onDestroy 方法中按下的后退按钮@
@Override
protected void onCreate(Bundle arg0)
super.onCreate(arg0);
setContentView(R.layout.your_layout);
// Call the AutoPlayVideoWebViewClient class in onCreate method
myWebView.setWebViewClient(new AutoPlayVideoWebViewClient());
写一个私人的
private class AutoPlayVideoWebViewClient extends WebViewClient
@Override
public void onPageFinished(WebView view, String url)
super.onPageFinished(view, url);
// mimic onClick() event on the center of the WebView
long delta = 100;
long downTime = SystemClock.uptimeMillis();
float x = view.getLeft() + (view.getWidth()/2);
float y = view.getTop() + (view.getHeight()/2);
MotionEvent tapDownEvent = MotionEvent.obtain(downTime, downTime + delta, MotionEvent.ACTION_DOWN, x, y, 0);
tapDownEvent.setSource(InputDevice.SOURCE_CLASS_POINTER);
MotionEvent tapUpEvent = MotionEvent.obtain(downTime, downTime + delta + 2, MotionEvent.ACTION_UP, x, y, 0);
tapUpEvent.setSource(InputDevice.SOURCE_CLASS_POINTER);
view.dispatchTouchEvent(tapDownEvent);
view.dispatchTouchEvent(tapUpEvent);
@Override
public void onPause()
myWebView.onPause();
myWebView.pauseTimers();
super.onPause();
@Override
public void onResume()
super.onResume();
myWebView.resumeTimers();
myWebView.onResume();
@Override
protected void onDestroy()
myWebView.destroy();
myWebView = null;
super.onDestroy();
【讨论】：
以上是关于android webview youtube嵌入视频自动播放不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 Android WebView 中自动播放嵌入的 YouTube 视频有啥新技巧吗？
带有嵌入式 youtube 视频的 Android WebView，全屏按钮冻结视频
嵌入在 Android Webview 中的 Youtube 视频不能以 SINGLE_COLUMN 布局播放
在 React Native 的 Webview 中嵌入 youtube 视频