Ice: outputmedia Enhancement

When I first discovered the ice: outputmedia tag, I was full of praise for it. Indeed, with this tag, you can easily use flash player, Media Player, real play, and quick time on webpages. Then, I used it to play audio files on my website. Soon, the problem was revealed:
1) No control commands are provided, for example, stop playing or start playing.
2) When flash is used, MP3 files cannot be played and SWF files can only be played.
3) You cannot know when the audio file is played, which is necessary for continuous file playback on the website.
4) Of course, ice: outputmedia has a good advantage, that is, when I update its source attribute value to another audio file path, it starts playing other files. However, this also brings about the fourth drawback. in IE, if the old file has not been played, it will continue to play, and the user will hear the new and old files playing at the same time.

Ice: outputmedia is still very basic. To expand it, you must first understand the code it generates. Let's first generate a test project T1 Based on netbeans6.7.1's icefaces1.8.1 and facelets. For the order of creation, see the following:

Extended Control over Windows Media Player playing mp3 songs in Firefox

Now let's test the Media Player support of ice: outputmedia. Add the following code to the welcomeicefaces.xhtml file:

Then, we use the Wizard to create a testbean class and have the soudfilepath attribute.
/*
* To change this template, choose tools | templates
* And open the template in the editor.
*/

/**
*
* @ Author Administrator
*/

Public class testbean {

/** Creates a new instance of testbean */
Public testbean (){
}

Private string soundfilepath;

/**
* @ Return the soundfilepath
*/
Public String getsoundfilepath (){
Return soundfilepath;
}

/**
* @ Param soundfilepath the soundfilepath to set
*/
Public void setsoundfilepath (string soundfilepath ){
This. soundfilepath = soundfilepath;
}

}

Now, upload an mp3song file named 1.mp3 and put it in the build/web directory of the netbeans project. Set soundfilepathto 1.mp3. Due to browser behavior differences, we first use firefox3.5 to check (which browser can be set in netbeans ). The running effect is as follows:

Note: You may not be able to play firefox3.5 on windows. You need to install a plug-in called mediawrap. Next, let's take a look at the code generated by ice: outputmedia. Because the Javascript debugger of netbeans6.7.1 is invalid for our project, you must first install the firebug plug-in on Firefox. After installation, there will be a worm icon in the lower right corner of Firefox. Click it and the following window will appear:

Find out the generated code as follows:

The original embed HTML Tag is used.

Added MP3 control under firefox3.5

Now we need to get the object representing media player, and then control it to stop playing and start playing. Add two buttons and add the corresponding JavaScript function. Add JavaScript Functions to the head Tag:

F1: M0 indicates that the ice: Form ID is F1, while the ice: outputmedia ID is M0. The first letter of the STOP and play methods can also be big, but the first letter of the controls must be lowercase.

The remaining code is as follows:

The following resources are official references of Microsoft and are helpful for you to fully understand media player.

Http://msdn.microsoft.com/en-us/library/dd564583%28VS.85%29.aspx

I tried to set the mimetype attribute of ice: outputmedia to "application/X-MS-WMP", but in my example, the generated result is still type = "application/x-mplayer2 ".

Listen to the playback stop event under firefox3.5

Add the following code:

The running effect is as follows:

The running status is a number. For more information, see http://msdn.microsoft.com/en-us/library/dd564085%28VS.85%29.aspx.

So far, I have been able to control the method of the player. Controls object and handle the statechange event of the player. Basically met my requirements. Next, let's take a look at the differences in IE browser.

Control in ie6.0

Javascript script execution error. The object returned by fngetmedia is null. The main reason is that IE needs to use object and classid to represent ActiveX controls. Microsoft is always reluctant to fully abide by web standards. At this time, the HTML code generated by ice: outputmedia is different from the previous one, as shown below:

In this case, the p obtained by var p = Document. getelementbyid ("F1: M0") in the fngetmedia function is the player. Controls object. Therefore, you only need to return directly. Now, modify the code so that the function can adapt to IE and Firefox browsers.
Function fngetmedia (){
VaR player = Document. getelementbyid ("F1: M0 ");
If (player = NULL)
Return NULL;
If (player. controls! = NULL ){
Return player. controls;
} Else {
Return player;
}
}

In line with the trend, do not judge the browser, but determine whether the current browser supports the required functions. Because there are too many browsers (hundreds of types), there is no way to judge them. Fortunately, except Microsoft's IE, most other mainstream browsers are close to web standards.

Handle events in ie6.0

The event function in Firefox needs to be modified to the following format:

One thing worth noting is that the same event may call a function multiple times. The event function must prevent errors caused by such events. A better method is to save the event type to a hidden tag each time. If the event type received next time is the same as the eventtype of the previous time, it indicates that the event type is repeated and can be ignored, only different values are valid.

Supports both ie6.0 and Firefox Event processing mechanisms

This is very simple. You just need to write down the two event handlers. The following code: