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