Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    45
    Vote Rating
    0
    jbrown13 is on a distinguished road

      0  

    Default Answered: YouTube Video won`t stop when I go to another page?

    Answered: YouTube Video won`t stop when I go to another page?


    HI

    How would I code it so the video would stop playing when I go to another page?
    Now the YouTube Video plays but it only stops When I stop it. Would like it to stop if I go off the page.

    Thanks

  2. No, it should be under the config-tag.
    And it seems that stopping a youtube-video isnt that simple when using an iframe (i dont know if there is way without the iframe).
    I've wrote a little workaround for that in the code below
    Code:
    Ext.define('MyApp.view.tablet.Home5', {
        extend: 'Ext.Panel',
        xtype: 'home5',
    
        config: {
            scrollable: true,
            cls:'logo',
    
            items:[
                {
                    xtype: 'panel',
                    id: 'videopanel',
                    html:[
                        '<div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/NSUucup09Hc?fs=1&amp;hl=en_US&amp;rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div>',
                        '<img src="resources/images/thapelo3Fy.jpg" />'
                    ].join("")
                }
            ]
        },
        
        hide: function(container, options){
            this.callParent(arguments);
            
            //workaround to stop the video (= reset the html)
            Ext.getCmp('videopanel').setHtml("");
            Ext.getCmp('videopanel').setHtml('<div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/NSUucup09Hc?fs=1&amp;hl=en_US&amp;rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div><img src="resources/images/thapelo3Fy.jpg" />');
        }
    });
    PS: please put your code between code-tags, its more readable like that

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    Belgium
    Posts
    29
    Answers
    4
    Vote Rating
    4
    gamevampy is on a distinguished road

      1  

    Default


    You can listen to the "hide"-event, and in there, stop the video.
    If you want to continue the video when its shown again, you can listen to the "show"-event.

    Code:
    hide: function(container, options){
        this.callParent(arguments);
            
        //call the video and pauze it
    }

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    45
    Vote Rating
    0
    jbrown13 is on a distinguished road

      0  

    Default


    Thanks,

    Do I have this in the right place?


    Ext.define('MyApp.view.tablet.Home5', {
    extend: 'Ext.Panel',
    xtype: 'home5',


    config: {
    scrollable: true,
    cls:'logo',
    xtype: 'video',

    items:[

    { html:[

    '<div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/NSUucup09Hc" ?fs=1&amp;hl=en_US&amp;rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div>',

    '<img src="resources/images/thapelo3Fy.jpg" />'
    ].join("")},



    {
    hide: function(container, options){
    this.callParent(home5);
    Ext.select("#video1").stop();

    }


    }]




    }




    });

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    Belgium
    Posts
    29
    Answers
    4
    Vote Rating
    4
    gamevampy is on a distinguished road

      1  

    Default


    No, it should be under the config-tag.
    And it seems that stopping a youtube-video isnt that simple when using an iframe (i dont know if there is way without the iframe).
    I've wrote a little workaround for that in the code below
    Code:
    Ext.define('MyApp.view.tablet.Home5', {
        extend: 'Ext.Panel',
        xtype: 'home5',
    
        config: {
            scrollable: true,
            cls:'logo',
    
            items:[
                {
                    xtype: 'panel',
                    id: 'videopanel',
                    html:[
                        '<div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/NSUucup09Hc?fs=1&amp;hl=en_US&amp;rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div>',
                        '<img src="resources/images/thapelo3Fy.jpg" />'
                    ].join("")
                }
            ]
        },
        
        hide: function(container, options){
            this.callParent(arguments);
            
            //workaround to stop the video (= reset the html)
            Ext.getCmp('videopanel').setHtml("");
            Ext.getCmp('videopanel').setHtml('<div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/NSUucup09Hc?fs=1&amp;hl=en_US&amp;rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div><img src="resources/images/thapelo3Fy.jpg" />');
        }
    });
    PS: please put your code between code-tags, its more readable like that

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    45
    Vote Rating
    0
    jbrown13 is on a distinguished road

      0  

    Default


    Thanks !!

  7. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Did u get this working?

    Did u get this working?


    Did I you get this working? Nothing seemed to happen for me it still kept playing...

    Do you have a working example somewhere, or any ideas what could be wrong?

Thread Participants: 2

Tags for this Thread