HTML5<；视频>；Android上的元素_Android_Video_Mobile_Html

HTML5<；视频>；Android上的元素

android video mobile html

HTML5<；视频>；Android上的元素,android,video,mobile,html,Android,Video,Mobile,Html,根据： Android 2.0应该支持HTML5视频元素。我还没有能够使用摩托罗拉Droid实现这一点，也没有能够在任何HTML5视频示例页面上成功地观看视频。因为目前还不支持QuickTime或Flash，所以这是我唯一能想到的将mp4视频嵌入网页的方法。有人在这方面有什么好运气吗？这应该是可行的，但请注意解决方案： Canvas是开箱即用的，而地理定位似乎并不奏效所有这些都在模拟器中。当然有将其发送到模拟位置并将其发送到工作，所以我不知道这是什么就像在一部真正的电话上。我你可

根据：

Android 2.0应该支持HTML5视频元素。我还没有能够使用摩托罗拉Droid实现这一点，也没有能够在任何HTML5视频示例页面上成功地观看视频。因为目前还不支持QuickTime或Flash，所以这是我唯一能想到的将mp4视频嵌入网页的方法。有人在这方面有什么好运气吗？

这应该是可行的，但请注意解决方案：

Canvas是开箱即用的，而地理定位似乎并不奏效所有这些都在模拟器中。当然有将其发送到模拟位置并将其发送到工作，所以我不知道这是什么就像在一部真正的电话上。我你可以对视频说同样的话标签。这是有问题的，不是吗实际上是在播放视频，但我我想这是因为这段视频分辨率比仿真器可以处理。我们会知道更多的一旦有人在摩托罗拉手机上试过这个 Droid或其他下一代Android设备

可能您必须为设备专门编码视频，例如：

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

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

如果手动调用

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>


函数init（）{
启用视频点击（）；
}
功能启用视频单击（）{
var videos=document.getElementsByTagName（'video'）||[]；
对于（var i=0；i

罗曼的回答对我来说很好——或者至少，它给了我我所期待的。在手机的本机应用程序中打开视频与iPhone的操作完全相同

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

我的建议，FWIW，是使用海报图像，并使其明显，它将播放视频。我现在正在做一个项目，这个项目正是这样做的，客户对此很满意——当然，他们也免费获得了Android版本的web应用程序，因为合同只针对iPhone web应用程序

下面是一个正常工作的Android视频标签，仅供说明。又好又简单

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

我刚刚做了一些实验，从中可以看出，您需要三件事：

调用视频时不能使用type属性

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

视频必须编码到一些非常严格的参数；在手刹上使用iPhone设置并选中“Web优化”按钮通常可以实现这一目的

请查看本页上的演示：

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>

我在三星Galaxy S上对此进行了测试，效果良好。

这可能无法准确回答您的问题，但我们使用的是3GP或3GP2文件格式。使用rtsp协议更好，但Android浏览器也会识别3GP文件格式

你可以用像

self.location = URL_OF_YOUR_3GP_FILE

触发视频播放器。文件将以流式传输，播放结束后，处理将返回到浏览器

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

将我的android 2.2浏览器指向，告诉我视频元素是受支持的，但没有列出任何视频编解码器。。。支持视频元素但不支持编解码器似乎有点毫无意义？？？除非测试页面有问题

但是，我确实发现音频元素也存在同样的情况：该元素受支持，但没有音频格式。请看这里：

在我对视频进行正确编码之前，任何东西都不适合我。请尝试本指南以了解正确的手制动器设置：

谷歌（android）手机（如Galaxy S）和iPhone都支持HTML5。不过iPhone不支持Flash，谷歌手机也支持Flash。

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

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

我从来没能让视频在线播放。事实上，许多人在互联网上明确提到，自蜂巢以来，HTML的内联视频播放就得到了支持，我们一直在与Froyo和Gingerbread进行斗争。。。同样对于较小的手机，我认为全屏播放是很自然的，否则就看不到太多了。因此，我们的目标是使视频全屏打开。然而，在这个线程中提出的解决方案对我们来说不起作用-点击元素不会触发任何东西。此外，还显示了视频控件，但没有显示海报，因此用户体验更为怪异。因此，他所做的是：

向HTML公开本机代码，以便通过javascript调用：

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

var myVideo = document.getElementById('myVideoTag');

myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
    // This is for Android Stock.
    myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen)  != "undefined") {
    // This is for Chrome.
    myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen)  != "undefined") {
    myVideo.mozRequestFullScreen();
}

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

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

事件，让它进行实际播放。这几乎对他起了作用——除了没有张贴海报。最奇怪的是，每次他设置

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

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

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

var myVideo = document.getElementById('myVideoTag');

myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
    // This is for Android Stock.
    myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen)  != "undefined") {
    // This is for Chrome.
    myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen)  != "undefined") {
    myVideo.mozRequestFullScreen();
}

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

<video id="video" class="video" muted loop autoplay>
    <source src="../media/some_video.webm" type="video/webm">
    Sorry, your browser doesn't support embedded videos.
</video>