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

Question

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

stslavik · Answer 1 · 2011-09-02T16:19:11.153

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)

Thank you for giving me this information. This problem has been nagging at me for the better part of 2 days, to the extent that i developed a headache from it. I will look into the posts you and others have given me and try to understand everything. Unfortunately, whilst its true that things would be simpler to code in for the video to be played by a different program, i have to have the app appear as I have coded it: video in app with title and description below. Thanks again :) — SKato, Sep 01 '11 at 08:16
The video in the app and title/description placement aren't problems. Yes, HTML5's video support is shoddy at best, but the important part is understanding *where* the problems come from – not from HTML5, but the browser. Determine the browser being used by default (what engine) and focus on building for that. The nuances between browsers are the PITA. — stslavik, Sep 01 '11 at 15:58
Thank you again for the responce. I was messing around with ajax yesteday trying to see if it was because a redirection was occuring that was giving problems, but evidently that isnt the issue. I am not entirely sure what browser is being used by default with the tab I am working on, but will look into it. Since I am working with Sencha, that makes a combination of Html5, Javascript and android which makes it a bit of a muddle for me... — SKato, Sep 02 '11 at 08:22
It appears the Android browser engine is based on webkit, which is full of little screwy things with HTML5 video (Safari doesn't recognize the mp4 video if it's not the first source, Chrome will play webm...). Here's some other answers about properly using ` — stslavik, Sep 02 '11 at 16:11
thank you again for your responce. I actually asked a colleuge about his and he came up with a suggestion using Native android, creating an overlay video which played and allowed for the feed data to be used without modifying it. a headache to program, but it works. — SKato, Sep 05 '11 at 13:45

score 1 · Accepted Answer · answered Aug 31 '11 at 17:02

1

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!

answered Aug 31 '11 at 17:02

Kheldar

5,361
3
34
63

Good link. http://www.diveintohtml5.org/ in general is just a must have for anyone exploring it. Once you get to know that site inside and out, the only other resource worth anything is http://dev.w3.org/html5/spec/Overview.html (Since you already know what browsers are supporting what features). – stslavik Aug 31 '11 at 17:11
Thank you very much to both of you for your helpful advise. I am going through diveintohtml5 at the moment, then will look at stslavik's advice. – SKato Sep 01 '11 at 08:13

score 0 · Answer 3 · answered Sep 01 '11 at 07:06

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.

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

3 Answers3