HTML5 video doesnt play with android

Question

I have got the following html code:

<span id="video-teaser">
    <span>Click here for a <strong>FREE</strong> hot video</span>
    <video src="http://example.com/videos/nakednews.mp4" controls="" poster="http://example.com//img/iphone-video-btn.png" id="videoTeaser" height="1"></video>
</span>

I tried to come up with two solutions.. use javascript addlistener..and trigger the video when it is pressed.

     <script type="text/javascript">
            var video = document.getElementById('videoTeaser');
            var elementToTrigger=document.getElementById('video-teaser');
                    elementToTrigger.addEventListener('click',function(){
                    video.play();
                    },false);
      </script>

Both of the solutions dont work.. the video itself works when I click on the video-teaser span, on the pc version of the site..

What could be the solution to this..

put video.load();video.play(); – Padma Kumar Apr 18 '12 at 11:34 — Padma Kumar, Apr 18 '12 at 11:34

score 2 · Answer 1 · answered Apr 18 '12 at 12:47

2

try the code given at svn link at http://code.google.com/p/html5webview/source/checkout it works fine

answered Apr 18 '12 at 12:47

Khan

7,585
3
27
44

score 1 · Answer 2 · edited May 23 '17 at 12:21

This is a known issue for Android < 4.0

This is a workadroud :

In your webview you have to set your own ChromeClient
and override this function :

        _customViewCallback = callback;
        if (view instanceof FrameLayout){  
             FrameLayout frame = (FrameLayout) view;  
             if (frame.getFocusedChild() instanceof VideoView){  
                 final VideoView video = (VideoView) frame.getFocusedChild(); 
                 _customView = video;
                 frame.removeView(video);  
                 Activity a = (Activity)_context;
                 a.setContentView(video);  
                 video.setOnCompletionListener(new OnCompletionListener() {  

                    @Override  
                    public void onCompletion(MediaPlayer mp) { 
                        mp.stop();
                        video.stopPlayback();
                        onHideCustomView();
                    } 
                });  
                 video.setOnErrorListener(new OnErrorListener() {  

                    @Override  
                    public boolean onError(MediaPlayer mp, int what, int extra) {  
                        return false;  
                    }  
                });  
                 if (!video.isPlaying())
                     video.start();  
             }  
         }

And override OnHideCustomView to add your treatment and add(so that your video can open another time) :

_customViewCallback.onCustomViewHidden();

These links might be helpful to you :

WebView and HTML5 <video>

How to play a video in a webview with android?

WebView NOT opening android default video player?

no way... there must be a better fix to this than start programming for the android :(... — Dmitry Makovetskiyd, Apr 18 '12 at 12:04
I had your same problem, I didn't believe it at first too :) check the links they might me more descriptive than my post — Dany Y, Apr 18 '12 at 12:08
The android application is already fullscreen.....it is on webview.. if it works with iphone..it should work with android — Dmitry Makovetskiyd, Apr 18 '12 at 12:14

Maneesh · Answer 3 · 2012-04-18T12:07:25.643

Code inside the script tag will work after loading content of span tag Put the script tag below the span tag as below

<span id="video-teaser">
    <span>Click here for a <strong>FREE</strong> hot video</span>
    <video src="http://example.com/videos/nakednews.mp4" controls="" poster="http://example.com//img/iphone-video-btn.png" id="videoTeaser" height="1"></video>
</span>

 <script type="text/javascript">
            var video = document.getElementById('videoTeaser');
            var elementToTrigger=document.getElementById('video-teaser');
                    elementToTrigger.addEventListener('click',function(){
                    video.play();
                    },false);
      </script>
</body>

code inside the script tag will work after loading of span tag content thats why I said, r u executing this in web view? — Maneesh, Apr 18 '12 at 12:06

HTML5 video doesnt play with android

3 Answers3

Linked