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

[jbrown13]

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

[gamevampy]

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.

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

[jbrown13]

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();

}


}]




}




});

[gamevampy]

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

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

[jbrown13]

Thanks !!

[digeridoo]

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?

[jbrown13]

Yes I did get it working.

I did not have the hide: function inside the listeners{}.

Ext.define('JB.view.phone.Home', {
    extend: 'Ext.Container',
    fullscreen:'true',
    xtype: 'home-phone',

    
    config: {
        title: 'Home',
        iconCls: 'home',
         cls: 'logo',
        styleHtmlContent: true,
        scrollable: true,
          
        items:[    
               
           {
             
             id: 'videopanel',
             html:[
             
                '<div id="video1"><iframe width="360" height="115" src="http://www.youtube.com/embed/xt_VZUpSCL0" ?fs=1&amp;hl=en_US&amp;rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div>' ]
               
           },
        {      
         
         html: [
                       '<h1>Thapelo</h1>',
                        "<p>Established in 2003, the mission of Thapelo Institute, Inc. is to educate the public in general and African Americans in particular on strategies for the implementation of positive health behaviors for the prevention of illness and management of disease. </p>",
                    '<img src="resources/images/sesa_lgBlue.jpg" />', 
                    '<h3>SESA WORUBAN</h3>',
                    "<p>Symbol of life transformation.</p>",
                    '<h3>West African Wisdom</h3>',
                    "<p>&quot;I change or transform my life</font></strong></p>",
                    "<p>This symbol combines two separate adinkra symbols, the &quot; Morning Star&quot;which can mean a new start to the day, placed inside the wheel, representing rotation or independent movement </p>"

                    
            ].join("")},
          
          {
             xtype: 'titlebar',
             docked: 'top',

             title: 'Thapelo Institute, Inc'
          
          }
          
          
        ],

        listeners: {

            hide: function () {
                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>');
            } // hide
        } // listeners

     }
});