由于“跨源请求”，YouTube 在 web 视图中播放失败
Posted
技术标签:
【中文标题】由于“跨源请求”，YouTube 在 web 视图中播放失败【英文标题】：Youtube playback fails in webview due to "Cross origin requests" 【发布时间】：2015-03-14 07:48:33 【问题描述】：问题
尝试从 webview (android 5.0) 中播放视频会导致许多“跨源请求”失败并且视频无法播放。 然而，在谷歌浏览器上，在笔记本电脑上，下面的 html 使视频播放得非常好！
HTML
<!DOCTYPE html>
<html>
<head>
<style>
htmlwidth:100%;height:100%;
bodymargin:0;width:100%;height:100%;background-color:black;
</style>
</head>
<body>
<div id='player'></div>
<script>
var playerLoaded = false;
var percentReported = 0;
var percentCurrent = 0;
var tag = document.createElement('script');
tag.src = 'http://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady()
playerLoaded = true;
player = new YT.Player('player',
width:'100%',
height:'100%',
videoId:'CpaOh4poNms',
playerVars: playsinline: 1 ,
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
);
function onPlayerReady(event)
event.target.playVideo();
setInterval(onPlayerTimeUpdate, 1000);
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.ENDED)
function onPlayerError(event)
function onPlayerTimeUpdate()
percentCurrent = Math.round(player.getCurrentTime() / player.getDuration() * 100);
if (percentCurrent > percentReported)
percentReported = percentCurrent;
setTimeout(function()
if (!playerLoaded)
, 10000);
</script>
</body>
</html>
错误
01-15 11:21:42.410 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "在 'DOMWindow' 上执行 'postMessage' 失败： 提供的目标原点 ('https://www.youtube.com') 与 收件人窗口的来源（'http://www.youtube.com'）。”，来源：（0） 01-15 11:21:42.898 21328-21328/com.my.android.app I/chromium﹕ [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://boadgeojelhgndaghljhdcfkmllpafd/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.899 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.899 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.901 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.901 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.911 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.914 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.914 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.917 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.921 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.922 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.923 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.926 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.928 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.928 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.929 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.930 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.931 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.931 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.931 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.935 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.939 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.940 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.943 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.946 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.947 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.948 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.958 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.961 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 铬扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.962 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:42.964 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "XMLHttpRequest 无法加载 chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。 仅 HTTP 支持跨源请求。”，来源： http://www.youtube.com/embed/CpaOh4poNms?playsinline=1&enablejsapi=1&origin=http%3A%2F%2Fwww.youtube.com (0) 01-15 11:21:43.246 21328-21328/com.my.android.app I/chromium： [INFO:CONSOLE(0)] "在 'DOMWindow' 上执行 'postMessage' 失败： 提供的目标原点 ('https://www.youtube.com') 与 收件人窗口的来源（'http://www.youtube.com'）。”，来源：（0） 01-15 11:21:43.305 21328-21328/com.my.android.app I/chromium﹕ [INFO:CONSOLE(0)] "在 'DOMWindow' 上执行 'postMessage' 失败： 提供的目标原点 ('https://www.youtube.com') 与 收件人窗口的来源（'http://www.youtube.com'）。”，来源：（0）
Webview 是如何初始化的
@SuppressLint("SetjavascriptEnabled")
public void setupWebView(WebView webView)
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(false);
webSettings.setLoadWithOverviewMode(false);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webSettings.setSaveFormData(false);
webSettings.setSupportZoom(false);
webSettings.setBuiltInZoomControls(false);
webSettings.setSupportMultipleWindows(false);
webSettings.setAppCacheEnabled(true);
webSettings.setAppCachePath("");
webSettings.setDefaultTextEncodingName("UTF-8");
webSettings.setDomStorageEnabled(true);
webSettings.setAllowFileAccess(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webView.setBackgroundColor(Color.TRANSPARENT);
webView.setVerticalScrollBarEnabled(false);
webView.setHorizontalScrollBarEnabled(false);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
private FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER);
// this will allow the webview to play embedded video and full screen video
mYoutubeVideoViewContainer = (FrameLayout) findViewById(R.id.fullscreen_youtube_video);
mWebChromeClient = new WebChromeClient()
@Override
public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
// if a view already exists then immediately terminate the new one
if (mCustomView != null)
callback.onCustomViewHidden();
return;
// Add the custom view to its container.
mYoutubeVideoViewContainer.addView(view, COVER_SCREEN_GRAVITY_CENTER);
mCustomView = view;
mCustomViewCallback = callback;
// hide main browser view
mContentFlipper.setVisibility(View.GONE);
// Finally show the custom view container.
mYoutubeVideoViewContainer.setVisibility(View.VISIBLE);
mYoutubeVideoViewContainer.bringToFront();
@Override
public void onHideCustomView()
if (mCustomView == null)
return;
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
// Hide the custom view.
mCustomView.setVisibility(View.GONE);
// Remove the custom view from its container.
mYoutubeVideoViewContainer.removeView(mCustomView);
mCustomView = null;
mYoutubeVideoViewContainer.setVisibility(View.GONE);
mCustomViewCallback.onCustomViewHidden();
// Show the content view.
mContentFlipper.setVisibility(View.VISIBLE);
;
mTargetWebView.setWebChromeClient(mWebChromeClient);
mTargetWebView.setWebViewClient(new WebViewClient());
如何将 HTML 加载到 webview 中
mTargetWebView.loadDataWithBaseURL("http://www.youtube.com", youtubeHTML, "text/html", "utf-8", null);
布局 XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_>
<FrameLayout
android:id="@+id/fullscreen_youtube_video"
android:layout_
android:layout_
android:background="#FF000000">
<ViewSwitcher
android:id="@+id/contentFlipper"
android:layout_
android:layout_ >
<WebView
android:id="@+id/youtubeWebview"
android:layout_
android:layout_
android:background="@android:color/white" />
</ViewSwitcher>
</FrameLayout>
</RelativeLayout>
我错过了什么？
进展...
我能让这个废话在 Android (5.0) webview 上工作的唯一方法是使用以下 HTML...
<html>
<body>
<iframe src="http://www.youtube.com/embed/CpaOh4poNms?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>
至少这会显示视频播放器。这整个动态 div 到 iframe 的废话在 Android 上完全不起作用：https://developers.google.com/youtube/iframe_api_reference#Getting_Started
【问题讨论】：
Getting Started HTML 以同样的方式失败 developers.google.com/youtube/iframe_api_reference /facepalm
【参考方案1】：
我发现 onYouTubeIframeAPIReady() 和 onYouTubePlayerAPIReady() 在 Android 上从不调用。
我想知道这是否是故意迫使人们切换到 YouTube Library - 如果图书馆不依赖于 YouTube 应用程序，我会这样做。 我认为应该有一个“胖”和“瘦”版本的库；瘦版取决于 youtube 应用，胖版可选地需要它。
为了让视频自动播放，我使用了以下代码：
https://***.com/a/27722504/550471
并从onPageFinished()触发它
要将 HTML 加载到 WebView 中，我正在使用：
webView.loadDataWithBaseURL("http://www.youtube.com", youtubeHTML, "text/html; charset=utf-8", "UTF-8", null);
HTML 包括：
<html>
<head></head>
<body>
<iframe id="player" src="http://www.youtube.com/embed/CpaOh4poNms?rel=0&origin=youtube.com" frameborder="0" allowfullscreen></iframe>
</body>
</html>
【讨论】：
注意...跨源请求仍然显示在 logcat 中，但至少可以播放视频。 我今天遇到了同样的问题...但我也注意到您的解决方案仅适用于某些 youtube 视频。通过这个源链接，我得到一个黑屏youtube.com/embed/kPAgSisjpok?rel=0&autoplay=1 ...有什么想法吗？以上是关于由于“跨源请求”，YouTube 在 web 视图中播放失败的主要内容，如果未能解决你的问题，请参考以下文章
跨源请求在 tomcat 8 中被阻止，HTTP 状态代码为 403