Blog - PonticStar.com » Web Design http://www.ponticstar.com/blog Blog about various aspects of programming and web design Sun, 14 Aug 2011 23:52:31 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Yahoo Media Player beta version is available http://www.ponticstar.com/blog/2011/02/24/yahoo-media-player-beta/ http://www.ponticstar.com/blog/2011/02/24/yahoo-media-player-beta/#comments Thu, 24 Feb 2011 15:17:18 +0000 Michael Ryvkin http://www.ponticstar.com/blog/?p=138 It turns out that Yahoo Media Player is not abandoned project after all. Last week it was announced that beta version is available for testing at mediaplayer.yahoo.com/beta. Here is a note from developers:

We’ve added some new stuff like video support. The player can now play YouTube videos and movie trailers – just add a YouTube link or Yahoo! Movie page link to your page. And, at long last, we’ve added a seek slider to control the position of the audio or video! That bug where songs were stopping instead of pausing when clicking pause has been fixed, as well as a bunch of other small bug fixes.

Here is the new code you will need to embed on your site to test this out (remove the other player JavaScript first):

<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

Example:
Lake of Tears: Demon you / Lily Anne
Anime “Red thread”
Top 50 Songs of the 90s in under 9 Minutes

This announcement was posted in Yahoo! discussion group at tech.groups.yahoo.com/group/yhoomediaplayer/. Feel free to post examples of how you are using the player on your site to this group.

]]> http://www.ponticstar.com/blog/2011/02/24/yahoo-media-player-beta/feed/ 4 Strange LetsTalk customer care icon metaphor http://www.ponticstar.com/blog/2010/03/11/letstalk-icon-metaphor/ http://www.ponticstar.com/blog/2010/03/11/letstalk-icon-metaphor/#comments Thu, 11 Mar 2010 15:18:12 +0000 Michael Ryvkin http://www.ponticstar.com/blog/?p=125 While looking to upgrade my phone on LetsTalk.com I was puzzled by their customer care icon. Have no idea what was designer thinking creating it. Maybe you can help?

LetsTalk customer care icon

Another question I am asking myself is there a connection between this and their low rating at ResellerRatings.com.

]]> http://www.ponticstar.com/blog/2010/03/11/letstalk-icon-metaphor/feed/ 0 Hacking the Yahoo! Media Player http://www.ponticstar.com/blog/2009/12/12/hacking-yahoo-media-player/ http://www.ponticstar.com/blog/2009/12/12/hacking-yahoo-media-player/#comments Sat, 12 Dec 2009 06:00:00 +0000 Michael Ryvkin http://www.ponticstar.com/blog/?p=109 UPDATE: On August 4, 2011 Yahoo! has released a new version of the player available at webplayer.yahoo.com. Please note that tricks mentioned here might not work with it. I will try to review the new player and update this article.

About the player

The Yahoo! Media Player enhances your web site or blog by creating an embedded player for each audio link. All the links can be played with one click, turning the page into a playlist. This is done by adding just one line of code to your page.

Updates

2/15/2011 – Yahoo! Media Player beta version is released

There is beta version available with YouTube/Yahoo! Movie pages support, please see Yahoo! Media Player beta page or this post for more information. Please note that some hacks mentioned here might not work with beta version.

How to use

Please visit the Yahoo! Media Player web site (http://mediaplayer.yahoo.com/) for more information.

How to use a playlist

Please visit the Yahoo! Media Player public wiki (http://yahoomediaplayer.wikia.com/wiki/How_to_link) for more information.

Note that you will not be able to test the functionality on your local computer because Yahoo! Media Player uses external service to retrieve and process XSPF files. It was done to avoid cross-domain access limitation for Flash objects and JavaScript code.

View example

How to change skin

If you want to dramatically change appearance of the player you would need to modify its skin. There are three images that player mostly uses however you will need to download just the skin image to change player’s appearance:

  1. Skin image, links: Yahoo.com, PonticStar.com
  2. Animated image used when player is minimized and playing a song, links: Yahoo.com, PonticStar.com
  3. Animated image used to locate audio link on the page, links: Yahoo.com, PonticStar.com

Once you have downloaded the skin image, use your favorite image editing program to customize it. In order to apply the skin you would have to use the code below.

Instructions: Update path to your image file. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Change default skin */
#ymp-player .ymp-color-main {
  background-color:transparent !important;
}

.ymp-skin {
  background-image:url(/path/to/your/mediaplayer-skin.png) !important;
}

/* Use original animated images */
#ymp-body #ymp-btn-max span.ymp-animarrow {
  background-image:url(http://l.yimg.com/us.yimg.com/i/us/mus/ymwp/mediaplayer-animarrow-2.0.31.gif) !important;
}
a.ymp-btn-page-target em.ymp-skin,
a:hover.ymp-btn-page-target em.ymp-skin,
a:active.ymp-btn-page-target em.ymp-skin {
  background-image:url(http://l.yimg.com/us.yimg.com/i/us/mus/ymwp/mediaplayer-findlink-2.0.31.gif)  !important;
}

If you want to use reduce loading time and avoid using two additional images, use the following code instead:

/* Yahoo! Media Player: Change default skin */
#ymp-player .ymp-color-main {
  background-color:transparent !important;
}

.ymp-skin {
  background-image:url(/path/to/your/mediaplayer-skin.png) !important;
}

/* Avoid using animated images (and reduce loading time) */
#ymp-body #ymp-btn-max span.ymp-animarrow {
  background-position:-119px -80px !important;
}
a.ymp-btn-page-target em.ymp-skin,
a:hover.ymp-btn-page-target em.ymp-skin,
a:active.ymp-btn-page-target em.ymp-skin {
  background-position:-624px -17px !important;
}

View example

How to adjust background color

Figure 1: Background color

Figure 1: Background color

Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Set background color */
#ymp-player .ymp-color-main,
#ymp-tray .ymp-color-tray {
  background-color:#2F437C !important;
}

View example

How to adjust text color

Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Set text color */
#ymp-player .ymp-color-text-main {
  color:#000000 !important;
}

How to update block with relevant information

You may want to display your own message in the relevant information block instead of the default “learn more about this player” link. To do so you will need link to your media like this:

a song relevant info for this song

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: */
/* Modify contents of the block with relevant information */
#ymp-relevant-info {
  display:block;
  position:absolute;
  left:2px;
  top:10px;
  width:116px;
  font-size:12px;
  font-weight:bold;
  line-height:13px;
  text-align:center;
  z-index:2;
} 

#ymp-relevant-info a {
  color:#3D9AD0;
}

.relevant-info {
  display:none;
}

Instructions: Insert the code below right after the line that embeds the player into your page.

<script type="text/javascript">
   function apiReadyHandler(){
      YAHOO.ympyui.util.Event.onDOMReady(UpdateRelevantInfo);
      YAHOO.MediaPlayer.onTrackStart.subscribe(UpdateRelevantInfo);
   }

   /*
      Written by Jonathan Snook, http://www.snook.ca/jonathan
      Add-ons by Robert Nyman, http://www.robertnyman.com

http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/

   */
   function getElementsByClassName(className, tag, elm){
      var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
      var tag = tag || "*";
      var elm = elm || document;
      var elements = (tag == "*" && elm.all)
                        ? elm.all
                        : elm.getElementsByTagName(tag);
      var returnElements = [];
      var current;
      var length = elements.length;
      for(var i=0; i<length; i++){
         current = elements[i];
         if(testClass.test(current.className)){
            returnElements.push(current);
         }
      }
      return returnElements;
   }

   function UpdateRelevantInfo() {
      // Default text
      var info = 'Visit ponticstar.com for more information';

      // Retrieve information about the track
      var meta = YAHOO.MediaPlayer.getMetaData();

      // If element with class "relevant-info" is available
      // inside the anchor, use its content instead
      if(meta && meta.anchor){
         var el = meta.anchor;
         var a = (el.getElementsByClassName)
                    ? el.getElementsByClassName("relevant-info")
                    : getElementsByClassName("relevant-info", null, el);
         if(a.length > 0){ info = a[0].innerHTML; }
      }

      document.getElementById('ymp-relevance').innerHTML = '

' + info + '


';
   }

   YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

View example

How to remove block with relevant information

Figure 2: Relevant information block is removed

Figure 2: Relevant information block is removed

Player displays “Learn more about this player” link along with lyrics or related videos. If you are trying to minimize size of the player, use the code below.

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: */
/* Remove block with relevant information */
#ymp-relevance { display:none !important; }
.ymp-player-max #ymp-body { width:570px !important; }
.ymp-player-max #ymp-body #ymp-body-strip { width:557px !important; }
.ymp-player-max #ymp-body #ymp-body-base  { width:560px !important; }

View example

How to hide various buttons

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Hide 'close window' button */
#ymp-btn-close { display:none !important; }

/* Yahoo! Media Player: Hide 'pop-up window' button */
#ymp-btn-pop { display:none !important; }

View example

How to change playlist colors

Figure 3: Playlist colors

Figure 3: Playlist colors

Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Playlist colors */
/* Default color for playlist entries */
#ymp-tray .ymp-tray-track {
  color:#FFCE0C !important;
}

/* Highlighted track */
#ymp-tray .ymp-tray-track:hover {
  color:#FFFFFF !important;
  background-color:transparent !important;
}

/* Currently playing track */
#ymp-tray .ymp-tray-track.playing,
#ymp-tray .ymp-tray-track.playing:hover {
  color:#FFFFFF !important;
  background-color:#777777 !important;
}

How to display album art

Figure 4: Album art

Figure 4: Album art

You can set the image which is displayed in the player during a song. To do this, put an img element within the playable link.

For example:

<a href="example.mp3"><img src="example.png" alt="" />my song</a>

The dimensions of the image should be square, not rectangular. If you don’t want the image to show up directly in the main web page, add style="display:none" to your img tag:

<a href="example.mp3"><img src="example.png" alt="" style="display:none" />my song</a>

Source: http://yahoomediaplayer.wikia.com/wiki/How_to_link#Album_Art

View example

How to change default album art image

Insert the code below just before the line that embeds the player into your page.


<script type="text/javascript">
var YMPParams =
{
   defaultalbumart:'http://somedomain.com/path/someimage.gif'
};
</script>

Source: http://mediaplayer.yahoo.com/api/#param_defaultalbumart

How to hide album art

Figure 5: Hidden album art

Figure 5: Hidden album art

/* Yahoo! Media Player: Hide album art */
#ymp-meta-image { display:none !important; }
#ymp-body #ymp-meta-top,
#ymp-body #ymp-meta-bottom {
  left:8px !important;
  width:330px !important;
}

View example

How to change meta (album title/web site URL) information

Instructions: Insert the code below right after the line that embeds the player into your page.

<script type="text/javascript">
   function apiReadyHandler(){
      YAHOO.ympyui.util.Event.onDOMReady(UpdateAlbumTitle);
      YAHOO.MediaPlayer.onTrackStart.subscribe(UpdateAlbumTitle);
   }

   /*
      Written by Jonathan Snook, http://www.snook.ca/jonathan
      Add-ons by Robert Nyman, http://www.robertnyman.com

http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/

   */
   function getElementsByClassName(className, tag, elm){
      var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
      var tag = tag || "*";
      var elm = elm || document;
      var elements = (tag == "*" && elm.all)
                        ? elm.all
                        : elm.getElementsByTagName(tag);
      var returnElements = [];
      var current;
      var length = elements.length;
      for(var i=0; i<length; i++){
         current = elements[i];
         if(testClass.test(current.className)){
            returnElements.push(current);
         }
      }
      return returnElements;
   }

   function UpdateAlbumTitle() {
      var meta_bottom = document.getElementById('ymp-meta-bottom');
      var el = getElementsByClassName('ymp-meta-box', 'div', meta_bottom);
      if(el.length > 0){
         el[0].innerHTML = 'Visit www.lakeoftears.net for more info';
      }
   }

   YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

View example

How to hide meta (album title/web site URL) information

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Hide album title / web site URL */
#ymp-meta-album-title { display:none !important; }

View example

How to hide the player

Sometimes you may want to display only small play button next to MP3 links. To hide the player use the code below.

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Hide player */
#ymp-player,
#ymp-tray,
#ymp-error-bubble,
#ymp-secret-bubble {
  display:none !important;
}

There is another way to do it using parameter displaystate which is described at http://mediaplayer.yahoo.com/api/#param_displaystate

View example

How to hide MP3 links

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Hide MP3 links */
.ymp-btn-page-play,
.ymp-btn-page-pause {
  display:none;
}

How to hide link play/pause buttons

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Hide play/pause button */
a.ymp-btn-page-play,
a.ymp-btn-page-pause {
  margin-left:-20px !important;
}

a.ymp-btn-page-play em.ymp-skin,
a.ymp-btn-page-pause em.ymp-skin {
  display: none !important;
}

View example

How to start player in a new window

The code below tries to launch player in a new window automatically which allows user to navigate your site without interrupting the player. However my code for displaying pop-under window doesn’t work as expected for all browsers which results in pop-up window instead.

Instructions: Insert the code below right after the line that embeds the player into your page.

<script type="text/javascript">
    var ymp_pop_num_tries = 0;
    var ymp_pop_max_num_tries = 20;
    function ympPopPlayer(){
       var ymp = YAHOO.mediaplayer;
       if(ymp_pop_num_tries > ymp_pop_max_num_tries){ return; }
       if(ymp.Controller && ymp.Controller.view){
          // Create a pop-under window
          // works in IE, doesn't work in Firefox 3.5.x
          var ymp_pop = window.open("", "ymediaplayer");
          if(ymp_pop){ ymp_pop.blur(); }
          window.focus();

          ymp.Controller.view.popPlayer({});
       } else {
         ymp_pop_num_tries++;
         setTimeout(ympPopPlayer, 1000);
       }
    }

    function apiReadyHandler(){
       ympPopPlayer();
    }

    YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

View example

How to disable Yahoo! search links

Instructions: Insert the code below right after the line that embeds the player into your page.

<script type="text/javascript">
   // Disable Yahoo! Media Player search links
   function apiReadyHandler(){
      YAHOO.MediaPlayer.onMediaUpdate.subscribe(DisableYahooLinks);
      YAHOO.MediaPlayer.onTrackStart.subscribe(DisableYahooLinks);
      setTimeout(DisableYahooLinks, 2000);
   }

   function DisableYahooLinks(){
      DisableLink(document.getElementById('ymp-meta-track-title'));
      DisableLink(document.getElementById('ymp-meta-artist-title'));
      DisableLink(document.getElementById('ymp-meta-image'));
      DisableLink(document.getElementById('ymp-meta-album-title'));
   }

   function DisableLink(el){
      if(el){
         el.href = 'javascript:void(0)';
         el.onclick = function(){ return false; };
      }
   }

   YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

View example

How to change default settings

See http://mediaplayer.yahoo.com/api for more information.

Links

]]> http://www.ponticstar.com/blog/2009/12/12/hacking-yahoo-media-player/feed/ 134 Compressed Nifty Corners http://www.ponticstar.com/blog/2009/01/16/compressed-niftycorners/ http://www.ponticstar.com/blog/2009/01/16/compressed-niftycorners/#comments Sat, 17 Jan 2009 00:08:38 +0000 Michael Ryvkin http://www.ponticstar.com/blog/?p=26 Recently I was experimenting with different techniques and libraries that implement rounded corners with no images. Nifty Corners Cube by Alessandro Fulciniti was among them.

I liked the fact that the library detected background color and padding of the target element. This allows the technique to degrade gracefully if JavaScript is disabled.

As a rule of thumb I usually compress the libraries I use with JavaScript packer written by Dean Edwards and Rob Seiler. However niftycube.js had to be corrected before since there is a semicolon missing on line 24.

niftycube.js:
String.prototype.find=function(what){
return(this.indexOf(what)>=0 ? true : false);
}; // Missing semicolon

Download Nifty Corners Cube (compressed), 4.66 KB.

]]> http://www.ponticstar.com/blog/2009/01/16/compressed-niftycorners/feed/ 1