0

Videoplayer resize issue

Hi all,
my application works as a sort of Video on demand application.

For each video you can choose to play it at full screen size or as a portion of the screen.

The issue I am experiencing is that after playing a video at full screen size I'm not able to play a following video at a reduced size.

Basically I'm not able to specify the viewport element other than in the createView function while I think, to make tha application work, I should modify the viewport in any updateView function of views playing videos.

Am I doing something wrong?
Any suggestion?
Thanks
Stefano

by
18 Replies
  • QUOTE (stefanospelta @ May 29 2009, 08:04 AM) <{POST_SNAPBACK}>
    Hi all,
    my application works as a sort of Video on demand application.

    For each video you can choose to play it at full screen size or as a portion of the screen.

    The issue I am experiencing is that after playing a video at full screen size I'm not able to play a following video at a reduced size.

    Basically I'm not able to specify the viewport element other than in the createView function while I think, to make tha application work, I should modify the viewport in any updateView function of views playing videos.

    Am I doing something wrong?
    Any suggestion?
    Thanks
    Stefano


    The upcoming WDK has a method in the Video Player for resizing on the fly. I will get you a sample of the code shortly to make it work.

    -Jeremy
    0
  • QUOTE (Jeremy Johnstone @ May 29 2009, 11:26 AM) <{POST_SNAPBACK}>
    The upcoming WDK has a method in the Video Player for resizing on the fly. I will get you a sample of the code shortly to make it work.

    -Jeremy


    Any news regarding the upcoming WDK in the VIdeoPlayer for resizing on the fly and the sample of the code?

    BR

    Mauro
    0
  • QUOTE (rossottom @ Jun 17 2009, 02:38 AM) <{POST_SNAPBACK}>
    Any news regarding the upcoming WDK in the VIdeoPlayer for resizing on the fly and the sample of the code?

    BR

    Mauro


    We would like to get our hands on this sample as well... Thanks, Jesse
    0
  • QUOTE (Jesse @ Jun 22 2009, 07:58 AM) <{POST_SNAPBACK}>
    We would like to get our hands on this sample as well... Thanks, Jesse


    Hi Jesse,

    You have the latest WDK and the code is there. Look for the setViewportBounds() function in KONtx.videoplayer.

    -Jeremy
    0
  • QUOTE (Jeremy Johnstone @ Jun 29 2009, 05:59 PM) <{POST_SNAPBACK}>
    Hi Jesse,

    You have the latest WDK and the code is there. Look for the setViewportBounds() function in KONtx.videoplayer.

    -Jeremy



    Hi Jeremy,
    we tried to use the setViewportBounds() function in the update view method but we were unable to obtain any result.
    Had we to use it in another place of the application?

    Thanks for the support
    Stefano
    0
  • QUOTE (stefanospelta @ Jul 7 2009, 07:31 AM) <{POST_SNAPBACK}>
    Hi Jeremy,
    we tried to use the setViewportBounds() function in the update view method but we were unable to obtain any result.
    Had we to use it in another place of the application?

    Thanks for the support
    Stefano


    The code definitely works as the Youtube widget uses it. Can you share your code so I can see exactly what you are doing?

    -Jeremy
    0
  • QUOTE (Jeremy Johnstone @ Jul 9 2009, 05:46 PM) <{POST_SNAPBACK}>
    The code definitely works as the Youtube widget uses it. Can you share your code so I can see exactly what you are doing?

    -Jeremy



    Hi Jeremy,
    sorry for the delay in the reply.

    My code follows here

    CODE
    	

    ... SKIP SKIP SKIP SKIP SKIP SKIP SKIP SKIP SKIP ....

    createView: function() {


    this.controls.overlay = new KONtx.control.VideoTransportOverlay().appendTo(this);

    this.player = new KONtx.videoplayer({
    viewport :{
    width: smallVideoWidth,
    height: smallVideoHeight,
    x: ((this.width - smallVideoWidth) / 2),
    y: 70
    },
    events: {
    onStateChange: function(event) {
    if(event.payload.newState == event.payload.videoplayer.states.STOP) {
    self._switchBackToPreview();
    }
    },
    onPlaylistEnd: function(event) {
    self._switchBackToPreview();
    },
    onVideoLoadError: function(event) {
    self._showErrorDialog();
    }
    }
    });

    this.player.attachAccessory(this.controls.overlay);

    ... SKIP SKIP SKIP SKIP SKIP SKIP SKIP SKIP SKIP ....

    updateView: function() {
    this.player.setViewportBounds(((this.width - smallVideoWidth) / 2) , 70,
    smallVideoWidth , smallVideoHeight );

    this._startNewPlaylist(this.persist.selectedVideoIndex);
    },

    ... SKIP SKIP SKIP SKIP SKIP SKIP SKIP SKIP SKIP ....


    The code above defines a fullscreen view where the video is played ad reduced size. I have a similar fullscreen view where the video is played at fullscreen.

    Switching back from the fullscreen size play to this view I think the updateView should be called and the viewport resized but maybe I'm wrong.

    Can you help me?

    Thanks
    Stefano
    0
  • Toggle Viewport Size

    You are correct in your usage of the method. However, you are incorrectly assuming that a change in viewport size changes the state of your view.

    Actually when you change the viewport size you are not changing views at all. This means that you never leave your fullscreen view, the videoplane just resizes. Therefore you will never get a secondary updateView and you will need to toggle the size of your viewport manually.

    You can do this via the transportControl by using the following code.

    CODE
    // the setup here is terse and you will likely need more in your config to create the object
    // this example assumes you are using the example from above(the previous comment in this thread), which is where myVideoPlayer and its resizeViewport method are created
    var myPlayerTransport = new KONtx.control.VideoTransportOverlay( {
    resizeButton: true,
    events: {
    onTransportButtonPress: function( event ) {
    switch ( event.payload.button ) {
    case 'resize' :
    // reference to the current view
    var view = this.getView();
    // reference to the videoPlayer
    var MVP = view.myVideoPlayer;
    // provide a default size to use
    var size = '';
    // perform some conditional checks here to determine what size the viewport should end up being
    //size = YOUR_CONDITIONS
    // now fire our resize method
    // passing in 'size' at this point( which is empty ) would resize the viewport to fullscreen based
    // on our setup
    MVP.resizeViewport( size );
    break;
    }
    }
    },
    } );
    0
  • QUOTE (oxchronxo @ Jul 15 2009, 11:35 AM) <{POST_SNAPBACK}>
    Toggle Viewport Size

    You are correct in your usage of the method. However, you are incorrectly assuming that a change in viewport size changes the state of your view.

    Actually when you change the viewport size you are not changing views at all. This means that you never leave your fullscreen view, the videoplane just resizes. Therefore you will never get a secondary updateView and you will need to toggle the size of your viewport manually.

    You can do this via the transportControl by using the following code.

    CODE
    // the setup here is terse and you will likely need more in your config to create the object
    // this example assumes you are using the example from above(the previous comment in this thread), which is where myVideoPlayer and its resizeViewport method are created
    var myPlayerTransport = new KONtx.control.VideoTransportOverlay( {
    resizeButton: true,
    events: {
    onTransportButtonPress: function( event ) {
    switch ( event.payload.button ) {
    case 'resize' :
    // reference to the current view
    var view = this.getView();
    // reference to the videoPlayer
    var MVP = view.myVideoPlayer;
    // provide a default size to use
    var size = '';
    // perform some conditional checks here to determine what size the viewport should end up being
    //size = YOUR_CONDITIONS
    // now fire our resize method
    // passing in 'size' at this point( which is empty ) would resize the viewport to fullscreen based
    // on our setup
    MVP.resizeViewport( size );
    break;
    }
    }
    },
    } );



    Hi,
    Looking at your example code I see that you use the resize button in the player control area to switch between full size and small size video.

    My case is a little bit different.
    I have a Preview View. In this view I can click on a button to play the video at reduced size or I can click another button to play the video at full size.

    In each case i switch from this Preview View to another view (Fullsize or ReducedSize) where the videoplayer is defined.

    When the play ends, from one of these "playing" views I go back to the Preview View.

    If I play the video at the reduced size (in the reduced size view), go back to the preview and the play the video at full size (in the full size view) everything works fine.
    If I play the video at the fullsize (in the fullsize view), go back to the preview and the play the video at reduced size (in the reduced size view) the setViewportBounds() in the reduced size view update function seems not to have any effect (the code is executed because I traced it).

    May be I am wrong defining two videoplayer objects in two different views? It seems like once i create the fullsize view and set the player at fullsize view I'm not able to control the videoplayer size in the reduced size view (but everything else of the player works because I can set the content to play).

    Any other suggestion?

    Thanks
    Stefano
    0
  • Resize Method for VideoPlayer

    Below is code that has been field tested.

    First we need to setup our videoPlayer.
    Of course this is terse and you will most likely have much more in your config when you setup a new videoPlayer.

    The method that allows us to change the viewport size is called 'setViewportBounds'. It is a public method exposed from
    the videoPlayer. It accepts 4 arguments...

    1) Horizontal position
    2) Vertical position
    3) Width
    4) Height

    ... in the form...

    setViewportBounds( X, Y, W, H );

    Below I am creating a wrapper for this method which allows me to setup some pre-established sizes that I can easily use
    later in my application.

    CODE
    var myVideoPlayer = new KONtx.videoplayer( {
    viewId: this.config.viewId,
    methods: {
    // this method is exposed on the 'myVideoPlayer' object and fires in the scope of 'myVideoPlayer'
    resizeViewport: function( size ) {

    // this typically maps to a higher level var to enable switching it from a config or something
    var delta = 2;

    // You may be wondering what's going on here with the 'delta' var ?
    //
    // There is a difference in the reported videoplane between the desktop and devices. Devices typically
    // upscale their video planes. This means that while the video plane renders at 950x540 on the desktop, the
    // video plane will render at 1920x1080 on the device.
    //
    // To account for this while developing using the SDK you can use the following technique to allow you to
    // properly view what is happening with your videoplane during viewport resizes.
    //
    // The concept here is to develop against a 960x540 resolution with a delta of 1 on the SDK. So the
    // viewportBounds below would end up being ( x: 10, y: 130, w: 604, h: 340 ).
    // Then, when you are ready for production, increase the value of the delta to 2 which doubles the
    // calculations to match what the device expects. So on the device the viewportBounds below would end up
    // being ( x: 20, y: 260, w: 1208, h: 680 )
    //
    // If you are only testing on a device then remove all references to the 'delta' var to reduce your margin
    // for error.
    //
    // WARNING: although this method allows you to correctly view the videoplane while developing
    // if you forget to change your delta for production the end result will be devices that display
    // your content at half its size. You have been forewarned.

    switch ( size ) {
    case 'staticSize' :
    var bounds = {
    // horizontal position of viewport
    x: 10 * delta,
    // vertical position of viewport
    y: 130 * delta,
    // width of viewport
    w: 604 * delta,
    // height of viewport
    h: 340 * delta,
    };
    break;
    default :
    // fullscreen
    var bounds = {
    // always put at left edge
    x: 0,
    // always put at top edge
    y: 0,
    // adjust width based on delta
    w: Theme.viewSpecs.FULL_SCREEN.width * delta,
    // adjust height based on delta
    h: Theme.viewSpecs.FULL_SCREEN.height * delta,
    };
    break;
    }
    // setViewportBounds is a public method off of the videoPlayer
    // it takes Horizontal, Vertical, Width, Height as parameters
    this.setViewportBounds( bounds.x, bounds.y, bounds.w, bounds.h );

    }
    }
    } );


    Now we can use our resizeViewport method to change the size of the videoplane.

    CODE
    // to resize to our predetermined size call with
    myVideoPlayer.resizeViewport( 'staticSize' );

    // to resize back to fullscreen call with
    myVideoPlayer.resizeViewport();
    0
  • stefanospelta,

    Can you send me the code for the 2 views you have created ? It sounds like you have a collision between the 2 instances you have created for the player, but can't be sure until I see your implementation. The expectation is to only have one player class in your app, so we will start there.

    Send your code to tvwidgets@yahoo-inc.com and include the title of this thread(Replying to Videoplayer resize issue) and my handle(oxchronxo) in the subject.
    0
  • Using
    Konfabulator 5.4.2 (build wdk-base-stream-981-5253)
    ywe-wdk 1.0.0.0
    include("Framework/kontx/1.2/src/all.js");


    I am having a similar issue. I'm creating a video player as such:

    CODE
            var videoPlayer= new KONtx.videoplayer({
    viewId: videoView.viewId,
    viewport: {
    x: 180,
    y: 120,
    width: 400,
    height: 260
    },
    events: {
    onStateChange: function(evt){
    ....
    },
    onVideoLoadError: function(evt){
    ....
    }
    }
    });

    // Also trying this after creation
    videoPlayer.setViewportBounds(100, 100, 300, 200);



    I'm getting the following output in the terminal:

    CODE
    >>>>> 'VideoPlaybackScreen' changed from 960x540 @ 0,0 to 400x260 @ 180x120
    >>>>> 'VideoPlaybackScreen' changed from 400x260 @ 180x120 to 300x200 @ 100x100


    However, both the emulator and Sony TV plays the video fullscreen (960x540@0,0). Any ideas?

    Also, is it possible to get the video to play in front of the graphics (z-index wise)? In the emulator the video plays behind my graphics, but on the Sony tv it plays in front of the graphics.

    -- Nik
    0
  • QUOTE (nbjorken @ May 24 2010, 01:09 AM) <{POST_SNAPBACK}>
    However, both the emulator and Sony TV plays the video fullscreen (960x540@0,0). Any ideas?

    Also, is it possible to get the video to play in front of the graphics (z-index wise)? In the emulator the video plays behind my graphics, but on the Sony tv it plays in front of the graphics.


    1) The emulator doesn't support viewport resizing, so that could be the cause there. As to Sony, I am confirming on that one and will get back to you.

    2) The emulator always has video playing behind the graphics plane (with the exception of the rare instances where it pops out of window do to a gstreamer issue) which is our standard implementation across most OEM devices. If you want the video to be visible, you leave a transparent region in the view and it will be visible.
    0
  • QUOTE (Jeremy Johnstone @ May 24 2010, 07:03 PM) <{POST_SNAPBACK}>
    1) The emulator doesn't support viewport resizing, so that could be the cause there. As to Sony, I am confirming on that one and will get back to you.


    Any news on videoplayer rezising on Sony? Thanks.
    0
  • Thanks, Jeremy!
    0
  • Sony doesn't support resizing at this point.

    http://developer.yahoo.net/forum/?showtopic=7257
    0
  • i need in my website tatuaje.dragute.com by this pleyr !! how can i get it?
    0
  • QUOTE (mircea g @ Feb 7 2011, 10:28 AM) <{POST_SNAPBACK}>
    i need in my website tatuaje.dragute.com by this pleyr !! how can i get it?

    This is a forum for developing apps on tvs, nothing to do with web browsers. But to answer your question, you'd have to have a back-end service provide you with anything you want to display in your app.

    Also, don't hijack a post, this question has nothing to do with the original topic. If you have a specific question, post a new topic with A LOT more detail.
    0

Recent Posts

in General - Yahoo! TV Widgets