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.

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