Alex Rivera | Logout

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

Asked 2012-05-23T17:24:07.623
14

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"
android mobile html5-video
Edit
Report

1 Answer

0

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
}
answered 2012-06-19T13:23:45.913

Your Answer