HTML5视频标签-在sencha touch上，android没有显示mp4视频

我的代码有问题。我试图显示一个包含mp4视频的提要中的大量信息，并使用html5视频标签显示它们。我试图保持编码简单，但事情变得复杂了，我不知道如何让视频工作

目前，该应用程序显示视频海报图像、控件以及下面的视频标题和描述，但当我单击视频时，视频控制器位置栏从头到尾都会显示，不显示任何视频

如果有人愿意帮助我，我将不胜感激

displayVideo = function(nums)
{
var currentVideo = videosstore.getAt(nums).raw.getElementsByTagName('content')[0].getAttribute('url');
var vidType =  videosstore.getAt(nums).raw.getElementsByTagName('content')[0].getAttribute('type');
var currentVidPoster = videosstore.getAt(nums).raw.getElementsByTagName('thumbnail')[0].getAttribute('url');
var vidHtml='';
var vtml = '<video id="vDisp'+nums+'" onClick="this.play();" onended="alert(vMPWidth)" width="' + vMPWidth + '" height="' + vMPHeight + '" controls="controls" preload="metadata" poster="' + currentVidPoster + '"> <source src="' + currentVideo + '" type="' + vidType + '; codecs="avc1.42E01E, mp4a.40.2"" /></video>';
vidHtml = vtml;
videoMainPanel.removeAll();
videoMainPanel.add(
{
 html: vidHtml,
 listeners:
  {
   afterrender: function (){
    console.log(document.getElementById('vDisp'+nums).innerHTML);
   }
  }
 }
);
videoMainPanel.add(
{
 style:
 {
  position: 'absolute',
  top: ''+vMPHeight+'px',
 },
 padding: '20px',
 html: '<div style="color:white"><div>' + videosstore.getAt(nums).get('title') + '<br /><br /></div><div>' + videosstore.getAt(nums).get('description') + '</div></div>',
}
);
setTimeout("videoMainPanel.doLayout()", 1);
};

displayVideo=功能（nums）
{
var currentVideo=videosstore.getAt（nums）.raw.getElementsByTagName（'content'）[0].getAttribute（'url'）；
var vidType=videosstore.getAt（nums）.raw.getElementsByTagName（'content'）[0].getAttribute（'type'）；
var currentVidPoster=videosstore.getAt（nums）.raw.getElementsByTagName（'thumbnail'）[0].getAttribute（'url'）；
var vidHtml=''；
var-vtml=''；
vidHtml=vtml；
videoMainPanel.removeAll（）；
videoMainPanel.add(
{
html:vidHtml，
听众：
{
afterrender:函数（）{
log（document.getElementById（'vDisp'+nums）.innerHTML）；
}
}
}
);
videoMainPanel.add(
{
风格：
{
位置：'绝对'，
顶部：'+vMPHeight+'px'，
},
填充：“20px”，
html:“+videosstore.getAt（nums）.get（'title'）+”

'+videosstore.getAt（nums）.get（'description'）+”，
}
);
设置超时（“videoMainPanel.doLayout（）”，1）；
};

我在结尾使用setTimeout函数的原因是，除非您两次选择视频，否则整个面板将不会显示

我希望我尽可能清楚地表达了这一点，但我可能犯了一些错误。如果有人能帮我，我将非常感激

@@@@@@@

更新：再次感谢您的建议。我已经浏览了你推荐的两个网站，虽然很吸引人，但我不确定这是否会一直帮助我。我正试图在程序中实现play（），错误编码，我已经去掉了类型，因为有消息说类型会混淆android。不幸的是，更多的helpfuol建议是基于我可以修改视频的假设，但由于这是一个json提要，我不能这样做。我正在考虑改变程序的编解码器，但是我的编程朋友建议我不要这样做。。。

---

再次感谢。

与其深入了解HTML5的奇怪处理和糟糕的总体支持的细节，不如在这里向您指出：

基本上可以归结为：

• 您需要一个事件侦听器来防止选择两次视频
• 您需要消除

  类型

  和

  编解码器

  属性

不过，如果您尝试将其移植到其他地方，请为以后的更多麻烦做好准备—

只是一个PITA标记

编辑

为了确保我说的清楚：

displayVideo = function(nums) {
  var currentVideo = videosstore.getAt(nums).raw.getElementsByTagName('content')[0].getAttribute('url');
  var vidType =  videosstore.getAt(nums).raw.getElementsByTagName('content')[0].getAttribute('type');
  var currentVidPoster = videosstore.getAt(nums).raw.getElementsByTagName('thumbnail')[0].getAttribute('url');
  var vidHtml='';
  var vtml = '<video id="vDisp'+nums+'" onClick="this.play();" onended="alert(vMPWidth)" width="' + vMPWidth + '" height="' + vMPHeight + '" controls="controls" preload="metadata" poster="' + currentVidPoster + '"> <source src="' + currentVideo + '"  /></video>';
  vidHtml = vtml;
  videoMainPanel.removeAll();
  videoMainPanel.add({
   html: vidHtml,
   listeners: {
     afterrender: function (){
       console.log(document.getElementById('vDisp'+nums).innerHTML);
     }
   }
  });
  videoMainPanel.add({
   style: {
    position: 'absolute',
    top: ''+vMPHeight+'px',
   },
   padding: '20px',
   html: '<div style="color:white"><div>' + videosstore.getAt(nums).get('title') + '<br /><br /></div><div>' + videosstore.getAt(nums).get('description') + '</div></div>',
  }
  );
  setTimeout("videoMainPanel.doLayout()", 1);
};

displayVideo=功能（nums）{
var currentVideo=videosstore.getAt（nums）.raw.getElementsByTagName（'content'）[0].getAttribute（'url'）；
var vidType=videosstore.getAt（nums）.raw.getElementsByTagName（'content'）[0].getAttribute（'type'）；
var currentVidPoster=videosstore.getAt（nums）.raw.getElementsByTagName（'thumbnail'）[0].getAttribute（'url'）；
var vidHtml=''；
var-vtml=''；
vidHtml=vtml；
videoMainPanel.removeAll（）；
videoMainPanel.add({
html:vidHtml，
听众：{
afterrender:函数（）{
log（document.getElementById（'vDisp'+nums）.innerHTML）；
}
}
});
videoMainPanel.add({
风格：{
位置：'绝对'，
顶部：'+vMPHeight+'px'，
},
填充：“20px”，
html:“+videosstore.getAt（nums）.get（'title'）+”

'+videosstore.getAt（nums）.get（'description'）+”，
}
);
设置超时（“videoMainPanel.doLayout（）”，1）；
};

因为我们正在处理webkit，所以最好关注mp4/m4v/h.264支持。编码视频时，在iPhone设置中使用手刹，并选中“网络优化”。

---

记住，HTML5仍然不建议部署。使用它的风险由你自己承担。Android确实提供了Flash，所以如果遇到一些错误，你可能想考虑到Flash的后退。（也许可以添加一个方法来查找来自

video.play（）

的一些响应，如果没有收到响应，则加载flash视频）

我想向您指出，这解释了。我只能附和@stslavik的意见，这是一个PITA

如果您要将其部署到phonegap，那么最安全的方法是使用phonegap插件，该插件将在本机播放器上播放视频。phonegap的旧版本还有一个。我只是把它改编成最新版本。如果您感兴趣，请给我发一个pm。

好链接。一般来说，这只是任何探索它的人的必备品。一旦你全面了解了这个网站，唯一有价值的资源就是（因为你已经知道哪些浏览器支持哪些功能了）。非常感谢你们两位提供的有用建议。我现在正在浏览HTML5，然后看看stslavik的建议。谢谢你给我这个信息。这个问题已经困扰了我两天了，以至于我头痛。我会调查一下你和其他人给我的帖子，试着理解一切。不幸的是，虽然对于由不同程序播放的视频来说，编码会更简单，但我必须让应用程序按我编码的方式显示：应用程序中的视频，标题和描述如下。再次感谢：）应用程序中的视频和标题/描述位置没有问题。是的，HTML5的视频支持充其量是劣质的，但重要的是理解问题的根源——不是HTML5，而是浏览器。确定defau正在使用的浏览器