I am trying to play YouTube Videos on android devices using webview and youtube iframe api. While testing the same on 4.2 devices, it did work on 4.2.2 Nexus 4. But when I tried it on Sony Xpedia L, its showing the buffering status, but the video never gets loaded (Screen Shots attached). What could be a fix for this? Any suggestions...?!?!
My code is as follows..
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>
