Today i met with one problem. Actually i am getting the html data from the server. I am showing that using an webview. The problem is html data contain iframe tags. What it mean you tube videos. But at that position i am getting a black screen with you tube logo at bottom. But for iphone and Black berry directly loading preview.
So that i tried to find the reason. I read no of forms. But there is no solution. On searching i found on e app with you tube videos. So Problem solved. They are taking the 1st frame of the you tube video and embed that using img tag and if we click on that image then redirect to the player.
So i also search for getting 1st frame of an webview. The way is like this
http://img.youtube.com/vi/VIDEO_ID/#.jpg
Here VIDEO_ID : means every youtube vedio has one id.
# : 0 - default size, 1- fisrst frame thumbnail , 2- second frame thumbnail, 3.....
So what you have to do is in the place of iframe tag did this type modification. Then problem will solved.
For More Details : http://www.reelseo.com/youtube-thumbnail-image/
So that i tried to find the reason. I read no of forms. But there is no solution. On searching i found on e app with you tube videos. So Problem solved. They are taking the 1st frame of the you tube video and embed that using img tag and if we click on that image then redirect to the player.
So i also search for getting 1st frame of an webview. The way is like this
http://img.youtube.com/vi/VIDEO_ID/#.jpg
Here VIDEO_ID : means every youtube vedio has one id.
# : 0 - default size, 1- fisrst frame thumbnail , 2- second frame thumbnail, 3.....
So what you have to do is in the place of iframe tag did this type modification. Then problem will solved.
For More Details : http://www.reelseo.com/youtube-thumbnail-image/
Wow! This was really helpful for me...
ReplyDeleteI couldn't get these iframes to work inline in webview.
Now I am replacing all youtube iframes links with img tags pointing to the thumbnail images and refering to the original video url.
Btw, is there any way to overlay "Play" icon on this thumbnail?
Thanks Again.
-Yogesh
By using div tag and center tag this can possible to overlay play button on image.
Deletebut how to use this ? i am getting black screen after press the play button, what should i do with my code ?
Deletefor every video there is an id present. So kept the img tag in the anchor tag <a> with href to that video link like:
Deletea href=\"http://www.youtube.com/watch?v="+youTubeVideoId
So if the user click on that image then it will navigates to the default player. Because we are placing the content in the webview.