html5 video on Android 4: play fullscreen then redirect to another webpage - not working

15
votes

I'm designing an html5 page for Android 4 smartphones with a single 3gpp (or mp4) video that has to autoplay fullscreen when opened; when video ends should redirect to another url .

Some googling told me that autoplay is no more allowed on Android 4, so I chose to display a poster image the user has to click to start the video. Then:

  1. fullscreen mode is invoked
  2. video should automatically start (was indeed started by user clicking on poster image)
  3. when video finish to play Android should exit fullscreen
  4. and finally redirect user to anothe page.

2 and 3 are not working: after invoking fullscreen the user have do another "click" to start video and when video ends exitfullscreen does not work (screen is black and user have to press "back" key on the phone to exit from the phone's video player).

Looks like video.webkitExitFullScreen() and video.play() are ignored on Android 4.

This is the html5 markup and javascript code I'm using, could you please help pointing me to a solution?

Thanks!

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <meta name="description" content="" />
    <title>test</title>

    <script type="text/javascript">

        function videoEnd() {
            var video = document.getElementById("video");
            video.webkitExitFullScreen();
            document.location = "http://www.google.com";
        }

        function playVideo() {
            var video = document.getElementById("video");
            video.addEventListener('ended', videoEnd, false);
            video.webkitEnterFullScreen();
            video.play();
        }

    </script>
</head>
<body>
    <video id="video" poster="../img/image.jpg" onclick="playVideo();">
        <source src="../video/videoname.3gp" type="video/3gpp" />
    </video>
</body>
4
androidmobilehtml5-video
video.webkitEnterFullScreen(); did this work for you on Android 4.1? I doubt it. – Code_Yoga

4 Answers

1
votes

I have some suggestion which might help you,

This will be applicable for the Android web view Application not android web application.

You can either create the android hook up or the android web view client, the pass the values as the variable (Query String) and play the video from the Android native, where you have all the control.

Please find the code for the playing the video.

enter code here

public void videoPlayer(String path, String fileName, boolean autoplay){
getWindow().setFormat(PixelFormat.TRANSLUCENT);
//the VideoView will hold the video
VideoView videoHolder = new VideoView(this);
//MediaController is the ui control howering above the video (just like in the default youtube player).
videoHolder.setMediaController(new MediaController(this));
//assing a video file to the video holder
videoHolder.setVideoURI(Uri.parse(path+"/"+fileName));
//get focus, before playing the video.
videoHolder.requestFocus();
if(autoplay){
    videoHolder.start();
}

}

If you want to implement kind of bright cove then contact me i will help for the HTML 5

Cheers

1
votes

I know this is an old post, but someone may be looking for this. Personally I just hide the video-element (with a simple jquery $videoElement.hide()) after the video finished, which brings me back to the browser automatically.

We have tested this on several mobile devices (iOS and Android).

I still have another problem though, which is that now my browser seems to be fullscreen (which causes other problems in my case).

0
votes

I've recently had a similar problem. After hours of searching the web, here's how i made it work:

Before invoking the "play()" method, use the "load()" method. So in your code:

    function playVideo() {
        var video = document.getElementById("video");
        video.addEventListener('ended', videoEnd, false);
        video.webkitEnterFullScreen();
        video.load();
        video.play();
    }

I;ve teste on android 2.2, 2.3 and IPhone 3 and it works. However it doesn't seem to play on android 4.0.

P.S.

If you want to redirect when the video finishes playing use this event:

var video = document.getElementById("video");
video.addEventListener("ended",doSomething,true);

function doSomething() {
     //your redirect code here
}
0
votes

It seems in later versions of android, programmatic video.play() requires explicit authorization from the WebView. eg

settings.setMediaPlaybackRequiresUserGesture(false);