Thank you for the module.

Eventhough i see you invested a lot of time to abstract a API, it stays very far away from useable during development without a documentation.

Iam not even sure about the basic architecture after investing several hours of looking into the JS code.

Basic task JS task like "maximize", play, stop, skip are not even near to be accessable through and easy interface. I still dont have a clue how to access them.
It would be great if you actually could draw a picture about the archticture and actually give people a clue how to control the player with JS.

Back to my question:
I have a view of video nodes ( embedfield ) over at drupal-wiki.com/demos .. how would i
- let the player autoplay on pageload ( i activated autoload and autoplay - still it does not autoplay )
- how would i preselect and item to play? Lets say i want to let play node 240. ( i dont mind if its JS or PHP sided )

Iam a exp dev, so just give me an outline. Thanks!

Comments

Thanks for the suggestion. I am very aware that there is a major gap in the documentation on this project, and I will work hard to resolve this. I have been moving my family to a new state/new home this past month so I have really been away, but I promise I will eventually get to the docs. In the meantime, I will try my best to explain a very vague overview of the architecture with the following list...

  • jquery.media.player.js - Top level class
    • jquery.media.node.js - The main node of the player, which contains the player and whatever text fields that want to be added ( like title ).
      • jquery.media.minplayer.js - This is the stand-alone media player. Contains the busy cursor, preview image, overlay play button, and media display.
        • jquery.media.display.js - This is the black box only that plays the media.
          • jquery.media.youtube.js - The YouTube implementation of the display proxy.
          • jquery.media.flash.js - The Flash player implementation of the display proxy.
          • jquery.media.vimeo.js - The Vimeo implementation of the display proxy.
          • ...
    • jquery.media.playlist.js - The playlist section of the media player
      • jquery.media.teaser.js - Used to encapsulate all of the click, hover functionality of the teaser.
        • jquery.media.node.js - This is cool... each teaser is really implemented with the node class mentioned above, so technically, you can add whatever functionality inside of each teaser that is contained within the node ( including a working media player for each teaser ). This is just done by adding those template fields to the ....teaser.tpl.php.... file within the "default" player template.

So.... your question.

autoplay - This player is written to abstract out all of the different API's for the various players that this player can handle ( YouTube, Vimeo, Flash, HTML5, etc )... jquery.media.display.js is the "class" that does this, where it acts as a proxy for each of those specific player implementations like jquery.media.youtube.js. One level above that is the jquery.media.minplayer.js, which was written to be a standalone player that is simply a black box with the busy cursor, preview image, and overlay play button when the video is paused. The autostart is governed by the jquery.media.display.js class. If there is a bug, then hopefully that will point you in a better direction to debug.

As for your second question, this can be done by walking down the path of objects to get to the "node" object within the player. Fortunately this media player was written with Drupal in mind, so you can just use something similar to the following....

jQuery.media.players.mediafront_{NAME OF YOUR PRESET}.node.loadNode( 240 );

Hope this works.

Thanks,

Travis.

Also to answer your question regarding how to control the player... this can be done by first locating the player object ( which really is an instance of the jquery.media.display.js class. You do this first by locating your player instance...

var player = jQuery.media.players.mediafront_{NAME OF PRESET};

Then from following my diagram above, you can reference the player from that instance like so...

var osmplayer = jQuery.media.players.mediafront_{NAME OF PRESET};
var mediaplayer = osmplayer.node.player.media.player;

You now have full control over the API from jquery.media.youtube.js, etc like so....

var osmplayer = jQuery.media.players.mediafront_{NAME OF PRESET};
var mediaplayer = osmplayer.node.player.media.player;
// Now do something with the media player.
mediaplayer.pauseMedia();
mediaplayer.seekMedia( 0.8 );

Hope this helps.

Travis.

Status:Active» Fixed

Well this was a close to perfect introduction, thank you very much.

I would really suggest taking those information plainly and post it on you website until you have time to rework it. E.g. i did not came across the display class at all, thats really odd. E.g. i though that the minplayer is the base-implementation for the OSMplayer.

Thank you very much for the introduction!

Status:Fixed» Active

Well it seems we need a "afterLoad" hook for OSM / API so actually those commands are run after the player has been loaded. Any ideas?

Can i register any callbacks or anything like that, or can you just generate gobal jquery events i can listen on?

Oh yes and it seems that loadNode is not playing fine with the playlist (the item is not selected)

You can use this to trigger when the player you are interested in has finished loading.

$( function() {
  jQuery.media.onLoaded( "mediafront_{NAME OF YOUR PRESET}", function( osmplayer ) {
    var mediaplayer = osmplayer.node.player.media.player;
    // Now do something with the media player.
    mediaplayer.pauseMedia();
    mediaplayer.seekMedia( 0.8 );
  });
});

To fix your issue with the playlist, you will probably need to activate the playlist item, which will then trigger the node load in the node. But, from looking at the code, we need a new function in the jquery.media.playlist.js file that will get the playlist teaser provided a nodeId. We can then use that to activate a teaser. This will look similar to the following ( but the getTeaser will move to the playlist.js file ).

// This will eventually move into the playlist.
function getTeaser( playlist, nodeId ) {
  var i = playlist.teasers.length;
  while(i--) {
    if( playlist.teasers[i].node.nodeInfo.nid == nodeId ) {
      return playlist.teasers[i];
    }
  }
  return null;
}
$( function() {
  jQuery.media.onLoaded( "mediafront_{NAME OF YOUR PRESET}", function( osmplayer ) {
    osmplayer.playlist.activateTeaser( getTeaser( osmplayer.playlist, 240 ) );
  });
});

Thanks a _lot_!

Hello Travist,

i finally found time to implement this.

While preselecting a node and playing it using an argument worked very well ( like you described ), the teaser selection is not working.
Using the debugger, it seems like the playlist is not yet populated when onLoaded is called, probably the views plugin is using the same event for adding videos and comes just like after it?

thanks for your help so far!

Sounds like you need to register when the playlist finishes loading and then call this function... like this

// This will eventually move into the playlist.
function getTeaser( playlist, nodeId ) {
  var i = playlist.teasers.length;
  while(i--) {
    if( playlist.teasers[i].node.nodeInfo.nid == nodeId ) {
      return playlist.teasers[i];
    }
  }
  return null;
}
$( function() {
  jQuery.media.onLoaded( "mediafront_{NAME OF YOUR PRESET}", function( osmplayer ) {
    osmplayer.playlist.display.bind("playlistload", function() {
      osmplayer.playlist.activateTeaser( getTeaser( osmplayer.playlist, 240 ) );
    });
  });
});

Again.. haven't tested this, but it may just work.

Let me know.

Travis.

I will try it, thanks!

Status:Active» Closed (fixed)