接上文(http://henghengdh.iteye.com/blog/2039579),我们已经安装了red5服务器,但是oflaDemo提供的播放器功能太简单,还需要换成其他的播放器,并且我们也需要将播放器客服端放在我们的实际项目中,这里选择jwplayer,oflaDemo中也提供了这个播放器.
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/
- 大小: 35.8 KB
- 大小: 124.9 KB
- 大小: 144.9 KB
分享到:
相关推荐
JW Player是一个开源的在网页上使用的Flash视频、...2,5个宁皓网用jwplayer进行网页视频播放的例子 3,jwplayer-master---GitHub 4,jwplayer.v7.1.4+Key生成,资源说明https://www.52pojie.cn/thread-653729-1-1.html
jwplayer js版demo ,jwplayer.swf为破解版无水印,有jwplayer的参数详解,
JW Player是一个开源的在网页上使用的Flash视频、音频以及图片播放器,JW Player是由Jeroen 和 Wijering共同建立的LongTail Video所开发...2,5个宁皓网用jwplayer进行网页视频播放的例子 3,jwplayer-master---GitHub
JWPlayer源码
jwplayer网页视频播放器
如何编译jwplayer如何编译jwplayer如何编译jwplayer如何编译jwplayer
jwplayer skin,适合jwplayer5.1,其他版本需要修改xml
jwplayer 6.0 官方帮助文档
jwplayer-7.7播放器保证可用
jwplayer视频播放文件程序,放在服务器上运行,无法播放本地文件。修改playlist属性对应的文件路径。
jwplayer视频播放器
jwplayer Demo jwplayerDemo 视频播放 C#在线视频播放
jwplayer+demo网页播放推流视频,此文档在官网可下,但注册麻烦。demo自己改的,可以直接使用播放。 https://blog.csdn.net/weixin_40490238/article/details/82663519
jwplayer7的代码。。。。。。。。。。。。。。。。。。。。。
jwplayer6.12.0 已去水印,去logo.去右键.可直接使用.
jwplayer插件支持rtmp,利用ffmpeg推流,利用nginx搭建rtmp服务器
jwplayer6.12播放器去水印版,支持字幕和章节标记等,本人亲测
开源JWPLAYER播放器源代码下载,本人测试完全可以,很完整!
网页播放器jwplayer mp4 flv, 亲测可用,里面包含小视频!