Question

问题

尝试从webview（android 5.0）中播放视频会导致许多＆＃34; Cross origin请求＆＃34;失败和视频不播放。但是，在谷歌浏览器上，在笔记本电脑上，下面的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）]＆＃34;无法执行＆＃39; postMessage＆＃39;关于DOMWindow＆＃39;：The 提供的目标来源（＆＃39; https://www.youtube.com＆＃39;）与收件人窗口的来源（＆＃39; http://www.youtube.com＆＃39;）。＆＃34;，来源：（0） 01-15 11：21：42.898 21328-21328 / com.my.android.app I / chromium： [INFO：CONSOLE（0）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34; XMLHttpRequest无法加载镀铬的扩展：//enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js。只有HTTP支持交叉原始请求。＆＃34;，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）]＆＃34;无法执行＆＃39; postMessage＆＃39;关于DOMWindow＆＃39;：The 提供的目标来源（＆＃39; https://www.youtube.com＆＃39;）与收件人窗口的来源（＆＃39; http://www.youtube.com＆＃39;）。＆＃34;，来源：（0） 01-15 11：21：43.305 21328-21328 / com.my.android.app I / chromium： [INFO：CONSOLE（0）]＆＃34;无法执行＆＃39; postMessage＆＃39;关于DOMWindow＆＃39;：The 提供的目标来源（＆＃39; https://www.youtube.com＆＃39;）与收件人窗口的来源（＆＃39; http://www.youtube.com＆＃39;）。＆＃34;，来源：（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加载到网页视图中

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>

我错过了什么？

PROGRESS ...

我可以在Android＆＃39;（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

我已经知道在Android上调用了onYouTubeIframeAPIReady()和onYouTubePlayerAPIReady() 从不。

我想知道这是否有意迫使人们切换到YouTube Library - 如果图书馆不依赖于YouTube应用，我会这样做。我认为应该有一个＆＃34;脂肪＆＃34;和＆＃34;瘦＆＃34;图书馆的版本;瘦版本取决于youtube应用程序，胖版本可选择它。

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

由于“跨源请求”，Youtube播放在webview中失败

1 个答案: