jwplayer调用red5服务器接口

最新推荐文章于 2018-06-29 09:45:42 发布

henghengdh

最新推荐文章于 2018-06-29 09:45:42 发布

阅读量266

点赞数

分类专栏：流媒体文章标签：流媒体 red5 jwplayer

本文链接：https://blog.csdn.net/henghengdh/article/details/84544104

版权

流媒体专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[b]接上文（[url]http://henghengdh.iteye.com/blog/2039579[/url]），我们已经安装了red5服务器，但是oflaDemo提供的播放器功能太简单，还需要换成其他的播放器，并且我们也需要将播放器客服端放在我们的实际项目中，这里选择jwplayer，oflaDemo中也提供了这个播放器.[/b]

[b]1.首先下载jwplayer解压，将jwplayer.js和player.swf放到我们的实际项目中。[/b]

[b]2.在项目中新建一个jsp页面，如jwplayer.jsp，在页面中引入jquery.js和jwplayer.js，其他代码如下[/b]

<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>

[b]然后启动项目访问jwplayer.jsp，可以看到视频，如下图[/b]

[img]http://dl2.iteye.com/upload/attachment/0095/5901/8b01827a-9151-3222-9e3b-75f89b58a170.png[/img]

[b]3.上面我们把视频路径写死在了项目中，下面我们要连上之前安装的red5服务器，通过rtmp流的方式，所用的服务接口还是oflaDemo的接口。
新建一个jwplayer1.jsp页面，代码如下[/b]


<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>

[b]访问jwplayer1.jsp页面，可以看到如下图[/b]

[img]http://dl2.iteye.com/upload/attachment/0095/5915/a941777b-374e-3aaf-b81c-2f92c636fefc.png[/img]

[b]4.这里虽然连到了red5服务器，并且读取到了服务器上的视频资源，但是视频资源仍然是写死在页面中的，而且只有一个，没有播放列表，下面我们通过xml的方式把视频列表拿到，并且展示在页面上。
步骤很简单，只需将上面jwplayer.jsp页面中添加几个参数，代码如下[/b]

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>

[b]现在我们访问jwplayer.jsp页面，可以看到播放列表了，如下图[/b]
[img]http://dl2.iteye.com/upload/attachment/0095/5917/eee612c6-8d4f-3e5b-8aa2-1c3f2c8789fd.png[/img]

参考文档：http://www.longtailvideo.com/support/jw5/

henghengdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jwplayer调用red5服务器接口

[b]接上文（[url]http://henghengdh.iteye.com/blog/2039579[/url]），我们已经安装了red5服务器，但是oflaDemo提供的播放器功能太简单，还需要换成其他的播放器，并且我们也需要将播放器客服端放在我们的实际项目中，这里选择jwplayer，oflaDemo中也提供了这个播放器.[/b][b]1.首先下载jwplayer解压，将jwpla...
复制链接

扫一扫

专栏目录