Question

我的代码有问题。我试图从包含mp4视频的Feed中显示大量信息，并使用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);
};

我最后使用setTimeout函数的原因是因为除非您选择了两次视频，否则整个面板都不会出现。

我希望我尽可能清楚地说明这一点，但我可能会犯一些错误。如果有人可以帮助我，我将非常感激。

@@@@@@@

更新：再次感谢您的所有建议。我已经浏览了你推荐的2个网站，虽然引人入胜，但我不确定这是否会对我有所帮助。我正在尝试将play（），false编码实现到程序中，并且我已经取出了类型，给出了类型混淆android的消息。不幸的是，更多的helpfuol建议给予假设我可以修改视频，但由于这是来自json feed，我不能这样做。我正在考虑改变该程序的编解码器，但我的同事编程朋友反对它... 再次感谢。

Answer 1

我不会详细介绍HTML5 <video>的奇怪处理和糟糕的整体支持，我会在此指出：

http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

基本上，归结为：

您需要一个事件监听器来阻止选择视频两次。
您需要消除type和codec属性。

如果你试图在其他地方移植它，请准备好以后遇到更多麻烦 - <video>只是一个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); };

由于我们正在处理webkit，因此最好将重点放在mp4 / m4v / h.264支持上。当您对视频进行编码时， 会使用iPhone设置并选中“网络优化”进行手刹。

请记住，仍然不建议使用HTML5进行部署。您使用它需要您自担风险。 Android确实提供Flash，因此如果遇到某些错误，您可能需要考虑回退闪存。（也许添加一种方法来查找来自video.play()的响应，如果没有收到，则加载Flash视频）

Answer 2

我想指出http://www.diveintohtml5.org/video.html，这解释了陷阱。我可以第二个@stslavik的意见，这是一个PITA！

Answer 3

如果您要将其部署到phonegap，那么最安全的方法是使用一个插件来获取将在本机播放器上播放视频的phonegap。有一个旧版本的phonegap。我刚刚使用它来使用最新版本。如果你有兴趣请给我一个下午。

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

3 个答案: