1

Sorry for my english. Here's my problem. I have an html file in which there are some youtube videos. I load this file in a webview. When the activity with the webview starts, I would see the videos thumbnails and I would click on them to watch them in the mediaplayer of the smartphone or in the browser.

Videos are embed in the html file with tag:

  • object => I can see the thumbnail, but if I click on it, it doesn't open the video

  • iframe => I can see the thumbnail, if I click on it, the video starts but: - if I click on pause and then on play, the audio restarts but not the video - I can't watch the video on full screen

  • video => I can see the thumbnail, but if I click on it, It appears a grey square like if a plugin lacks

Could anyone help me? Thanks.

user1979646
  • 41
  • 3

1 Answers1

1

Here is a thread discussing the problem of playing embedded video with default media player in Android and supporting all possible phones. My answer worked for me in all cases.

EDIT Here goes a full example of how I use img tags` to play videos:

<a href="javascript:window.JSInterface.startVideo('video.mp4');"
    class="video-tag" >
    <img class="video-icon" src="video_icon.png">
    <img src="video_poster.jpeg" class = "video-background">
</a>

And here goes the code I use for starting the video:

public void startVideo(String videoAddress) {
    Intent intent = new Intent(activity, VideoPlayerActivity.class);
    Bundle extras = new Bundle();
    extras.putString(VideoPlayerActivity.VIDEO_LOCATION_TAG, videoAddress);
    intent.putExtras(extras);
    activity.startActivity(intent);
}

Here VideoPlayerActivity is also activity I developed - it basically grants temporarily access to the video file, plays it and then revokes the access.

And now the css I use:

.video-icon {
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    padding: 2%;
    width: 11.4%;
    padding: 0;
    width: 100%;
}
.video-tag {
    position: relative;
    display: block;
}

Now choosing the appropriate icon you can make this look very similar to a real video tag and it will work on all platforms.

Community
  • 1
  • 1
Boris Strandjev
  • 46,145
  • 15
  • 108
  • 135
  • "You're simply the best" [cit.] – user1979646 Jan 15 '13 at 12:49
  • @user1979646 The thumbnails... Hmm I do not remember to have tried it. Probably if it is not working for you, consider using an ordinary `img` tag. After all you configure `javascript` function for its handling. No reason to choose exactly video. – Boris Strandjev Jan 15 '13 at 13:21
  • However, your code in the "startVideo" method let me open the mediaplayer, but it returns "Impossible to play video". So I change the code into 'activity.startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(videoAddress)));' and so it let me open the browser or the youtube app and I can watch the video. But I want both to see thumbnails and open the mediaplayer. Could you know how to do? – user1979646 Jan 15 '13 at 13:34
  • @user1979646 have you seen my comment above? – Boris Strandjev Jan 15 '13 at 13:41
  • Can you tell me how set a transparent background to the webview too? I can't understand why on a device it appears transparent and on other device it appears white. – user1979646 Jan 18 '13 at 13:56
  • @user1979646 Added full example – Boris Strandjev Jan 18 '13 at 16:51
  • Thanks for the new answer but now my problem is an other. Why doesn't wbview background appear transparent on all devices? WHy on the S3 (4.1.1) it appears transparent and on a xperia u it appears white? – user1979646 Jan 18 '13 at 21:45
  • @user1979646 First of all my solution will not neccessarily use `WebView`. Actually my thought was to use new activity. If you intend to use alternative approach, please post your current approach, so that I cna try to help. – Boris Strandjev Jan 21 '13 at 16:06