Question

我正在尝试使用webview和youtube iframe api在Android设备上播放YouTube视频。虽然在4.2设备上测试相同，但它确实在4.2.2 Nexus 4上工作。但是当我在索尼Xpedia L上试用它时，它显示缓冲状态，但视频永远不会被加载（连接了屏幕截图）。有什么可以解决这个问题？有什么建议......？！？！

When Clicking on Play Button

When trying to seek/jump to a point using Javascript

我的代码如下..

JAVA CODE

wvVideo = (WebView)findViewById(R.id.wvVideo);
wvVideo.setWebChromeClient(new WebChromeClient());
WebSettings webSettings = wvVideo.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setMediaPlaybackRequiresUserGesture(false);
wvVideo.addJavascriptInterface(new WebAppInterface(this), "Android");
wvVideo.loadUrl("http://test.com/iframeYouTube.html?videoid="+videoURL); 
wvVideo.loadUrl("javascript:playVideo();");

XML

<WebView
android:id="@+id/wvVideo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#212121"></WebView>

HTML

<!DOCTYPE html>
<html style="height:100%;margin:0;padding:0;width:100%">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body style="background:#212121;height:100%;margin:0;padding:0">

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" style="margin:0;padding:0"></div>

<script>

    var Query = function () {

    var query_string = {};
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");

    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];

    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;

    } else {
      query_string[pair[0]].push(pair[1]);
    }
    } 

    return query_string;
    } ();

    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    height:'100%',width:'100%',

    videoId: Query.videoid,
    playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo':0, 'modestbranding':1},
    events: {

    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange

    }
    });


  }

  function onPlayerReady(event) {
  cueCheck();
  timerFunction();
  videoLength();
  }

  var done = false;

  function onPlayerStateChange(event) {
    Android.playState(event.data+"");

    if (event.data == YT.PlayerState.PLAYING && !done) {
      done = true;
    }
  }

  function cueCheck()
  {
    Android.playState("cued");
  }

  function timerFunction(){
  console.log("function");
  Android.updateTimer(player.getCurrentTime()+"");
  setTimeout(timerFunction, 20);
 }

 function videoLength(){
  Android.getVideoLength(player.getDuration()+"");
 }

  function seekTo(val) {
  player.seekTo(val);
  // player.playVideo();
  }

  function pauseVideo(){
  player.pauseVideo()
  }

  function playVideo(){
  player.playVideo()
  }



    </script>

  </body>
</html>

Answer 1

String html = getHTML(url);
MainActivity.webview.getSettings().setJavaScriptEnabled(true);
MainActivity.webview.getSettings().setPluginState(PluginState.ON);
final String mimeType = "text/html";
final String encoding = "UTF-8";
MainActivity.webview.setWebViewClient(new WebViewClient());
MainActivity.webview.setWebChromeClient(new WebChromeClient());
webview.loadDataWithBaseURL("", html, mimeType,
                encoding, "");

public static String getHTML(String str) {

    String html = "<iframe class=\"youtube-player\" style=\"overflow:hidden; width: 100%; height: 95%; scrolling=\"no\" padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"http://www.youtube.com/embed/"
            + str
            + "?html5=1&autoplay=1 & fs=0\" frameborder=\"0\" >\n"
            + "</iframe>\n ";

    return html;
}

Answer 2

我遇到了同样的问题，我唯一可以说的是错误与Android版本有关。特别是，当我发布here时：

在Android 4版本中，无法自动播放。用户必须按播放按钮进入iframe才能开始播放视频。特别：
- 在Android 4.1中，它会再现音频而不是图像。
- 在Android 4.3中，我测试的设备可以重现音频，但没有视频和设备无法重现任何内容。
- 在Android 4.4中不要重现任何内容
从Android 5和+一切正常。

我花了很多时间尝试这样做我找不到方法:(

Youtube iframe无法在Android中加载

2 个答案: