Supports mp3, flv, wmv, and Flash playback on webpages. The code is compatible with FireFox.

A project on hand needs to play mp3 audio and FLV and WMV Video files. After finding a lot of information on the Internet, we found that they all call the player that comes with the system, and many cannot be called normally. After continuous debugging and exploration, I finally solved all the problems and achieved satisfactory results !~

1. Playback of mp3 audio files

Normally, it should be a player that calls the system's self-return, but considering the simplicity of the Code and the maximum compatibility with the system, I used the webpage multimedia player provided by Google Reader, it is actually a Flash file. If you don't want to write additional code, call it directly.

View plaincopy to clipboardprint?
<Embed height = "400px" width = "300px" name = "gPlayer" src = "http://www.google.com/reader/ui/3247397568-audio-player.swf? AudioUrl=yourMp3Addr.mp3 "type =" application/x-shockwave-flash "/>
<Embed height = "400px" width = "300px" name = "gPlayer" src = "http://www.google.com/reader/ui/3247397568-audio-player.swf? AudioUrl=yourMp3Addr.mp3 "type =" application/x-shockwave-flash "/>

Yourmp3addr3is the address of the mp3 file. However, I downloaded the swf file to my local project for performance and stability, access it directly using a relative address in the project. The final code used is as follows:
View plaincopy to clipboardprint?
Document. write ('<embedwidth = "' + (mediaWidth | 400) + 'px" height = "'+ (mediaHeight | 27) + 'px "name =" plugin "src =" '+ ctxPath +'/scripts/gPlayer.swf? AudioUrl = '+ mediaURL +' "type =" application/x-shockwave-flash "/> ');
Document. write ('<embedwidth = "' + (mediaWidth | 400) + 'px" height = "'+ (mediaHeight | 27) + 'px "name =" plugin "src =" '+ ctxPath +'/scripts/gPlayer.swf? AudioUrl = '+ mediaURL +' "type =" application/x-shockwave-flash "/> ');

I wrote a method call using JS to simplify the code and facilitate repeated calls. It is worth noting that this player can not only play mp3 audio files, but also flv video files, you only need to change the parameter name audioUrl to videoUrl, that is
Play mp3 audio files: audiourl1_yourmp3addr.mp3
Play the Flv video file: videoUrl = yourFlvAddr. flv
If you want to play the video automatically after loading, you only need to add the & autoPlay = true parameter to the address.
2. flv
Although the Google Reader player can play a video, its appearance style, player buttons, and image loading cannot be set. Therefore, another flvplayer is used: there are related use documents in the http://code.google.com/p/flvplayer/, specific how to see the documentation, my own call code is:

View plaincopy to clipboardprint?
Function flvPlayer (flv_path, ctxPath, flv_title, flvWidth, flvHeight ){
Flv_title = flv_title | "\ u70b9 \ u51fb \ u64ad \ u653e \ u89c6 \ u9891 ";
FlvWidth = flvWidth | 430;
FlvHeight = flvHeight | 380;

Var swfPath = ctxPath. concat ("/scripts/player_flv_maxi.swf ");

Document. write ('<object type = "application/x-shockwave-flash" data = "' + swfPath + '" width = "' + flvWidth + '" height = "' + flvHeight + '"> ');
Document. write ('<param name = "movie" value = "' + swfPath + '"/> ');
Document. write ('<param name = "allowFullScreen" value = "true"/> ');
Document. write ('<param name = "FlashVars" value = "flv =' + flv_path + '& title =' + flv_title + '& width =' + flvWidth + '& height =' + flvHeight + '& playercolor = 808094 & bgcolor1 = 9293a9 & bgcolor2 = 808094 & buttoncolor = dddddddd & buttonovercolor = Middle & Lower = dddddddd & Lower = cccccccc & sliderovercolor = Middle & loadingcolor = & showstop = 1 & showvolume = 1 & showtime = 1 & showfullscreen = 1 & srt = 1 "/> ');
Document. write ('</object> ');
}
Function flvPlayer (flv_path, ctxPath, flv_title, flvWidth, flvHeight ){
Flv_title = flv_title | "\ u70b9 \ u51fb \ u64ad \ u653e \ u89c6 \ u9891 ";
FlvWidth = flvWidth | 430;
FlvHeight = flvHeight | 380;
 
Var swfPath = ctxPath. concat ("/scripts/player_flv_maxi.swf ");
 
Document. write ('<objecttype = "application/x-shockwave-flash" data = "' + swfPath + '" width = "' + flvWidth + '" height = "' + flvHeight + '"> ');
Document. write ('<param name = "movie" value = "' + swfPath + '"/> ');
Document. write ('<param name = "allowFullScreen" value = "true"/> ');
Document. write ('<paramname = "FlashVars" value = "flv =' + flv_path + '& title =' + flv_title + '& width =' + flvWidth + '& height =' + flvHeight + '& playercolor = 808094 & bgcolor1 = 9293a9 & bgcolor2 = 808094 & buttoncolor = dddddddd & buttonovercolor = Hangzhou & Alibaba = dddddddd & Alibaba = cccccccc & sliderovercolor = Hangzhou & loadingcolor = ffff00 & showstop = 1 & showvolume = 1 & showtime = 1 & showfullscreen = 1 & srt = 1 "/> ');
Document. write ('</object> ');
}

3. wmv
I spent the longest time playing a wmv Video file, because it is very simple in IE. I can find a segment on the Internet and call the code of the built-in player in the system. But I want to be compatible with FireFox, so I tried and tested it constantly. Later I found a very BT thing. When I called the windows mediaplayer player that came with the system in FF, I got a border after loading it, there is nothing, but if the event places the player in a hidden div, after the system load is complete, the div will be displayed to play the file normally, main JS Code:

View plaincopy to clipboardprint?
Function mediaPlayer (mediaURL, ctxPath, mediaType, mediaTitle, mediaWidth, mediaHeight ){
If (...){
...
} Else {
Document. write ('<embed src = "' + mediaURL + '" mce_src = "' + mediaURL + '" style = "border: 1px solid #666; "type =" application/x-oleobject "classid =" CLSID: 22d6f312-b0f6-11d0-94ab-0080c74c7e95 "standby =" LoadingWindows Media Player components... "width =" '+ (mediaWidth | 430) +' "height =" '+ (mediaHeight | 380) + '"title ="' + (mediaTitle | '') + '" autostart = "false" loop = "1"/> ');
}
}
Function mediaPlayer (mediaURL, ctxPath, mediaType, mediaTitle, mediaWidth, mediaHeight ){
If (...){
...
} Else {
Document. write ('<embedsrc = "' + mediaURL + '" mce_src = "' + mediaURL + '" style = "border: 1 pxsolid #666; "type =" application/x-oleobject "classid =" CLSID: 22d6f312-b0f6-11d0-94ab-0080c74c7e95 "standby =" LoadingWindows Media Player components... "width =" '+ (mediaWidth | 430) +' "height =" '+ (mediaHeight | 380) + '"title ="' + (mediaTitle | '') + '" autostart = "false" loop = "1"/> ');
}
}

Generally, the windows media player comes with the calling system. There is no such thing as the page call code, as shown below:

View plaincopy to clipboardprint?
<Div id = "noFlvMedia" style = "display: none;" mce_style = "display: none;">
<Mce: script type = "text/javascript" src = "$ {ctx}/scripts/mediaPlayer. js "mce_src =" $ {ctx}/scripts/mediaPlayer. js "> </mce: script>
<Mce: script type = "text/javascript"> <! --
MediaPlayer ('$ {ctx}/$ {af. map. media_path}', '$ {af. map. media_name }');
// --> </Mce: script>
</Div>
<Div id = "noFlvMedia" style = "display: none;" mce_style = "display: none;">
<Mce: script type = "text/javascript" src = "$ {ctx}/scripts/mediaPlayer. js "mce_src =" $ {ctx}/scripts/mediaPlayer. js "> </mce: script>
<Mce: script type = "text/javascript"> <! --
MediaPlayer ('$ {ctx}/$ {af. map. media_path}', '$ {af. map. media_name }');
// --> </Mce: script>
</Div>

After the page is loaded, the div is displayed.

View plaincopy to clipboardprint?
Var noFlvMedia = document. getElementById ("noFlvMedia ");
If (null! = NoFlvMedia ){
NoFlvMedia. style. display = '';
}
Var noFlvMedia = document. getElementById ("noFlvMedia ");
If (null! = NoFlvMedia ){
NoFlvMedia. style. display = '';
}

Although calling the Player provided by the system has some limitations, at least the normal playback function has been realized in most systems.

4. flash
There is nothing to say. paste the Code directly:

View plaincopy to clipboardprint?
Function flashPlayer (flash_path, swfWidth, swfHeight ){
Document. write ('<object type = "application/x-shockwave-flash" data = "' + flash_path + '" width = "' + swfWidth + '" height = "' + swfHeight + '"id =" flashPlayer "> ');
Document. write ('<param name = "movie" value = "' + flash_path + '"/> ');
Document. write ('<param name = "allowScriptAcess" value = "sameDomain"/> ');

Document. write ('<param name = "menu" value = "false"/> ');
Document. write ('<param name = "wmode" value = "opaque"/> ');

Document. write ('<param name = "quality" value = "best"/> ');
Document. write ('<param name = "bgcolor" value = "# F0F0F0"/> ');
Document. write ('<param name = "scale" value = "noScale"/> ');
Document. write ('</object> ');
}
Function flashPlayer (flash_path, swfWidth, swfHeight ){
Document. write ('<objecttype = "application/x-shockwave-flash" data = "' + flash_path + '" width = "' + swfWidth + '" height = "' + swfHeight + '"id =" flashPlayer "> ');
Document. write ('<param name = "movie" value = "' + flash_path + '"/> ');
Document. write ('<param name = "allowScriptAcess" value = "sameDomain"/> ');
 
Document. write ('<param name = "menu" value = "false"/> ');
Document. write ('<param name = "wmode" value = "opaque"/> ');
 
Document. write ('<param name = "quality" value = "best"/> ');
Document. write ('<param name = "bgcolor" value = "# F0F0F0"/> ');
Document. write ('<param name = "scale" value = "noScale"/> ');
Document. write ('</object> ');
}