Difference between revisions of "Winamp Browser Support"

From Winamp Developer Wiki
Jump to: navigation, search
(How can I unit test how my web page looks and performs within Winamp?)
m (Reverted edits by Iseficibuw (Talk) to last version by Culix)
 
(18 intermediate revisions by 5 users not shown)
Line 27: Line 27:
 
==How can I detect that my page Is being loaded inside Winamp?==
 
==How can I detect that my page Is being loaded inside Winamp?==
  
'''1) Online Services''': The easiest way to determine if the web page is being loaded within the Winamp online services is by checking for Winamp specific strings in the user agent (see below).  
+
'''1) Online Services''': The easiest way to determine if the web page is being loaded within Online Services is by checking for Winamp specific strings in the user agent (see below).  
  
 
Example: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648) '''omBrowser'''/1.3 ('''Winamp''' 5.57 build 2596 Beta, JSAPI2)
 
Example: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648) '''omBrowser'''/1.3 ('''Winamp''' 5.57 build 2596 Beta, JSAPI2)
  
  
'''2) Bento Browser''': As stated earlier, the Bento Browser acts very much like a stand alone IE browser session and does not have convey any Winamp specific hooks (e.g, no Winamp strings in user agent, no access to Winamp API's).  
+
'''2) Bento Browser''': As stated earlier, the Bento Browser acts very much like a stand alone IE browser session and does not convey any Winamp specific hooks (e.g, no Winamp strings in user agent, no access to Winamp API's).
 
+
The remainder of this documentation page will be focused on web pages loaded within Online Services
+
  
 
==What unique conditions exist as compared to a stand alone browser?==
 
==What unique conditions exist as compared to a stand alone browser?==
 +
 +
NOTE: This section relates only to Online Services
  
 
===''Screen Size'':===
 
===''Screen Size'':===
Line 45: Line 45:
 
[[Image:Winamp Client Browser Default Page Grid.png]]
 
[[Image:Winamp Client Browser Default Page Grid.png]]
  
===''Default omBrowser Settings'':===
 
By default, the following omBrowser settings are unchecked:
 
  
*Disable context menu filtering
 
*Show a notification for every script error
 
*Enable script debugging
 
 
To turn on any of these features you'll need to download the web_dev plug-in.
 
  
 
===''Access to Online Services API's'':===
 
===''Access to Online Services API's'':===
Line 62: Line 55:
  
 
[[Image:Example Use of Online Serivces API.png]]
 
[[Image:Example Use of Online Serivces API.png]]
 
  
 
==How can I unit test how my web page looks and performs within Winamp?==
 
==How can I unit test how my web page looks and performs within Winamp?==
Line 70: Line 62:
 
Winamp provides a [http://download.nullsoft.com/winamp/plugin-dev/wa_webdev.exe web developer plugin] to help you unit test your web page inside of the Winamp client. You can download it [http://download.nullsoft.com/winamp/plugin-dev/wa_webdev.exe here].  
 
Winamp provides a [http://download.nullsoft.com/winamp/plugin-dev/wa_webdev.exe web developer plugin] to help you unit test your web page inside of the Winamp client. You can download it [http://download.nullsoft.com/winamp/plugin-dev/wa_webdev.exe here].  
  
Basically this plugin works very similarly to the Online Services node in Media library, but allows you to create "test services" with parameters you specify.  The plugin also makes available a test page for our [[Online_Service_Developer#JavaScript_APIs|Online Services APIs]].
+
Basically this plugin works very similarly to the Online Services node in the Media library, but allows you to create "test services" with parameters you specify.  The plugin also makes available a test page for our [[Online_Service_Developer#JavaScript_APIs|Online Services APIs]].
 
   
 
   
 
To use it, you'd just install the latest publically available Winamp Client, version 5.56+ (http://www.winamp.com/player/ if you don't have it already), then run the installer for the web developer plugin (wa_webdev.exe). Note: Winamp.exe should be closed when you install the web developer plugin.
 
To use it, you'd just install the latest publically available Winamp Client, version 5.56+ (http://www.winamp.com/player/ if you don't have it already), then run the installer for the web developer plugin (wa_webdev.exe). Note: Winamp.exe should be closed when you install the web developer plugin.
Line 79: Line 71:
  
 
The area to the right has the embedded browsing experience, where the online service would be loaded, When you click on the '''WebDev Platform''', you'll see a web page that has links to both the "JSAPI2 Test Page" which shows simple examples of available Winamp Javascript API calls, and a "Create Your Own Service" link, which allows you to enter a URL and title, and create a sub-node under the WebDev Platform Item (see image below).  
 
The area to the right has the embedded browsing experience, where the online service would be loaded, When you click on the '''WebDev Platform''', you'll see a web page that has links to both the "JSAPI2 Test Page" which shows simple examples of available Winamp Javascript API calls, and a "Create Your Own Service" link, which allows you to enter a URL and title, and create a sub-node under the WebDev Platform Item (see image below).  
 +
 +
Here is where you should enter the url of the web page you'd like to unit test (you can load a local file path or hosted url). Don't worry about the service ID or Icon fields. After you hit save, a sub-node under the WebDev Platform item will be created and it will behave exactly as your online service would.
  
 
[[Image:Create Test Service2.png]]
 
[[Image:Create Test Service2.png]]
  
Here is where you should enter the url of the web page you'd like to unit test (you can load a local file path or hosted url). After you hit save, a sub-node under the WebDev Platform item will be created and will behave as your online service would.
+
'''2) Bento Browser'''
 +
 
 +
Unit testing your web page inside of the Bento browser is very easy. Just run a recent version of Winamp and click on the Bento browser and enter the url of the web page you'd like to test (see image below). It's important to note that the Bento browser inside of the Winamp client is not where an online service would load, and does not give a webpage access to the JSAPI functions.
 +
 
 +
[[Image:Browser test.png]]

Latest revision as of 03:27, 30 November 2010

This wiki page has been created to help Web developers and QA engineers optimize their web pages to be rendered within the Winamp client application.

Where are web pages loaded within Winamp?

Winamp has 2 primary areas that allow external web sites to be loaded within the client experience -- Online Services and the Bento Skin Browser

1) Online Services

Online Services is a feature within the Winamp Media library that allows 3rd parties to submit their web site to appear as an integrated service within the client. An Online Service is distinct in that the web pages displayed are able to interact with the Winamp Client by leveraging the Online Services APIs. Check out the Online Services Developer section of this wiki for more information.

File:Online Services Screenshot.png


2) Bento Skin Browser

Winamp's default skin, named "Bento", has a built in web browser that allows users to freely surf the web, create bookmarks, etc. The Bento browser DOES NOT have access to the Online Services APIs and acts very much like a stand alone IE browser session.

File:Bento Browser Screenshot.png

What browser engine is embedded within Winamp?

The Winamp Browser is powered by leveraging the version of Internet Explorer that is resident on the users local machine (IE only). As such, the browser support matrix for the Winamp client is shown in the image below.

File:Winamp Browser Support Matrix.png

How can I detect that my page Is being loaded inside Winamp?

1) Online Services: The easiest way to determine if the web page is being loaded within Online Services is by checking for Winamp specific strings in the user agent (see below).

Example: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648) omBrowser/1.3 (Winamp 5.57 build 2596 Beta, JSAPI2)


2) Bento Browser: As stated earlier, the Bento Browser acts very much like a stand alone IE browser session and does not convey any Winamp specific hooks (e.g, no Winamp strings in user agent, no access to Winamp API's).

What unique conditions exist as compared to a stand alone browser?

NOTE: This section relates only to Online Services

Screen Size:

The biggest difference is the available screen real estate. The browser window that loads within Winamp is significantly smaller than a fullscreen stand alone browser window. To avoid horizontal scroll bars from appearing by default, the page grid size that designers and web page creators should target for is 660p wide (see image below).

Once a web page detects that its being loaded within Winamp, its recommended that the page modifies its CSS to accommodate the smaller dimensions (or redirect to a alternate web page that is specifically optimized to render in Winamp).

File:Winamp Client Browser Default Page Grid.png


Access to Online Services API's:

Your web page is now inside of the Winamp media player, make the experience contextually relevant to Winamp's media centric users by leveraging the Online Servcies API's.

For example, you might want to use the Skins API to adjust the colors of your service to blend with active color palatte of the users client. If you have on-demand media, you can use the Transport API to have Winamp natively control the playback of streaming audio/video.

The screenshot below is highlighting an example of a website using the Transport API to fetch metadata for the users currently playing asset and automatically programming a relevant experience based on that metadata.

File:Example Use of Online Serivces API.png

How can I unit test how my web page looks and performs within Winamp?

1) Online Services

Winamp provides a web developer plugin to help you unit test your web page inside of the Winamp client. You can download it here.

Basically this plugin works very similarly to the Online Services node in the Media library, but allows you to create "test services" with parameters you specify. The plugin also makes available a test page for our Online Services APIs.

To use it, you'd just install the latest publically available Winamp Client, version 5.56+ (http://www.winamp.com/player/ if you don't have it already), then run the installer for the web developer plugin (wa_webdev.exe). Note: Winamp.exe should be closed when you install the web developer plugin.

Once you've installed it, launch Winamp and you'll see a "WebDev Platform" item in your Media Library on the bottom left (see example image below).

File:Wa webdev.png

The area to the right has the embedded browsing experience, where the online service would be loaded, When you click on the WebDev Platform, you'll see a web page that has links to both the "JSAPI2 Test Page" which shows simple examples of available Winamp Javascript API calls, and a "Create Your Own Service" link, which allows you to enter a URL and title, and create a sub-node under the WebDev Platform Item (see image below).

Here is where you should enter the url of the web page you'd like to unit test (you can load a local file path or hosted url). Don't worry about the service ID or Icon fields. After you hit save, a sub-node under the WebDev Platform item will be created and it will behave exactly as your online service would.

File:Create Test Service2.png

2) Bento Browser

Unit testing your web page inside of the Bento browser is very easy. Just run a recent version of Winamp and click on the Bento browser and enter the url of the web page you'd like to test (see image below). It's important to note that the Bento browser inside of the Winamp client is not where an online service would load, and does not give a webpage access to the JSAPI functions.

File:Browser test.png