1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Austria
    Posts
    59
    Answers
    3
    Vote Rating
    2
    samlinux is on a distinguished road

      0  

    Default Answered: xtype video

    Answered: xtype video


    How can I define the width and height of a xtype video ? If I use the the example below the video is always to large for the screen !!

    Code:
    var panel = new Ext.Panel({
        fullscreen: true,
        items: [
            {
                xtype    : 'video',
                x        : 600,
                y        : 300,
                width    : 175,
                height   : 98,
                url      : "porsche911.mov",
                posterUrl: 'porsche.png'
            }
        ]
    });
    And is it possible to play two or more videos in a row ?

  2. I solved my problem after a lot of trail and error by myself.

    So I believe the problem was the layout. It seems there is no way to mix the video component with oder xtypes like button oder panel.

    If you want to have an layout like this

    - video
    - button
    - some information text

    than you have to use a layout vbox, but the thing is you have to do this in the following way

    Code:
    Ext.define('app.view.VideoDetail',{
        extend: 'Ext.Panel',
        alias: 'widget.videodetail1',
        id: 'videodetail1',
        config: {
            layout: 'vbox',
            styleHtmlContent: true,
            scrollable: true,
            items: [
                {
                  xtype: 'panel',
                  layout: 'card',
                  items:[
                        {
                            xtype: 'video',
                            id: 'videoplayer',
                            centered: true,
                            styleHtmlCls: 'my_video_1'
                        }
                  ],
                  height:160
                },
                {
                    xtype: 'button',
                    id: 'Btn_share',
                    text: 'share it'
                },
                {
                    xtype: 'panel',
                    id: 'videodetail',
                    tpl: tplDetail
                }
            ]
        }
    });
    So you have to use it like this

    layout: vbox with the following items
    - panel
    -- layout: card with the item
    -- xtype video
    - button
    - panel with some text

    If you do it so, you can use css class to format the video component include posterImage and video, but you need the card layout !

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The video component should always be what you specify it to be so it should be 175x98.

    You can listen for the ended event on the video and then setUrl('...') to change the url of the video to load the new video.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Austria
    Posts
    59
    Answers
    3
    Vote Rating
    2
    samlinux is on a distinguished road

      0  

    Default


    The video component should always be what you specify it to be so it should be 175x98.
    maybe the problem is application. I use panel with vbox layout like this.

    Code:
    Ext.define('app.view.VideoDetail',{
        extend: 'Ext.Panel',
        alias: 'widget.videodetail1',
        id: 'videodetail1',
        config: {
            layout: 'vbox',
            styleHtmlContent: true,
            scrollable: true,
    
    
            items: [
                {
                    xtype: 'video',
                    id: 'videoplayer',
                    x:0,
                    y:0,
                    width: 175,
                    height: 98,
                    posterUrl: '_thumb.jpg',
                    url: 'viedeo.mp4'
                },
                {
                    xtype: 'button',
                    id: 'Btn_teilen',
                    text: 'teilen'
                },
                {
                    xtype: 'panel',
                    id: 'videodetail',
                    tpl: tplDetail
                }
            ]
        }
    });
    So in my case the video is always to large !!

  5. #4
    Sencha User
    Join Date
    Sep 2010
    Location
    Austria
    Posts
    59
    Answers
    3
    Vote Rating
    2
    samlinux is on a distinguished road

      0  

    Default


    one other point,

    if i check the HTML SRC with Chrome, there is no width or hight attribute and if I use the CLS propertiy the size is ok, but the video is not displayed !!

  6. #5
    Sencha User
    Join Date
    Sep 2010
    Location
    Austria
    Posts
    59
    Answers
    3
    Vote Rating
    2
    samlinux is on a distinguished road

      0  

    Default


    I try to solve me problem with a XTemplate like this.

    Code:
    var tplVideo = new Ext.XTemplate(
        '<video id="my_video_1" ' +
            'controls preload="auto" ' +
            'width="285px" poster="{path2image}"> ' +
            '<source src="{path2video}" type="video/mp4"/>' +
            '<source src="{path2video}" type="video/mp4"/>' +
            '</video>'
    );
    This works perfect, but how can I control the video tag by the ID =" my_video_1" in my controller ?

    The refs config in my controller should not get access to the video element ?
    Code:
    config: {
            refs: {
                    test: '#my_video_1'
                  },
    
    
            control: {
                
                test: {
                    play: 'test'
                }
            }
        },

  7. #6
    Sencha User
    Join Date
    Sep 2010
    Location
    Austria
    Posts
    59
    Answers
    3
    Vote Rating
    2
    samlinux is on a distinguished road

      0  

    Default


    I solved my problem after a lot of trail and error by myself.

    So I believe the problem was the layout. It seems there is no way to mix the video component with oder xtypes like button oder panel.

    If you want to have an layout like this

    - video
    - button
    - some information text

    than you have to use a layout vbox, but the thing is you have to do this in the following way

    Code:
    Ext.define('app.view.VideoDetail',{
        extend: 'Ext.Panel',
        alias: 'widget.videodetail1',
        id: 'videodetail1',
        config: {
            layout: 'vbox',
            styleHtmlContent: true,
            scrollable: true,
            items: [
                {
                  xtype: 'panel',
                  layout: 'card',
                  items:[
                        {
                            xtype: 'video',
                            id: 'videoplayer',
                            centered: true,
                            styleHtmlCls: 'my_video_1'
                        }
                  ],
                  height:160
                },
                {
                    xtype: 'button',
                    id: 'Btn_share',
                    text: 'share it'
                },
                {
                    xtype: 'panel',
                    id: 'videodetail',
                    tpl: tplDetail
                }
            ]
        }
    });
    So you have to use it like this

    layout: vbox with the following items
    - panel
    -- layout: card with the item
    -- xtype video
    - button
    - panel with some text

    If you do it so, you can use css class to format the video component include posterImage and video, but you need the card layout !

Thread Participants: 1