Question

我有以下HTML代码：

<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>

我尝试提出两个解决方案..使用javascript addlistener ..并在按下时触发视频。

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

这两种解决方案都不起作用..当我点击网站的电脑版本上的视频预告片时，视频本身就可以工作..

这可能是什么解决方案..

Answer 1

尝试在http://code.google.com/p/html5webview/source/checkout的svn链接处给出的代码，它可以正常运行

Answer 2

这是针对Android的已知问题＆lt; 4.0

这是一个工作：

在您的网页浏览中，您必须设置自己的ChromeClient
并覆盖此功能：

        _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();  
             }  
         }

并覆盖OnHideCustomView以添加您的处理并添加（以便您的视频可以再打开一次）：

_customViewCallback.onCustomViewHidden();

这些链接可能对您有所帮助：

WebView and HTML5 <video>

How to play a video in a webview with android?

WebView NOT opening android default video player?

Answer 3

加载span标记的内容后，脚本标记内的代码将起作用将脚本标记放在span标记下面，如下所示

<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>

HTML5视频不能与Android一起玩

3 个答案: