如何实现嵌入式自定义播放器界面

Question

由很多的 在线影院都是自定义的 界面 ，很漂亮功能也齐全。就像
http://sports.sina.com.cn/c/2005-12-15/19001937956.shtml
这个一样实现自定义播放停止等按钮的样式 ，怎么实现的。最好用js＋html

Answer 1

各种网页媒体播放器代码及详解
<object id="player" height="64" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> 
    <param NAME="AutoStart" VALUE="-1"> 
    <!--是否自动播放--> 
    <param NAME="Balance" VALUE="0"> 
    <!--调整左右声道平衡,同上面旧播放器代码--> 
    <param name="enabled" value="-1"> 
    <!--播放器是否可人为控制--> 
    <param NAME="EnableContextMenu" VALUE="-1"> 
    <!--是否启用上下文菜单--> 
    <param NAME="url" VALUE="http://download.xaonline.com/music/huangpy/lover/HPY01.wma"> 
    <!--播放的文件地址--> 
    <param NAME="PlayCount" VALUE="1"> 
    <!--播放次数控制,为整数--> 
    <param name="rate" value="1"> 
    <!--播放速率控制,1为正常,允许小数,1.0-2.0--> 
    <param name="currentPosition" value="0"> 
    <!--控件设置:当前位置--> 
    <param name="currentMarker" value="0"> 
    <!--控件设置:当前标记--> 
    <param name="defaultFrame" value=""> 
    <!--显示默认框架--> 
    <param name="invokeURLs" value="0"> 
    <!--脚本命令设置:是否调用URL--> 
    <param name="baseURL" value=""> 
    <!--脚本命令设置:被调用的URL--> 
    <param name="stretchToFit" value="0"> 
    <!--是否按比例伸展--> 
    <param name="volume" value="50"> 
    <!--默认声音大小0%-100%,50则为50%--> 
    <param name="mute" value="0"> 
    <!--是否静音--> 
    <param name="uiMode" value="mini"> 
    <!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示--> 
    <param name="windowlessVideo" value="0"> 
    <!--如果是0可以允许全屏,否则只能在窗口中查看--> 
    <param name="fullScreen" value="0"> 
    <!--开始播放是否自动全屏--> 
    <param name="enableErrorDialogs" value="-1"> 
    <!--是否启用错误提示报告--> 
    <param name="SAMIStyle" value> 
    <!--SAMI样式--> 
    <param name="SAMILang" value> 
    <!--SAMI语言--> 
    <param name="SAMIFilename" value> 
    <!--字幕ID--> 
</object> 
1.avi格式 <object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="1">
<param name="AutoStart" value="1">
<param name="AutoRewind" value="0">
<param name="PlayCount" value="0">
<param name="Appearance value="0 value=""">
<param name="BorderStyle value="0 value=""">
<param name="MovieWindowHeight" value="240">
<param name="MovieWindowWidth" value="320">
<param name="FileName" value="file:///D|/work/vod/Mbar.avi">
<embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" autostart="1" autorewind="0" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="file:///D|/work/vod/Mbar.avi" src="Mbar.avi">
</embed> 
</object>2.mpg格式 <object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250">
<param name="Appearance" value="0">
<param name="AutoStart" value="-1">
<param name="AllowChangeDisplayMode" value="-1">
<param name="AllowHideDisplay" value="0">
<param name="AllowHideControls" value="-1">
<param name="AutoRewind" value="-1">
<param name="Balance" value="0">
<param name="CurrentPosition" value="0">
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableSelectionControls" value="0">
<param name="EnableTracker" value="-1">
<param name="Filename" value="../../../mpeg/halali.mpg" valuetype="ref">
<param name="FullScreenMode" value="0">
<param name="MovieWindowSize" value="0">
<param name="PlayCount" value="1">
<param name="Rate" value="1">
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="ShowControls" value="-1">
<param name="ShowDisplay" value="-1">
<param name="ShowPositionControls" value="0">
<param name="ShowTracker" value="-1">
<param name="Volume" value="-480">
</object>
3.smi格式 <OBJECT id=RVOCX classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA width=240 
height=180>
<param name="_ExtentX" value="6350">
<param name="_ExtentY" value="4763">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="rm.rm">
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="console1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000"><embed src="real.smi" type="audio/x-pn-realaudio-plugin" console="Console1" controls="ImageWindow" height="180" width="240" autostart="true"></OBJECT>4.rm格式 <OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=288 WIDTH=352><param name="_ExtentX" value="9313">
<param name="_ExtentY" value="7620">
<param name="AUTOSTART" value="0">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="SRC" value="rtsp://203.207.131.35/vod/dawan-a.rm";>
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="Clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000"><embed SRC type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ImageWindow" HEIGHT="288" WIDTH="352" AUTOSTART="false"></OBJECT>5.wmv格式<object id="NSPlay" width=200 height=180 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" align="right" hspace="5">
<param name="AutoRewind" value=1>
<param name="FileName" value="xxxxxx.wmv">
<param name="ShowControls" value="1">
<param name="ShowPositionControls" value="0">
<param name="ShowAudioControls" value="1">
<param name="ShowTracker" value="0">
<param name="ShowDisplay" value="0">
<param name="ShowStatusBar" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowCaptioning" value="0">
<param name="AutoStart" value=1>
<param name="Volume" value="-2500">
<param name="AnimationAtStart" value="0">
<param name="TransparentAtStart" value="0">
<param name="AllowChangeDisplaySize" value="0">
<param name="AllowScan" value="0">
<param name="EnableContextMenu" value="0">
<param name="ClickToPlay" value="0">
</object>

Answer 2

----------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>hotmy免费电影</TITLE>
<SCRIPT language=javascript src="hotmy/host19-2.js"></SCRIPT><META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2769" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#000000 leftMargin=0 topMargin=0>
<SCRIPT language=JAVASCRIPT>
var where = document.referrer</SCRIPT>
<!-- ImageReady Slices (zhuye2-4-1.psd) -->
<TABLE width=538 border=0 align="center" cellPadding=0 cellSpacing=0>
  <TBODY>
  <TR>
    <TD><IMG height=38 src="hotmy/vod_01.gif" width=41></TD>
    <TD vAlign=top colSpan=3></TD>
    <TD colSpan=3><IMG height=38 src="hotmy/vod_03.gif" 
width=41></TD>
    <TD><IMG height=38 src="hotmy/Spacer.gif" width=1></TD></TR>
  <TR>
    <TD><IMG height=345 src="hotmy/vod_04.gif" width=41></TD>
    
    <TD colSpan=3><TD align=middle colSpan=3>
<layer id=Layer1 
                                z-index="1" >
      <DIV id=video 
      style="LEFT: 42px; VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 30px; HEIGHT: 200px">
      <SCRIPT language=javaScript>              
var ERR_NonePlayer="提示您:您的系统中没有安装Real Player播放器，请在主页上下载。\n\nMovie播放器将关闭。";
var ERR_FileNotFind="提示您:在线用户过多，服务器限制，请抢线或稍后观看！";
var ERR_NotLocateServer="提示您:服务器地址不存在或者正在重启，请5分钟后收看！";
var ERR_UnkownError="提示您:在线用户过多，服务器限制，请抢线或稍后观看！";
 </SCRIPT>
<SCRIPT language=VBScript>
on error resume next
RealPlayerG2 = (NOT IsNull(CreateObject("rmocx.RealPlayer G2 Control")))); 
RealPlayer5 = (NOT IsNull(CreateObject("RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)")))
RealPlayer4 = (NOT IsNull(CreateObject("RealVideo.RealVideo(tm) ActiveX Control (32-bit)")))
if not RealPlayerG2 and RealPlayer5 and RealPlayer4 then
if MsgBox("您的浏览器无法自动下载最新的浏览器插件，是否要下载播放器来播放？", vbYesNo) = vbYes then
window.location = "http://www.hotmy.com"
end if
end ifSub player_OnBuffering(lFlags,lPercentage)
if (lPercentage=100) then
StartPlay=false
if (FirstPlay) then
FirstPlay=false
end if
exit sub
end if
End Sub
Sub player_OnErrorMessage(uSeverity, uRMACode, uUserCode, pUserString, pMoreInfoURL, pErrorString)
select case player.GetLastErrorRMACode()
case -2147221496
window.alert(ERR_FileNotFind)
case -2147221433,-2147221428,-2147221417,-2147217468
window.alert(ERR_NotLocateServer)
case else
window.alert(ERR_UnkownError)
end select
End Sub
</SCRIPT>      <P align=center>
<OBJECT id=player height=313 width=460 classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA name=player>
  <PARAM NAME="_ExtentX" VALUE="12171">
  <PARAM NAME="_ExtentY" VALUE="8281">
  <PARAM NAME="AUTOSTART" VALUE="-1">
  <PARAM NAME="SHUFFLE" VALUE="0">
  <PARAM NAME="PREFETCH" VALUE="0">
  <PARAM NAME="NOLABELS" VALUE="-1">
  <PARAM NAME="SRC" VALUE="play.MPG">
  <PARAM NAME="CONTROLS" VALUE="Imagewindow">
  <PARAM NAME="CONSOLE" VALUE="clip1">
  <PARAM NAME="LOOP" VALUE="0">
  <PARAM NAME="NUMLOOP" VALUE="0">
  <PARAM NAME="CENTER" VALUE="0">
  <PARAM NAME="MAINTAINASPECT" VALUE="0">
  <PARAM NAME="BACKGROUNDCOLOR" VALUE="#000000">
  <embed src width="313" height="460" autostart="-1" loop="0" _extentx="9869" _extenty="7726" shuffle="0" prefetch="0" nolabels="-1" controls="Imagewindow" console="clip1" numloop="0" center="0" maintainaspect="0" backgroundcolor="#000000" name="player"><!-- 必须的播放窗口-->
</OBJECT>
<SCRIPT language=javascript>
player.SetEnableContextMenu(false);
player.SetWantErrors(true);
</SCRIPT>
<EMBED name=slider  width=460 height=20 type=audio/x-pn-realaudio-plugin controls="statusbar"    reset="false" console="clip1"><!-- 状态条-->
<EMBED name=status width=460 height=20  type=audio/x-pn-realaudio-plugin controls="PositionSlider"   autostart="true" reset="false" console="clip1"><!--进度条-->       </P></DIV>
   </layer>      </TD></TD>
    <TD><IMG height=345 src="hotmy/Spacer.gif" width=1></TD></TR>
  <TR>
    <TD rowSpan=5><IMG height=99 src="hotmy/vod_07.gif" 
width=41></TD>
    <TD colSpan=3><IMG height=23 src="hotmy/vod_08.gif" 
    width=460></TD>
    <TD colSpan=3 rowSpan=2><IMG height=56 src="hotmy/vod_09.gif" 
      width=41></TD>
    <TD><IMG height=23 src="hotmy/Spacer.gif" width=1></TD></TR>
  <TR>
    <TD rowSpan=4><IMG height=76 src="hotmy/vod_10.gif" 
    width=122></TD>
    <TD rowSpan=2><IMG height=42 src="hotmy/vod_11.gif" width=217 
      useMap=#Map border=0></TD>
    <TD rowSpan=4><IMG height=76 src="hotmy/vod_12.gif" 
    width=120></TD>
    <TD><IMG height=33 src="hotmy/Spacer.gif" width=1></TD></TR>
  <TR>
    <TD rowSpan=3><IMG height=43 src="hotmy/vod_13.gif" width=7></TD>
    <TD rowSpan=2><A href="javascript:"><IMG 
      onclick=document.player.SetFullScreen() height=27 
      src="hotmy/vod_14.gif" width=27 border=0></A></TD>
    <TD rowSpan=3><IMG height=43 src="hotmy/vod_15.gif" width=7></TD>
    <TD><IMG height=9 src="hotmy/Spacer.gif" width=1></TD></TR>
  <TR>
    <TD rowSpan=2><IMG height=34 src="hotmy/vod_16.gif" 
    width=217></TD>
    <TD><IMG height=18 src="hotmy/Spacer.gif" width=1></TD></TR>
  <TR>
    <TD><IMG height=16 src="hotmy/vod_17.gif" width=27></TD>
<TD><IMG height=16 src="hotmy/Spacer.gif" 
width=1></TD></TR></TBODY></TABLE><!-- End ImageReady Slices --><MAP 
  name=Map><AREA onclick=document.player.DoPlay() shape=POLY 
  coords=7,6,28,6,28,28,7,25 href="javascript:"><AREA 
  onclick=document.player.DoPause() shape=POLY coords=44,6,66,6,66,34,44,32 
  href="javascript:"><AREA onclick=document.player.DoStop() shape=POLY 
  coords=80,6,104,6,104,34,80,34 href="javascript:"></MAP>
<P></P></BODY></HTML>

Answer 3

声音调节 js+html 怎么 实现