由于 "Cross origin requests"，Youtube 在 webview 中播放失败

Question

问题

尝试从 webview (android 5.0) 中播放视频会导致许多 "Cross origin requests" 失败并且视频无法播放。但是，在笔记本电脑 Google Chrome 上，下面的 HTML 可以完美播放视频！

HTML

<!DOCTYPE html>
<html>
    <head>
        <style>
            html{width:100%;height:100%;}
            body{margin: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)] "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.youtube.com').", source: (0) 01-15 11:21:42.898 21328-21328/com.my.android.app I/chromium﹕ [INFO:CONSOLE(0)] "XMLHttpRequest cannot load chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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 cannot load chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js. Cross origin requests are only supported for HTTP.", source: 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)] "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.youtube.com').", source: (0) 01-15 11:21:43.305 21328-21328/com.my.android.app I/chromium﹕ [INFO:CONSOLE(0)] "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.youtube.com').", source: (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_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fullscreen_youtube_video"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF000000">

        <ViewSwitcher
            android:id="@+id/contentFlipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <WebView
                android:id="@+id/youtubeWebview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white" />

        </ViewSwitcher>

    </FrameLayout>

</RelativeLayout>

我错过了什么？

进度...

让这个废话在 Android 的 (5.0) webview 上工作的唯一方法是使用以下 HTML...

<html>
<body>
<iframe width="100%" height="100%" src="http://www.youtube.com/embed/CpaOh4poNms?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>

至少这会显示视频播放器。这整个动态 div-to-iframe 废话在 Android 上完全不起作用：https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Answer 1

我发现 onYouTubeIframeAPIReady() 和 onYouTubePlayerAPIReady() 从未在 Android 上拜访过。

我想知道这是否是故意强迫人们切换到 YouTube Library - 如果图书馆不依赖于 YouTube 应用程序，我会这样做。我认为应该有一个 "fat" 和 "thin" 版本的库；瘦版取决于 youtube 应用程序，胖版可选地需要它。

为了让视频自动播放，我使用了以下代码：并从 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" width="100%" height="100%" src="http://www.youtube.com/embed/CpaOh4poNms?rel=0&origin=youtube.com" frameborder="0" allowfullscreen></iframe>
</body>
</html>

由于 "Cross origin requests"，Youtube 在 webview 中播放失败

Youtube playback fails in webview due to "Cross origin requests"

android

webview

youtube