Il player iframe di Youtube non mostrerà video in Android 4.x WebView

Question

Sto provando a utilizzare il player iframe di youtube all'interno di una WebView di Android ma non funziona su Android 4.x mentre su 5.x tutto funziona alla grande.
Quando lo provo in 4.x il player carica il video, quando lo avvio non vedo nulla ma ascolto il suono del video. Il logcat si riempie di messaggi di errore di cromo più e più volte:

E/chromium(20362): [ERROR:gles2_cmd_decoder.cc(5942)] [.Compositor-Onscreen-0x5db83bb8]GL ERROR :GL_INVALID_OPERATION : glUseProgram: program not linked 
E/chromium(20362): [ERROR:gles2_cmd_decoder.cc(5718)] [.Compositor-Onscreen-0x5db83bb8]GL ERROR :GL_INVALID_OPERATION : glUniformMatrix4fv: wrong uniform function for type 
E/chromium(20362): [ERROR:gles2_cmd_decoder.cc(5718)] [.Compositor-Onscreen-0x5db83bb8]GL ERROR :GL_INVALID_OPERATION : glUniform1iv: wrong uniform function for type 

Ecco come ho impostato il WebView:

this.webview = (WebView) this.findViewById(R.id.webview); 

WebSettings settings = this.webview.getSettings(); 
settings.setJavaScriptEnabled(true); 
settings.setAppCacheEnabled(false); 

this.webview.setWebChromeClient(new WebChromeClient()); 
... 
this.webview.loadUrl(ADDRESS_OF_PAGE); 

Inoltre, è possibile abilitare l'accelerazione hardware nel manifesto:

<application 
    ... 
    android:hardwareAccelerated="true"> 

Ecco la parte js:

var player; 
var VIDEO_ID = "EIsauUFIguE"; 

window.onYouTubeIframeAPIReady = function() { 
    console.log("youtube api ready, loading player"); 

    player = new YT.Player("playerIframe", { 
     width: "100%", 
     height: "100%", 
     videoId: null, 
     events: { 
      onReady: onPlayerReady, 
      onStateChange: onPlayerStateChange, 
      onPlaybackQualityChange: onPlayerPlaybackQualityChange, 
      onError: onPlayerError 
     }, 
     playerVars: { 
      modestbranding: 1, 
      playsinline: 1, 
      fs: 0, 
      showinfo: 0 
     } 
    }); 
} 

function onPlayerReady(event) { 
    console.log("player is ready: ", event); 
    playVideo(); 
} 

function onPlayerStateChange(event) { 
    console.log("player state change: ", event); 
} 

function onPlayerPlaybackQualityChange(event) { 
    console.log("player playback quality change: ", event); 
} 

function onPlayerError(event) { 
    console.log("player error: ", event); 
} 

function playVideo() { 
    console.log("playing video: " + VIDEO_ID); 
    player.loadVideoById(VIDEO_ID); 
    player.setPlaybackQuality("medium"); 
} 

function loadPlayer() { 
    console.log("loading youtube api"); 

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

loadPlayer(); 

Qualche idea del perché si comporta in questo modo e solo in Android 4.x? Grazie.

Answer 1

Ho avuto lo stesso problema, ma dopo aver combattuto con così tanto tempo, non ho trovato una soluzione. Ho testato tutte le configurazioni con webview e ho fatto molte modifiche html per mettere l'iframe.

Dopo il mio ricercando posso solo aggiungere:

• in Android 4 versioni, non si può riprodurre automaticamente. L'utente deve premere il pulsante di riproduzione nell'iframe per avviare la riproduzione del video. In particolare:

  • In Android 4.1 riproduce l'audio ma non l'immagine.
  • In Android 4.3 ho testato dispositivi che possono riprodurre audio ma nessun video e dispositivi che non possono riprodurre nulla.
  • In Android 4.4 non si riproducono nulla

• da Android 5 e + tutto funziona bene.

Buona fortuna e più votare questa domanda a sapere se qualcuno può mettere luce in questa domanda :)