首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >安卓上的HTML5 <video> element

安卓上的HTML5 <video> element
EN

Stack Overflow用户
提问于 2009-11-11 04:48:28
回答 12查看 217.6K关注 0票数 90

根据以下内容:

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

Android2.0应该支持HTML5视频元素。我还没能用摩托罗拉的Droid实现这个功能,也没能在任何HTML5视频示例页面上成功观看视频。由于目前还不支持QuickTime或Flash,这是我唯一能想到的在网页中嵌入mp4视频的方法。有没有人在这方面有什么收获?

EN

回答 12

Stack Overflow用户

发布于 2010-05-05 23:05:40

罗曼的回答对我来说很有效--或者至少,它给了我所期望的。在手机的原生应用程序中打开视频与iPhone的操作完全相同。

调整你的视点,期待视频在它自己的应用程序中全屏播放,并为此进行编码,这可能是值得的。令人沮丧的是,点击视频并不足以让它像iPhone一样播放,但考虑到它只需要一个onclick属性来启动它,这并不是世界末日。

我的建议,FWIW,是使用海报图像,并使其显而易见,它将播放视频。我目前正在做的一个项目正是做到了这一点,客户对此很满意-当然,他们还免费获得了安卓版本的网页应用程序,因为合同只针对iPhone网页应用程序。

为了说明起见,下面是一个有效的Android视频标签。很好很简单。

<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
票数 9
EN

Stack Overflow用户

发布于 2012-01-21 17:43:37

我在这里介绍了我的一个朋友如何在Nexus One中解决了在HTML中显示视频的问题:

我从来没能让视频以内联方式播放。实际上,互联网上的许多人明确提到,自从Honeycomb以来,HTML中的内联视频播放就得到了支持,而我们正在与Froyo和姜饼抗争……此外,对于较小的手机,我认为全屏播放是非常自然的-否则看不到太多。因此,我们的目标是让视频全屏打开。然而,这个线程中提出的解决方案对我们来说并不起作用--单击该元素不会触发任何内容。此外,显示了视频控件,但没有显示海报,因此用户体验更加奇怪。所以他做了以下几件事:

将本机代码暴露给HTML,以便可以通过javascript调用:

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事件,使其成为实际的播放。这对他来说几乎是可行的--除了没有展示任何海报。最奇怪的部分来了-每次设置标记的poster属性时,他都会收到ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"。最后,他发现了一个非常奇怪的问题--原来他在video标签中保留了source子标签,但从未使用过它。奇怪的是,这正是导致问题的原因。现在看看他对video部分的定义:

<video width="320" height="240" controls="controls" poster='poster.gif'  onclick="playVideo('file:///sdcard/test.3gp');" >
   Your browser does not support the video tag.
</video>

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

<script>
  function playVideo(video){
    window.JSInterface.startVideo(video);
  }
</script>

我意识到这不是纯粹的HTML解决方案,而是我们为Nexus One类型的手机所能做的最好的事情。这个解决方案的所有荣誉都归功于Dimitar Zlatkov Dimitrov。

票数 8
EN

Stack Overflow用户

发布于 2009-12-16 04:18:46

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

<!DOCTYPE html>
<html>
<head>
  <script>
    function init() {
      enableVideoClicks();
    }

    function enableVideoClicks() {
      var videos = document.getElementsByTagName('video') || [];
      for (var i = 0; i < videos.length; i++) {
        // TODO: use attachEvent in IE
        videos[i].addEventListener('click', function(videoNode) {
          return function() {
            videoNode.play();
          };
        }(videos[i]));
      }
    }
  </script>
</head>
<body onload="init()">

  <video src="sample.mp4" width="400" height="300" controls></video>

  ...

</body>
</html>
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1711078

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档