首页 文章

Android上的HTML5 <video>元素

提问于
浏览 次
89

根据：

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

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

android video mobile html5

14 回答

  • 9

    这可能不完全回答您的问题，但我们使用的是3GP或3GP2文件格式 . 甚至更好地使用rtsp协议，但Android浏览器也将识别3GP文件格式 .

    你可以使用类似的东西

    self.location = URL_OF_YOUR_3GP_FILE

    触发视频播放器 . 该文件将被流式传输，播放结束后，处理将返回给浏览器 .

    对我来说，这解决了Android设备上当前视频标签实现的许多问题 .

    回复于
  • 0

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

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

    • 您必须手动调用video.play（）

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

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

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

    这是标记：

    <video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>

    我在JS中有这个：

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

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

    回复于
  • 5

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

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

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

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

    <video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
    回复于
  • 1

    在这里，我包括我的一位朋友如何解决在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 事件，使其完成实际播放 . 这几乎对他有用 - 除了没有显示海报 . 这是最奇怪的部分 - 每次设置标签的 poster 属性时，他都会继续接收 ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" . 最后他找到了这个问题，这非常奇怪 - 事实证明他已经将 source 子标签保留在 video 标签中，但从未使用过它 . 奇怪的是，这导致了这个问题 . 现在看看他对 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所有 .

    回复于
  • 0

    如果你手动调用 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>
    回复于
  • 8

    把我的android 2.2浏览器指向html5test.com，告诉我视频元素是支持的，但没有列出的视频编解码器......看起来有点无意义支持视频元素但没有编解码器???除非该测试页面有问题 .

    但是，我确实找到了与音频元素相同的情况：支持该元素，但没有音频格式 . 看这里：

    http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/

    回复于
  • 0

    在我正确编码视频之前，没有什么对我有用 . 请尝试本指南以获得正确的手刹设置：http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

    回复于
  • -4

    也许你必须专门为设备编码视频，例如：

    <video id="movie" width="320" height="240" autobuffer controls>
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.mp4" type='video/mp4; codecs="some droid video codec, some droid audio codec"'>
</video>

    这里有一些编码配置的例子：

    https://supportforums.motorola.com

    回复于
  • 0

    在mp4容器中尝试h.264 . 我在Droid X上取得了很大的成功 . 我一直在使用zencoder.com进行格式转换 .

    回复于
  • 1

    这对我有用：

    <video id="video-example" width="256" height="177" poster="image.jpg">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.ogg" type="video/ogg"></source>
This browser does not support HTML5
</video>

    只有当.mp4在顶部并且视频文件不大时 .

    回复于
  • 78

    它应该工作，但看分辨率：Android 2.0 and webkit

    Canvas开箱即用，而Geolocation似乎在模拟器中根本不起作用 . 当然，我必须发送模拟位置才能让它工作，所以我不知道在实际手机上会是什么样子 . 我可以用视频标签说同样的话 . 它实际上没有播放视频的问题，但我认为视频的分辨率高于模拟器可以处理的分辨率 . 一旦有人在摩托罗拉Droid或其他下一代Android设备上尝试此操作，我们就会知道更多

    回复于
  • 4

    根据：https://stackoverflow.com/a/24403519/365229

    这应该可以使用普通的Javascript：var myVideo = document.getElementById（'myVideoTag'）;

    myVideo.play（）;
    if（typeof（myVideo.webkitEnterFullscreen）！=“undefined”）{
    //这是针对Android Stock的 .
    myVideo.webkitEnterFullscreen（）;
    } else if（typeof（myVideo.webkitRequestFullscreen）！=“undefined”）{
    //这适用于Chrome .
    myVideo.webkitRequestFullscreen（）;
    } else if（typeof（myVideo.mozRequestFullScreen）！=“undefined”）{
    myVideo.mozRequestFullScreen（）;
    }
    您必须在全屏指令之前触发play（），否则在Android浏览器中它将全屏显示但不会开始播放 . 测试了最新版本的Android浏览器，Chrome，Safari .

    I've tested it on Android 2.3.3 & 4.4 browser.

    回复于
  • 4

    经过多次研究，在许多不同的设备中，到目前为止，我得出的结论是 MP4 比 MOV 格式的支持要少得多 . 所以，我在所有浏览器上都使用 MOV 格式，所有Android和Apple设备都支持这种格式 . 我已经检测到设备是移动设备或桌面浏览器的天气，并相应地设置 SRC ：

    if (IsMobile()) {
    $('#vid').attr('src', '/uploads/' + name + '.mov');
}
else {
    $('#vid').attr('src', '/uploads/' + name + '.webm');        
}

function IsMobile() {
    var isMobile = false; //initiate as false

    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
                || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true;
    return isMobile;
}
    回复于
  • 1

    Google（Android）手机（如Galaxy S和iPhone）均支持HTML5 . 但iPhone并不支持谷歌手机支持的Flash .

    回复于

相关问题