java jsp html嵌入视频播放器

http://cwalet.iteye.com/blog/1026459

在最近一个项目中需要简单的流媒体视频播放，经过一番搜索后找到一些合适的播放器及代码，在此记录并分享给大家。

由于仅需播放一些简单的格式因此不需要视频解码服务器。



1.播放rm、rmvb则需要vlc或real的支持，情况较复杂，一般客户端可能需要单独的播放插件，鉴于这个原因，因此没有在项目中使用。



2.播放swf、avi、wmv、mp3可以使用wmp(Windows Media Player)播放，只要是windows客户端都可以。

播放代码如下：(注意播放地址替换成实际地址或jsp代码)



Js代码 复制代码 收藏代码
1.<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
2.    codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,1,5,217" 
3.    id="MediaPlayer" type=application/x-oleobject width="560" height="360" 
4.    standby="Loading Microsoft Windows Media Player components..." 
5.    VIEWASTEXT align="middle"> 
6.    <!--播放的文件地址--> 
7.    <param name="Filename" value="视频地址，可以使用相对路径" valuetype="ref" /> 
8.    <!--是否自动调整播放大小--> 
9.    <param name="AutoSize" value="0" /> 
10.    <!--是否自动播放--> 
11.    <param name="AutoStart" value="1" /> 
12.    <param name="AudioStream" value="-1" /> 
13.    <param name="AnimationAtStart" value="0" /> 
14.    <param name="AllowScan" value="-1" /> 
15.    <param name="BaseURL" value="" /> 
16.    <param name="AllowChangeDisplaySize" value="0" /> 
17.    <param name="AutoRewind" value="0" /> 
18.    <!--左右声道平衡,最左-9640,最右9640--> 
19.    <param name="Balance" value="0" /> 
20.    <!--缓冲时间--> 
21.    <param name="BufferingTime" value="5" /> 
22.    <param name="CaptioningID" value="" /> 
23.    <param name="ClickToPlay" value="0" /> 
24.    <param name="CursorType" value="32512" /> 
25.    <!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0--> 
26.    <param name="CurrentPosition" value="-1" /> 
27.    <param name="CurrentMarker" value="0" /> 
28.    <param name="DefaultFrame" value="1" /> 
29.    <param name="DisplayBackColor" value="0" /> 
30.    <param name="DisplayForeColor" value="16777215" /> 
31.    <param name="DisplayMode" value="0" /> 
32.    <!--视频1-50%, 0-100%, 2-200%,3-全屏 其它的值作0处理,小数则采用四舍五入然后按前的处理--> 
33.    <param name="DisplaySize" value="0" /> 
34.    <param name="Enabled" value="-1" /> 
35.    <!-- 是否用右键弹出菜单控制--> 
36.    <param name="EnableContextMenu" value="-1" /> 
37.    <param name="EnablePositionControls" value="0" /> 
38.    <param name="EnableFullScreenControls" value="0" /> 
39.    <!--是否允许拉动播放进度条到任意地方播放--> 
40.    <param name="EnableTracker" value="1" /> 
41.    <param name="InvokeURLs" value="-1" /> 
42.    <param name="Language" value="-1" /> 
43.    <!--是否静音--> 
44.    <param name="Mute" value="0" /> 
45.    <!--重复播放次数,0为始终重复--> 
46.    <param name="PlayCount" value="1" /> 
47.    <param name="PreviewMode" value="0" /> 
48.    <!--播放速率控制,1为正常,允许小数--> 
49.    <param name="Rate" value="1" /> 
50.    <!--SAMI样式--> 
51.    <param name="SAMIStyle" value="" /> 
52.    <!--SAMI语言--> 
53.    <param name="SAMILang" value="" /> 
54.    <!--字幕ID--> 
55.    <param name="SAMIFilename" value="" /> 
56.    <!--是否显示字幕,为一块黑色,下面会有一大块黑色,一般不显示--> 
57.    <param name="ShowCaptioning" value="0" /> 
58.    <!--是否显示控制,比如播放,停止,暂停--> 
59.    <param name="ShowControls" value="-1" /> 
60.    <!--是否显示音量控制--> 
61.    <param name="ShowAudioControls" value="-1" /> 
62.    <!--显示节目信息,比如版权等--> 
63.    <param name="ShowDisplay" value="0" /> 
64.    <!--是否启用上下文菜单--> 
65.    <param name="ShowGotoBar" value="0" /> 
66.    <!--是否显示往前往后及列表,如果显示一般也都是灰色不可控制--> 
67.    <param name="ShowPositionControls" value="-1" /> 
68.    <!-- 默认是1 --> 
69.    <!--当前播放信息,显示是否正在播放,及总播放时间和当前播放到的时间--> 
70.    <param name="ShowStatusBar" value="-1" /> 
71.    <!-- 默认是1 --> 
72.    <!--是否显示当前播放跟踪条,即当前的播放进度条--> 
73.    <param name="ShowTracker" value="-1" /> 
74.    <!-- 默认是1 --> 
75.    <!--显示部的宽部,如果小于视频宽,则最小为视频宽,或者加大到指定值,并自动加大高度.此改变只改变四周的黑框大小,不改变视频大小--> 
76.    <param name="VideoBorderWidth" value="0" /> 
77.    <!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色--> 
78.    <param name="VideoBorderColor" value="0" /> 
79.    <!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640--> 
80.    <param name="Volume" value="-1070" /> 
81.    <!--如果是0可以允许全屏,否则只能在窗口中查看--> 
82.    <param name="WindowlessVideo" value="0" /> 
83.    <param name="TransparentAtStart" value="-1" /> 
84.    <!-- 默认是0 --> 
85.    <param name="VideoBorder3D" value="0" /> 
86.    <param name="SelectionStart" value="0" /> 
87.    <param name="SelectionEnd" value="true" /> 
88.    <param name="SendOpenStateChangeEvents" value="-1" /> 
89.    <param name="SendWarningEvents" value="-1" /> 
90.    <param name="SendErrorEvents" value="-1" /> 
91.    <param name="SendKeyboardEvents" value="0" /> 
92.    <param name="SendMouseClickEvents" value="0" /> 
93.    <param name="SendMouseMoveEvents" value="0" /> 
94.    <param name="SendPlayStateChangeEvents" value="-1" /> 
95.</object> 

   



3.播放flv、mp4、swf可以使用开源的网页flash播放器。

使用到的网页播放器有jaris、jwplayer、videobox，其实flowplayer、CuPlayerMiniV10酷播迷你、Flvplayer也都是不错的选择。由于jaris是开源免费的，推荐使用；此外jwplayer与酷播、flowplayer是闭源的因此在商业项目上应用的话需要通过授权或购买使用。

下载地址及demo实例代码如下：

http://jarisflvplayer.org/
http://videobox-lb.sourceforge.net/
http://www.longtailvideo.com/players/jw-flv-player/
http://flowplayer.org/
http://www.89525.com/FlvPlayer/



在实际使用中：

jaris与酷播、videobox(videoBox使用的播放器是外挂的flvplayer及wmp)均支持flv及mp4格式的播放，jwplayer除支持前两种格式外还支持swf及mp3格式的播放，可以说支持的格式最多也比较稳定。



界面ＵＩ方面：

jaris做的最好并且定制性最强(支持视频预览图片的添加及默认视频窗口的图片图换)，videoBox使用的jquery特效也不错，适于弹出播放的模式；jwplayer与flowplayer算是中规中矩，与一般的视频播放网站，如优库等UI类似，值得一提的是jwplayer提供了视频地址分享的功能，但是可定制性不强。此外，酷播的外挂广告等功能需要商业付费不在此讨论范围中。



在测试中：

酷播在IE浏览器中使用正常，但是在google及opera中可以加载flash播放器却无法播放视频，不知原因。



附录

1.jaris的播放代码：



Js代码 复制代码 收藏代码
1.<html> 
2.    <head> 
3.        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
4.        <script src="js/swfobject.js" type="text/javascript"></script> 
5.        <script type="text/javascript"> 
6.        var flashvarsVideo = { 
7.            source: "<%=path%>",/*视频地址,可以使用相对路径或绝对路径*/ 
8.            type: "video", 
9.            streamtype: "file", 
10.            server: "",/*Used for rtmp streams*/ 
11.            duration: "52", 
12.            poster: "http://jaris.sourceforge.net/images/poster.png",/*这里是视频预览图片*/ 
13.            autostart: "true",/*设置打开时是否自动播放*/ 
14.            logo: "http://jaris.sourceforge.net/images/logo.png",/*这里是播放器的logo,显示在左上角*/ 
15.            logoposition: "top left", 
16.            logoalpha: "30", 
17.            logowidth: "130", 
18.            logolink: "http://jaris.sourceforge.net", 
19.            hardwarescaling: "false", 
20.            darkcolor: "000000", 
21.            brightcolor: "4c4c4c", 
22.            controlcolor: "FFFFFF", 
23.            hovercolor: "67A8C1" 
24.        }; 
25.        var params = { 
26.            menu: "false", 
27.            scale: "noScale", 
28.            allowFullscreen: "true", 
29.            allowScriptAccess: "always", 
30.            bgcolor: "#000000", 
31.            quality: "high", 
32.            wmode: "opaque" 
33.        }; 
34.        var attributes = { 
35.            id:"JarisFLVPlayer" 
36.        }; 
37.        swfobject.embedSWF("JarisFLVPlayer.swf", "altContentOne", "576px", "360px", "10.0.0", "expressInstall.swf", flashvarsVideo, params, attributes); 
38.    </script> 
39.    </head> 
40.<body> 
41.<div id="altContentOne"><!--该ID指定播放器位置,不能更改--> 
42.    <p> 
43.        <a href="http://www.adobe.com/go/getflashplayer"> 
44.               <img src="<%=path%>images/topic/get_flash_player.gif" 
45.        alt="Get Adobe Flash player" /> </a> 
46.    </p> 
47.</div> 
48.</body></html> 

  
2.jwplayer的播放代码：



Js代码 复制代码 收藏代码
1.<object id="player"                              classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
2.name="player" height="360" width="560"> 
3.    <param name="movie" value="player.swf" /> 
4.    <param name="allowfullscreen" value="true" /> 
5.    <param name="allowscriptaccess" value="always" /> 
6.    <param name="flashvars" 
7.        value="file=视频地址&image=preview.jpg" /><!--preview.jpg为视频预览图片,推荐使用相对路径--> 
8.    <embed type="application/x-shockwave-flash" id="player2" 
9.    name="player2" src="player.swf" width="640" height="320" 
10.    allowscriptaccess="always" allowfullscreen="true" 
11.    flashvars="file=视频地址&image=preview.jpg" /> 
12.<!--该处视频地址及预览图片同上。在实际测试中如果只填写param中的视频地址,则在IE浏览器下可以正常播放,但是在chrome下将无法播放--> 
13.</object>