PDA

View Full Version : Sencha touch - HTML5 video tag is not showing mp4 videos



sjkato
2 Sep 2011, 2:13 AM
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 (){
var cVids = document.getElementById('vDisp'+nums);
Ext.getCmp('vidPanel'+nums).addListener('click',function(){
cVids.play();
},false);
console.log(cVids.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.

I tried adding in the play() code after you click to prevent the panel from opening twice, but i am still not having any results. The poster image is there, but when i click the play, it immidiately goes tothe end without showing the video. I have looked into the links and they are redirection links, so I am not sure how that would affect things. The tabs browser happily uses the links, so I am at a loss as to what to do...