jsp网页视频播放器

最新推荐文章于 2015-06-28 16:52:55 发布

原创最新推荐文章于 2015-06-28 16:52:55 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

工作心得专栏收录该内容

27 篇文章

订阅专栏

最近在做一个类似优酷在线播放的网站。视频上传部分已经解决，用的是structs2自带的上传组件，然后就开始做视频播放部分。参考了目前主流的视频网站，他们的视频基本上都是基于flv的，因为它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。

目前许多在线视频网站都采用此视频格式。如搜狐视频、新浪播客、六间房、56、优酷、酷6、土豆，youtube等。FLV已经成为当前视频文件的主流格式。

但是，选择使用哪种播放器却是一个问题。在网上查了一下，使用到的网页播放器有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格式的播放，可以说支持的格式最多也比较稳定。

界面UI方面：

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

在项目里，我使用的是 jaris。先去官方网站http://jarisflvplayer.org/ 下载播放器，

点击下载解压，进入bin目录，这一个自带的例子，但是我们需要修改一下才可以运行。

用记事本打开index.html，修改一下代码：

[html]view plaincopy 
    
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html>  
 <head>  
     <title>Jaris FLV Player</title>  
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
     <meta name="language" content="en" />  
     <meta name="description" content="" />  
     <meta name="keywords" content="" />  
       
     <script src="js/swfobject.js" type="text/javascript"></script>  
     <script type="text/javascript">  
         var flashvarsVideo = {  
             source: "videos/ad.mp4",//资源视频文件位置  
             type: "video",  
             streamtype: "file",  
             server: "",//Used for rtmp streams//用于流媒体  
             duration: "52",  
             poster:"images/as.png"//视频缩略图  
             autostart: "true",//是否自动播放  
             logo: "logo.png",//播放器页面，必须用到  
             logoposition: "top left",  
             logoalpha: "30",  
             logowidth: "130",  
             logolink: "http://jaris.sourceforge.net",  
             hardwarescaling: "false",  
             darkcolor: "000000",  
             brightcolor: "4c4c4c",  
             controlcolor: "FFFFFF",  
             hovercolor: "67A8C1"  
         };  
           
         var params = {//播放器控制参数  
             menu: "false",  
             scale: "noScale",  
             allowFullscreen: "true",  
             allowScriptAccess: "always",  
             bgcolor: "#000000",  
             quality: "high",  
             wmode: "opaque"  
         };  
         var attributes = {  
             id:"JarisFLVPlayer"  
         };  
         swfobject.embedSWF("JarisFLVPlayer.swf", "altContentOne", "576px", "360px", "10.0.0", "expressInstall.swf", flashvarsVideo, params, attributes);  
     </script>  
     <style>  
         html, body { height:100%; }  
         body { margin:0; }  
     </style>  
 </head>  
 <body>  
 <br />  
     <center>  
     <h1>Video Example</h1>  
     <div id="altContentOne">//视频播放  
         <h1>Jaris FLV Player</h1>  
         <p>Alternative content</p>  
         <p><a href="http://www.adobe.com/go/getflashplayer"><img   
             src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"   
             alt="Get Adobe Flash player" /></a></p>  
     </div>  
     </center>  
 </body>  
 </html>  