video not playing on phone [Archive]

vivendi

7 Sep 2011, 12:44 AM

Hi,

i'm trying to play a video on the iphone simulator, but for some reason it isn't playing. All i see is a black square, where the video should normally appear in. But it just stays black...

This is the code that i have:

app.views.main = Ext.extend(Ext.Panel, {
fullscreen: true,
items: [{
xtype: 'video',
url: 'http://www.w3schools.com/html5/movie.mp4',
loop: true,
width: 240,
height: 240,
//posterUrl: '../video/Screenshot.png'
}]

});

The URL to the movie works, there's nothing wrong with that.

Anyone any idea why the movie isn't showing???

BTW, it does play when i open the index.html file with Chrome.

vivendi

7 Sep 2011, 1:24 AM

When i place this in an other html file:

<html>
<head>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html5/movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>

And load it like this in an iframe:

app.views.main = Ext.extend(Ext.Panel, {
fullscreen: true,
html: '<iframe src="video.html" width="200" height="200" scrolling="yes">'+
'<p>Your browser does not support iframes.</p>'+
'</iframe>'
});

Then it all works fine.

But as soon as i bring it back into my Sencha (MVC) app, then it doesn't load the movie....

app.views.main = Ext.extend(Ext.Panel, {
fullscreen: true,
html: '<video width="200" height="200" controls="controls">'+
'<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />'+
'<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />'+
'<source src="http://www.w3schools.com/html5/movie.webm" type="video/webm" />'+
'Your browser does not support the video tag.'+
'</video>'
});

Bug in Sencha maybe??