PDA

View Full Version : move from image to video



zubair610
4 Jan 2011, 3:31 AM
how to move from image to video
when i click on the image corresponding video play
plz help me

justinavery
4 Jan 2011, 7:06 AM
Are you able to rely on features within HTML5 to do this?



<video src=myvide.mp4 width=320 height=240 controls poster=myvideoimage.jpg>
Your browser does not support the HTML5 "video" element
</video>

zubair610
4 Jan 2011, 7:11 AM
i use this already and its working but problem is that i have play video by click on image but image is used as thumbnail
as you can say there are more then images on a page to which image i click relevant video plays in video panel

zubair610
4 Jan 2011, 7:13 AM
this is the code i m doing


Ext.setup({
onReady : function(){
var content,videoInfo;

videoInfo=new Ext.XTemplate(
'<tpl for=".">',
// '<img height="100" src="{image_url}" />',
'<h2 style="text-align:left;" >{name}</h2>',
'<div class="video">',
'<video preload="auto" controls="controls" x="200", y="200", width="480", height="360", poster="{image_url}" loop="loop" src="{video_src}" />',
'</div>',
'</tpl>'

);
content=new Ext.Panel({
fullscreen:true,
scroll:'vertical',
tpl:videoInfo

});


var imagesComplete=[
{name:"Picture 1", image_url:'image.jpg', video_src:'abc.mp4'},
{name:"Picture 2", image_url:'image.jpg', video_src:'abc.mp4'},
{name:"Picture 2", image_url:'image.jpg', video_src:'abc.mp4'}
];

content.update(imagesComplete);
}

});

justinavery
4 Jan 2011, 7:23 AM
I'm new to sencha so I'm going to have to bail on this question, you seem to be a lot more advanced than me :)

Can anyone else help?

Good luck.

zubair610
5 Jan 2011, 5:16 AM
will any one plz help me

gkatz
5 Jan 2011, 5:25 AM
I am not sure I understood you but you can have a master-detail view for videos as follows:
1. root panel with card layout for master-detail with following card items:
a) card 1 for a list of videos (list items ater simple divs with img tags - no sencha video component)
b) card 2 with a sencha video component
item clicks on card a move to card b and adds a new sencha video component (with a video URL retrieved from the clicked item)
going back to list destroys the video component and so on and so forth.
the implementation is pretty straight forward.

zubair610
5 Jan 2011, 9:27 AM
i am new to sencha touch will you plz have some link of code example of card layout.
thanks for your ideas

gcallaghan
5 Jan 2011, 10:19 AM
Take a look at the kitchen sink demo code. http://dev.sencha.com/deploy/touch/examples/kitchensink/
Look at the media->video navigation path. This is an example of a nested list that sets an active card in the main window. Nested lists have the ability to specify a function when a leaf item is selected. This function can update a card in a card panel and set it as the active item. It is possible, but not simply a cut and paste answer.

So Items you are looking for are, list or nested list, panel with card layout, and video component. check out the api for details http://dev.sencha.com/deploy/touch/docs/

zubair610
6 Jan 2011, 7:11 AM
now i am trying one div show images and another div have video panel, video panel is hide by default when i click on image will show my video panel div which overlay the images panel div will some one have some idea ho to get play corresponding video when click on image and how to show hidden video panel

thanks in advance