jsp html嵌入式视频播放器



jsp html嵌入式视频播放器。在最近一个项目中需要简单的流媒体视频播放,经过一番搜索后找到一些合适的播放器及代码,在此记录并分享给大家。
由于仅需播放一些简单的格式因此不需要视频解码服务器。

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是闭源的因此在商业项目上应用的话

需要通过授权或购买使用。

在实际使用中:

jaris与酷播、videobox(videoBox使用的播放器是外挂的flvplayer及wmp)均支持flv及mp4格式的播放,jwplayer除支持

前两种格式外还支持swf及mp3格式的播放,可以说支持的格式最多也比较稳定。

界面UI方面:


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>

已经将java jsp html嵌入视频播放器的内容为大家分享完了,希望能够帮助到大家同时也希望大家能够喜欢。