0

Basic Player - buttons

Hello,

Using one of the sample widgets, I created a Basic Player. It had the play and pause buttons, and it worked fine.
I decided to add rewind, fast forward, and seek buttons too. The problem is I am not sure what I am supposed to do exactly.
This is the code I have so far:

CODEBOX
var BasicPlayerView = new KONtx.Class({
ClassName: 'BasicPlayerView',

Extends: KONtx.system.FullscreenView,

initView: function() {
KONtx.mediaplayer.initialize();

this.dialogs = {};

this.dialogs.error = new KONtx.dialogs.Alert({
title: $_('video_error_dialog_title'),
message: $_('video_error_dialog_message'),
buttons: [
{ label: $_('dialog_retry_button'), callback: function() {
KONtx.mediaplayer.playlist.start();
} },
{ label: $_('dialog_cancel_button'), callback: function() {
KONtx.application.previousView();
} },
]
});
},

createView: function() {
this.controls.overlay = new KONtx.control.MediaTransportOverlay({
rewindButton: true,
fastforwardButton: true,
forwardseekButton: true,
backwardseekButton: true
}).appendTo(this);
},

focusView: function() {
this.controls.overlay.focus();
},

updateView: function() {
this._registerHandlers();
this._resetViewport();
this._handlePlaylistUpdate(this.persist.PlaylistID);
},

hideView: function() {
this._unregisterHandlers();
},

_handlePlaylistUpdate: function(playlistID) {
if(KONtx.mediaplayer.isPlaylistEntryActive) {
if(!playlistID) {
// we have no new playlist we've been asked to play, so keep playing what we already are playing
return;
}
if(playlistID == KONtx.mediaplayer.playlist.get().PlaylistID) {
// we have been asked to play the same playlist we are already playing, so just keeping playing it
return;
}
}

// Otherwise, we need to start this new playlist
this._startPlaylist(playlistID);
},

_startPlaylist: function(playlistID) {
this.controls.overlay.resetState();
KONtx.mediaplayer.playlist.set(this._createPlaylist(playlistID));
KONtx.mediaplayer.setConnectionBandwidth(KONtx.messages.fetch("bandwidth") || 1);
KONtx.mediaplayer.playlist.start();
},

_createPlaylist: function(playlistID) {
var playlist = new KONtx.media.Playlist();
playlist.PlaylistID = playlistID;

var item = null;
if (this.persist.type == 'movie'){
item = this.persist.movie.movieUrl;
} else {
item = this.persist.movie.trailerUrl;
}
playlist.addEntry(new KONtx.media.PlaylistEntry({
streams: [
{ url: item }
]
}));

return playlist;
},

_resetViewport: function() {
var bounds = KONtx.mediaplayer.getDefaultViewportBounds();
KONtx.mediaplayer.setViewportBounds(bounds);
},

_registerHandlers: function() {
if(this._boundPlayerHandler) {
this._unregisterHandlers();
}
this._boundPlayerHandler = this._playerDispatcher.subscribeTo(KONtx.mediaplayer, ['onStateChange', 'onPlaylistEnd', 'onStreamLoadError', 'onControlRewind'], this);
},

_unregisterHandlers: function() {
if(this._boundPlayerHandler) {
this._boundPlayerHandler.unsubscribeFrom(KONtx.mediaplayer, ['onStateChange', 'onPlaylistEnd', 'onStreamLoadError', 'onControlRewind']);
this._boundPlayerHandler = null;
}
},

_playerDispatcher: function(event) {
switch(event.type) {
case 'onStateChange':
if(event.payload.newState == KONtx.mediaplayer.constants.states.STOP) {
KONtx.application.previousView();
}
if(event.payload.newState == KONtx.mediaplayer.constants.states.ERROR || event.payload.newState == KONtx.mediaplayer.constants.states.UNKNOWN) {
this.dialogs.error.show();
}
break;
case 'onPlaylistEnd':
KONtx.application.previousView();
break;
case 'onStreamLoadError':
this.dialogs.error.show();
break;
case 'onControlRewind':
// TODO: what?
break;
default:
break;
}
}
});


I don't know what I should do where I catch an 'onControlRewind' event.type. If I get this straight, then I can add the other event types, and treat those too.

Thank you for your time,
Florin

by
14 Replies
  • Do the rewind and fast forward buttons even work in the simulator?
    I thought that it's enough to just put them rewindButton: true, fastforwardButton: true, and be done with it. They don't though, nothing happens.
    0
  • The media players developed by the device manufacturers are optimized to support seeking using time index values passed between the widget and server, not true fast forward and rewind. Seeking enables users to skip forward or backward within a stream in multi-second increments.

    For the buttons fastforward and rewind you can provide an event handler with your own implementation.
    The following example shows the fastforwardButton and the rewindButton and provides handlers for them.

    CODE
    var this.controls.overlay = new KONtx.control.MediaTransportOverlay({
    fastforwardButton: true,
    rewindButton: true,
    events: {
    onTransportButtonPress: function(event) {
    if(event.payload.button = "fastforward") {
    event.preventDefault();
    KONtx.mediaplayer.control.seek(10);
    } else if(event.payload.button = "rewind") {
    event.preventDefault();
    KONtx.mediaplayer.control.seek(-10);
    }
    }
    }
    }).appendTo(this);


    You also need to subscribe to the onRewindRemoteKeyPress and onFastForwardRemoteKeyPress events in your dispatcher and handle them similarly.

    CODE
          _playerDispatcher: function(event) {
    switch(event.type) {
    // add other event handlers here

    case 'onRewindRemoteKeyPress':
    event.preventDefault();
    KONtx.mediaplayer.control.seek(-10);
    break;
    case 'onFastForwardRemoteKeyPress':
    event.preventDefault();
    KONtx.mediaplayer.control.seek(10);
    break;
    default:
    log('');log('');log('');
    log('Unknown event type. How did we get this?', $dump(event, 4));
    log('');log('');log('');
    break;
    }
    }

    More details are provided here:


    http://developer.yahoo.com/connectedtv/faq/#videoCodec

    “Some device-specific media players support seeking to particular times inside a piece of media by jumping to a relative or absolute offset. Video-seeking and time index changes require a special version of GStreamer (0.10.23) to test on the Simulator, so typically time index testing occurs on the TV/device. To support stopping at a particular point in a video, the event onTimeIndexChanged fires at one second intervals. Currently none of the devices in production support true fast forward and true rewind over HTTP streams.”

    http://developer.yahoo.com/connectedtv/kon...edia_Player.pdf
    0
  • Thank you for the detailed answer!
    0
  • A couple of questions.
    1. The documentation states: Currently none of the devices in production support fast forward and rewind over HTTP streams. So that means that there's no way to fast forward (increase movie playback speed), or rewind (play movie backwards).
    2. Forward seek and backward seek should work on the TV (on the simulator only if GStreamer 0.10.23 is used).
    Do I understand correctly?

    Thank you for your time,
    Florin
    0
  • QUOTE (Florin @ Feb 24 2011, 01:47 AM) <{POST_SNAPBACK}>
    A couple of questions.
    1. The documentation states: Currently none of the devices in production support fast forward and rewind over HTTP streams. So that means that there's no way to fast forward (increase movie playback speed), or rewind (play movie backwards).
    2. Forward seek and backward seek should work on the TV (on the simulator only if GStreamer 0.10.23 is used).
    Do I understand correctly?

    Thank you for your time,
    Florin

    Yes, that's correct.
    0
  • As a note, I modified the code according to your example. When pressing the rewind button, in the terminal I get:

    seeking stream -5 seconds from current position
    >>>>> cannot seek on network input

    These are the modifications I made to my code:
    CODEBOX
    createView: function() {
    this.controls.overlay = new KONtx.control.MediaTransportOverlay({
    rewindButton: true,
    fastforwardButton: true,
    //forwardseekButton: true,
    //backwardseekButton: true,
    events: {
    onTransportButtonPress: function(event) {
    if(event.payload.button == "fastforward") {
    event.preventDefault();
    KONtx.mediaplayer.control.seek(5);
    } else if(event.payload.button == "rewind") {
    event.preventDefault();
    KONtx.mediaplayer.control.seek(-5);
    }
    }
    }
    }).appendTo(this);
    }


    CODEBOX
    _registerHandlers: function() {
    if(this._boundPlayerHandler) {
    this._unregisterHandlers();
    }
    this._boundPlayerHandler = this._playerDispatcher.subscribeTo(KONtx.mediaplayer, ['onStateChange', 'onPlaylistEnd', 'onStreamLoadError', 'onRewindRemoteKeyPress', 'onFastForwardRemoteKeyPress'], this);
    },

    _unregisterHandlers: function() {
    if(this._boundPlayerHandler) {
    this._boundPlayerHandler.unsubscribeFrom(KONtx.mediaplayer, ['onStateChange', 'onPlaylistEnd', 'onStreamLoadError', 'onRewindRemoteKeyPress', 'onFastForwardRemoteKeyPress']);
    this._boundPlayerHandler = null;
    }
    }


    CODEBOX
    _playerDispatcher: function(event) {
    switch(event.type) {
    case 'onStateChange':
    if(event.payload.newState == KONtx.mediaplayer.constants.states.STOP) {
    KONtx.application.previousView();
    }
    if(event.payload.newState == KONtx.mediaplayer.constants.states.ERROR || event.payload.newState == KONtx.mediaplayer.constants.states.UNKNOWN) {
    this.dialogs.error.show();
    }
    break;
    case 'onPlaylistEnd':
    KONtx.application.previousView();
    break;
    case 'onStreamLoadError':
    this.dialogs.error.show();
    break;
    case 'onRewindRemoteKeyPress':
    event.preventDefault();
    KONtx.mediaplayer.control.seek(-5);
    break;
    case 'onFastForwardRemoteKeyPress':
    event.preventDefault();
    KONtx.mediaplayer.control.seek(5);
    break;
    default:
    break;
    }
    }
    0
  • Tried the code on the TV and backwards seeking or forward seeking aren't working.
    Can anyone give me a working example which allows seeking? Or point me in the right direction? The code I posted is not working neither in the simulator nor on the TV.
    0
  • QUOTE (Florin @ Feb 25 2011, 02:33 AM) <{POST_SNAPBACK}>
    Tried the code on the TV and backwards seeking or forward seeking aren't working.
    Can anyone give me a working example which allows seeking? Or point me in the right direction? The code I posted is not working neither in the simulator nor on the TV.

    Please provide the following information so I can help you:
    1. TV and year
    2. framework version
    3. engine version
    4. container version
    0
  • QUOTE (Benjamin Toll @ Feb 28 2011, 02:22 PM) <{POST_SNAPBACK}>
    Please provide the following information so I can help you:
    1. TV and year
    2. framework version
    3. engine version
    4. container version

    Model: LG 42LE5400
    Date of Manufacture: January, 2011
    Yahoo! Widget Engine: 5.3.3
    Widget Application Framework: 1.3.12.F
    Widget Container: 1.2.67.F

    Thank you for your time.
    0
  • QUOTE (Florin @ Mar 2 2011, 12:23 AM) <{POST_SNAPBACK}>
    Model: LG 42LE5400
    Date of Manufacture: January, 2011
    Yahoo! Widget Engine: 5.3.3
    Widget Application Framework: 1.3.12.F
    Widget Container: 1.2.67.F

    Thank you for your time.

    LG doesn't support seeking. If you're developing a widget for that platform, I highly suggest that you only consume data rather than any media.

    You can buy a new Vizio for not a lot of money.
    0
  • QUOTE (Florin @ Feb 25 2011, 06:13 AM) <{POST_SNAPBACK}>
    Searched the forums but no luck. Can anyone help? :uhttp://www.yctvblog.com/blog/2011/02/28/us...ate-ff-and-rew/
    0
  • Thank you for the response!
    I am not sure though what you mean by consuming data rather than media.
    0
  • QUOTE (Florin @ Mar 4 2011, 04:13 AM) <{POST_SNAPBACK}>
    Thank you for the response!
    I am not sure though what you mean by consuming data rather than media.

    I meant not to play audio or video streams :)
    0
  • Another low-cost option that I forgot to mention is to purchase a setup box from Dlink with our software pre-installed. They will be available in the second half of the year.
    0

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets