1. #1
    Touch Premium Member
    Join Date
    Aug 2008
    Posts
    84
    Vote Rating
    2
    dmillasich is on a distinguished road

      0  

    Default Carousel with Embedded YouTube Video Problem

    Carousel with Embedded YouTube Video Problem


    Hi - first time poster here.

    I'm experimenting with Sencha Touch and have modified a bit of demo code found on the Sencha website. The code is an attempt at a carousel with three embedded youtube videos - one per card.

    Testing on Chrome - all's good - each video is found on the corresponding card. However, in Safari, while the text content is changed, the embedded object _appears_ to not change. Looking at the DOM elements - it's a bit confusing, because each DOM element for the carousel has the correct object.

    After trying a seemingly endless number of times to get the video to work in Safari by changing the options in the object I noticed during a test phase that if I grabbed the edge of the Safari browser window and resized it - VIOLA - the correct video in the carousel panel appeared. I switched to the next panel - incorrect video - resize the browser window, and again - the resize event seems to have triggered the panel to show the correct video.

    I added a listener to the carousel to hook the cardswitch event. I'm catching it when it fires, however - the panel's show method doesn't seem to be sufficient to get the same effect. My code follows:


    Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function(){
    // Create a Carousel of Items
    var carousel = new Ext.Carousel({
    items: [
    {
    html:'<h1>trailer: The Proposal</h1>'
    + '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/kPgZcW8MCaA">'
    + '<param name="movie" value="http://www.youtube.com/v/kPgZcW8MCaA"></param>'
    + '<param name="allowFullScreen" value="true"></param>'
    + '<param name="allowscriptaccess" value="always"></param>'
    + '<embed src="http://www.youtube.com/v/kPgZcW8MCaA" type="application/x-shockwave-flash" width="260" height="160"></embed>'
    + '</object>',
    cls: 'card card1'
    },
    {
    html:'<h1>trailer: 88 Minutes</h1>'
    + '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/zUCd805JDJk">'
    + '<param name="movie" value="http://www.youtube.com/v/zUCd805JDJk"></param>'
    + '<param name="allowFullScreen" value="true"></param>'
    + '<param name="allowscriptaccess" value="always"></param>'
    + '<embed src="http://www.youtube.com/v/zUCd805JDJk" type="application/x-shockwave-flash" width="260" height="160"></embed>'
    + '</object>',
    cls: 'card card2'
    },
    {
    html:'<h1>trailer: Hook</h1>'
    + '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/LxnR9e7M8Vw">'
    + '<param name="movie" value="http://www.youtube.com/v/LxnR9e7M8Vw"></param>'
    + '<param name="allowFullScreen" value="true"></param>'
    + '<param name="allowscriptaccess" value="always"></param>'
    + '<embed src="http://www.youtube.com/v/LxnR9e7M8Vw" type="application/x-shockwave-flash" width="260" height="160"></embed>'
    + '</object>',
    cls: 'card card3'
    }
    ],
    listeners: {
    cardswitch: function(){
    Ext.Msg.alert('Switch', 'happens');
    myPanel.show();
    }
    }

    });
    var myPanel = new Ext.Panel({
    cls: 'cards',
    fullscreen: true,
    layout: {
    type: 'vbox',
    align: 'stretch'
    },
    defaults: {flex: 1},
    items: [carousel]
    })
    }
    });

    Does anybody have any ideas, or suggestions as to what I might try instead of the Panel.show() method when the cardswitch event occurs?

    Thanks in advance.

  2. #2
    Touch Premium Member
    Join Date
    Aug 2008
    Posts
    84
    Vote Rating
    2
    dmillasich is on a distinguished road

      0  

    Default How about now?

    How about now?


    HTML Code:
    <div class="bbcode_container">
    <div class="bbcode_description">Code:</div>
    <pre class="bbcode_code" style="height:372px;">
    Ext.setup({
    	tabletStartupScreen: 'tablet_startup.png',
    	phoneStartupScreen: 'phone_startup.png',
    	icon: 'icon.png',
    	glossOnIcon: false,
    	onReady: function(){
    		// Create a Carousel of Items
    		var carousel = new Ext.Carousel({
    			items: [{
    				html:'<h1>trailer: The Proposal</h1>'
    					+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/kPgZcW8MCaA">'
    					+ '<param name="movie" value="http://www.youtube.com/v/kPgZcW8MCaA"></param>'
    					+ '<param name="allowFullScreen" value="true"></param>'
    					+ '<param name="allowscriptaccess" value="always"></param>'
    					+ '<embed src="http://www.youtube.com/v/kPgZcW8MCaA" type="application/x-shockwave-flash" width="260" height="160"></embed>'
    					+ '</object>',
    				cls: 'card card1'
    			},
    			{
    				html:'<h1>trailer: 88 Minutes</h1>' 
    					+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/zUCd805JDJk">'
    					+ '<param name="movie" value="http://www.youtube.com/v/zUCd805JDJk"></param>'
    					+ '<param name="allowFullScreen" value="true"></param>'
    					+ '<param name="allowscriptaccess" value="always"></param>'
    					+ '<embed src="http://www.youtube.com/v/zUCd805JDJk" type="application/x-shockwave-flash" width="260" height="160"></embed>'
    					+ '</object>',
    				cls: 'card card2'
    			},
    			{
    				html:'<h1>trailer: Hook</h1>' 
    					+ '<object width="260" height="160" type="application/x-shockwave-flash" data="http://www.youtube.com/v/LxnR9e7M8Vw">'
    					+ '<param name="movie" value="http://www.youtube.com/v/LxnR9e7M8Vw"></param>'
    					+ '<param name="allowFullScreen" value="true"></param>'
    					+ '<param name="allowscriptaccess" value="always"></param>'
    					+ '<embed src="http://www.youtube.com/v/LxnR9e7M8Vw" type="application/x-shockwave-flash" width="260" height="160"></embed>'
    					+ '</object>',
    				cls: 'card card3'
    			}],
    			listeners: {
    				cardswitch: function(){
    					Ext.Msg.alert('Switch', 'happens');
    					myPanel.show();
    				}
    			}
    		});
    		var myPanel = new Ext.Panel({
    			cls: 'cards',
    			fullscreen: true,
    			layout: {
    				type: 'vbox',
    				align: 'stretch'
    			},
    			defaults: {flex: 1},
    			items: [carousel]
    		})
    	}
    });
    </pre>
    </div> 

Similar Threads

  1. Youtube - open video player on iphone
    By DigiDood in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 4 Oct 2010, 3:54 PM
  2. Can I play a YouTube video in Ext.Video component?
    By eDissideNT in forum Sencha Touch 1.x: Discussion
    Replies: 7
    Last Post: 27 Sep 2010, 11:00 AM
  3. Calling a YouTube VIdeo
    By RandyMcMillan in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 15 Aug 2010, 9:05 PM
  4. Resizable and Draggable Youtube Video
    By cgonnet87 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 12 Jun 2008, 3:21 AM

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi