HTML5视频无法在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..

Answer 1

尝试在http://code.google.com/p/html5webview/source/checkout的 svn链接中给出的代码可以正常工作

Answer 2

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?

Answer 3

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>