1.首先下载jwplayer解压,将jwplayer.js和player.swf放到我们的实际项目中。
2.在项目中新建一个jsp页面,如jwplayer.jsp,在页面中引入jquery.js和jwplayer.js,其他代码如下
<script type="text/javascript"> var thePlayer; //保存当前播放器以便操作 $(function() { thePlayer = jwplayer('container').setup({ flashplayer: 'plugins/jwplayer/player.swf', file:'moves/yeyan.flv', width: 720, height: 350, dock: false, 'playlist.position': 'right', 'playlist.size': '320' }); //播放 暂停 $('.player-play').click(function() { if (thePlayer.getState() != 'PLAYING') { thePlayer.play(true); this.value = '暂停'; } else { thePlayer.play(false); this.value = '播放'; } }); //停止 $('.player-stop').click(function() { thePlayer.stop(); }); //获取状态 $('.player-status').click(function() { var state = thePlayer.getState(); var msg; switch (state) { case 'BUFFERING': msg = '加载中'; break; case 'PLAYING': msg = '正在播放'; break; case 'PAUSED': msg = '暂停'; break; case 'IDLE': msg = '停止'; break; } alert(msg); }); //获取播放进度 $('.player-current').click(function() { alert(thePlayer.getPosition()); }); //跳转到指定位置播放 $('.player-goto').click(function() { if (thePlayer.getState() != 'PLAYING') { //若当前未播放,先启动播放器 thePlayer.play(); } thePlayer.seek(30); //从指定位置开始播放(单位:秒) }); //获取视频长度 $('.player-length').click(function() { alert(thePlayer.getDuration()); }); }); </script>
<body> <div id="container"></div> <input type="button" class="player-play" value="播放" /> <input type="button" class="player-stop" value="停止" /> <input type="button" class="player-status" value="取得状态" /> <input type="button" class="player-current" value="当前播放秒数" /> <input type="button" class="player-goto" value="转到第30秒播放" /> <input type="button" class="player-length" value="视频时长(秒)" /> </body>
然后启动项目访问jwplayer.jsp,可以看到视频,如下图
3.上面我们把视频路径写死在了项目中,下面我们要连上之前安装的red5服务器,通过rtmp流的方式,所用的服务接口还是oflaDemo的接口。
新建一个jwplayer1.jsp页面,代码如下
<script type="text/javascript" src="<%=basePath%>plugins/assets/swfobject.js"></script> <script type="text/javascript" src="<%=basePath%>plugins/jwplayer/player.swf"></script> <script type="text/javascript"> var flashvars = { file:'hobbit_vp6.flv', streamer:'rtmp://192.168.32.111/oflaDemo/' }; swfobject.embedSWF('plugins/jwplayer/player.swf','container','480','270','9.0.115','false', flashvars, {allowfullscreen:'true',allowscriptaccess:'always'}, {id:'jwplayer',name:'jwplayer'} ); </script>
<body> <div id='container'>The player will be placed here</div> </body>
访问jwplayer1.jsp页面,可以看到如下图
4.这里虽然连到了red5服务器,并且读取到了服务器上的视频资源,但是视频资源仍然是写死在页面中的,而且只有一个,没有播放列表,下面我们通过xml的方式把视频列表拿到,并且展示在页面上。
步骤很简单,只需将上面jwplayer.jsp页面中添加几个参数,代码如下
thePlayer = jwplayer('container').setup({ flashplayer: 'plugins/jwplayer/player.swf', file:'plugins/jwplayer/2.xml', width: 720, height: 350, dock: false, 'playlist.position': 'right', 'playlist.size': '320' });
其中的2.xml为列表格式,如下
<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/"> <channel> <title>Playlist with RTMP streams</title> <item> <title>霍比特人</title> <description>霍比特人预告片.</description> <enclosure url="hobbit_vp6.flv" type="video/flv" length="3192846" /> <jwplayer:streamer>rtmp://192.168.32.111/oflaDemo</jwplayer:streamer> </item> <item> <title>WE战队VS电信1明星队 WE双前行游走战术.flv</title> <description>WE战队VS电信1明星队 WE双前行游走战术.flv</description> <enclosure url="WE战队VS电信1明星队 WE双前行游走战术.flv" type="video/flv" length="3192846" /> <jwplayer:streamer>rtmp://192.168.32.111/oflaDemo</jwplayer:streamer> </item> </channel> </rss>
现在我们访问jwplayer.jsp页面,可以看到播放列表了,如下图
参考文档:http://www.longtailvideo.com/support/jw5/