HTML5 video tag - on sencha touch, android is not showing mp4 videos

I have a problem with my code. I am trying to display a load of information from a feed which contains mp4 videos and have them shown using the html5 video tag. I have attempted to keep the coding simple, but things 开发者_JAVA百科have gotten complicated and I am at a loss as to how to get the videos working.

At the moment, the app displays the video poster image, controls and the underneath video title and description, but when I click on the video, the video controller position bar goes from start to end, displaying no video.

I would appriciate any help from people who are willing to give me a hand.

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

The reason i used a setTimeout function at the end was because the whole panel wouldnt appear unless you selected the video twice.

I hope I made this as clear as possible, but I likely made some errors. if someone could help me with this, I would be very grateful.

@@@@@@@

Update: thank you again for all your kind advise. i have gone through the 2 websites you recommended and though fascinating, I am not sure if that will help me all the way. I am trying to implement the play(), false coding into the program and I have taken out the type, given the news that type confuses android. Unfortunately, the more helpfuol advise give is under the assumption that I can modify the videos, but as this is from a json feed, I cant do so. i was considering looking into changing the codec for the program, but I am advised against it by my fellow programming friends... thanks again though.

I'd like to point you out to http://www.diveintohtml5.org/video.html, which explains the pitfalls of . I can but second @stslavik's opinion, it's a PITA!

Rather than get into the details of the odd handling and poor overall support of HTML5 <video>, I'll point you here:

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

Basically, it boils down to:

• You need an event listener to prevent selecting the video twice.
• You need to eliminate the type and codec attributes.

Be prepared for more trouble later on though if you try to port this elsewhere – <video> is just a PITA tag.

Edit

Just to make sure I'm being clear:

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

Since we're dealing with webkit, it's probably best to focus on mp4/m4v/h.264 support. When you're encoding the video, use handbrake with the iPhone settings and "web optimized" checked.

Remember, HTML5 is still not recommended for deployment. You're using it at your own risk. Android does offer Flash, so you might want to consider a fallback to flash if some error is encountered. (Perhaps add a method to look for some response from video.play() and, if none received, load the flash video)

If you are deploying this to phonegap then the safest way is to use a plugin for phonegap that will play the videos on the native player. There is one around for an older version of phonegap. I just adapted it to work with the latest version. if you are interested send me a pm.