Android上的HTML5 <video>元素

根据:

http://developer.android.com/sdk/android-2.0-highlights.html

Android 2.0应该支持HTML5视频元素.我无法使用摩托罗拉Droid工作,并且无法在任何HTML5视频示例页面上成功查看视频.由于目前不支持QuickTime或Flash,这是我在网页中嵌入mp4视频时唯一能想到的.有人有运气吗？

1> stopsatgreen..：

---

我刚刚做了一些实验,从我可以告诉你需要三件事:

调用视频时,不得使用type属性.

你必须手动调用video.play()

必须将视频编码为一些非常严格的参数; 使用Handbrake上的iPhone设置并选中"Web优化"按钮通常可以解决问题.

看看这个页面上的演示:http://broken-links.com/tests/video/

这适用于AFAIK,适用于所有支持视频的桌面浏览器,iPhone和Android.

这是标记:

我在JS中有这个:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

我在三星Galaxy S上测试了它,它工作正常.

2> Irregular Sh..：

---

罗曼的答案对我来说很好 - 或者至少,它给了我我期待的东西.在手机的本机应用程序中打开视频与iPhone完全相同.

这可能值得调整您的观点,并期望视频在其自己的应用程序中全屏播放,并为此编码.令人沮丧的是,点击视频并不足以让它以与iPhone相同的方式播放,但看到它只需要一个onclick属性来启动它,它就不是世界末日.

我的建议,FWIW,是使用海报图像,并明确表示它将播放视频.我正在开展一个项目,正是这样,客户对此感到满意 - 当然,他们也免费获得了Android版的网络应用程序,因为合同只适用于iPhone网络应用程序.

仅举例来说,下面是一个有效的Android视频标签.很好,很简单.

3> Boris Strand..：

---

在这里,我包括我的一位朋友如何解决在Nexus One中以HTML格式显示视频的问题:

我从来没有能够让视频播放内联.实际上互联网上有很多人明确提到自从Honeycomb以来支持HTML内联视频播放,我们正在与Froyo和Gingerbread作斗争......对于小型手机,我认为全屏播放是非常自然的 - 否则就不那么明显了.因此,目标是让视频全屏显示.但是,此线程中提出的解决方案对我们不起作用 - 单击元素不会触发任何内容.此外,还显示了视频控件,但没有显示任何海报,因此用户体验甚至更奇怪.所以他做的是以下内容:

将本机代码公开给可通过javascript调用的HTML:

JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");

代码本身有一个函数调用本机活动来播放视频:

public class JavaScriptInterface {
    private Activity activity;

    public JavaScriptInterface(Activity activiy) {
        this.activity = activiy;
    }

    public void startVideo(String videoAddress){
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); // The Mime type can actually be determined from the file
        activity.startActivity(intent);
    }
}

然后在HTML本身,他继续使视频标签无法播放视频.因此,最后他决定覆盖onclick视频事件,使其完成实际播放.这几乎对他有用 - 除了没有显示海报.这是最奇怪的部分 - 他ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"每次设置poster标签的属性时都会继续接收.最后,他发现了这个问题,这非常奇怪 - 事实证明他已将source子video标签保留在标签中,但从未使用过.奇怪的是,这导致了这个问题.现在看看他对该video部分的定义:

当然你还需要在页面的头部添加javascript函数的定义:

我意识到这不是纯粹的HTML解决方案,但是我们能够为Nexus One类型的手机做到最好.这个解决方案的所有学分都归Dimitar Zlatkov Dimitrov所有.

4> Roman Nurik..：

---

如果您手动调用video.play()它应该工作:

  



  

  ...

---

这让我看到一个电影图标,我可以点击它来查看视频应用程序中的MP4,但仍然没有给我内联视频.