JW Player 网页视频媒体播放插件_网面流媒体播放插件-CSDN博客

转载： http://blog.csdn.net/tomysea/article/details/6685553

序言

前段时间在做一个网站项目，要求能在线播放视频、音乐，这个以前还真没接触过。恰好今天在坛子里闲逛时，发现有同志对这方面也感兴趣，遂把这些整理了下，同时自己也可以复习下。

播放器需要满足以下需求：

1. 支持所有主流浏览器

2. 能与播放器交互，播放器必须提供必要的API

3. 可定制外观，方便后期扩展

4. 支持flv、mp3、mp4格式，支持播放列表

5. 详尽的帮助文档说明，方便开发者使用

需求就是一切，咱没条件只好硬着头皮创建条件强上了～～～。于是疯狂百度Google，发现了很多第三方播放器。由于咱E文实在不咋地，一开始想找个国内的。可是，找来找去，发现都是要收费的。于是只好走上不爱国之路，只能找一个国外的了。在搜索中，综合前辈们的意见，最终选择了JW Player。搜索国外资源还是Google给力啊，不管你信不信，反正我是信了：）。

JW Player是一款非常优秀的网页媒体播放器，支持H.264 ( .mp4, .mov, .f4v )、FLV ( .flv ) 、3GPP ( .3gp, .3g2 )、OGG Theora ( .ogv )和WebM ( .webm )视频格式，MP3 ( .mp3 )、AAC ( .aac, .m4a )、OGG Vorbis ( .ogg )和WAV ( .wav )音频，同时也支持swf和图片( gif 、jpg、png)和YouTube格式视频。

支持HTML5，有着非常丰富的插件可用（部分是收费的，如广告插件）。

JW Player的最新版是5.7，官方网址：http://www.longtailvideo.com/players/jw-flv-player/?search=Playlist

废话到此为止，现在开始主题。令人振奋的是，JW Player使用起来非常方便，下面就探讨一下JW Player的基本用法。

第一步从官网下载最新的播放器

以上两个选项不选，Viral是JW Player的一个插件，做视频分享用的，需不需要自己看着办。输入邮箱即可下载。

下载完成后，解压出来有8个文件，如下图：

jwplayer.js和player.swf是核心文件，必须引入这两个文件。

JW Player Quick Start Guide.pdf是帮助文档，里面讲的也比较详细了。

第二步体验JW Player（基本用法）

1. 在页面head区域引用必要的js文件（本人习惯用jQuery，故引入了，使用其它框架的自行更改该部分）

[html] view plain copy print ?

<script src="js/jquery/jquery-1.6.2.js" type="text/javascript"></script>
<script src="js/plugins/mediaplayer-5.7/jwplayer.js" type="text/javascript"></script>

    <script src="js/jquery/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="js/plugins/mediaplayer-5.7/jwplayer.js" type="text/javascript"></script>

2. html结构如下

[html] view plain copy print ?

<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="视频时长(秒)" />

    <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="视频时长(秒)" />

3. 初始化播放器，完成控制逻辑

[html] view plain copy print ?

<script type="text/javascript">
var thePlayer; //保存当前播放器以便操作
$(function() {
thePlayer = jwplayer('container').setup({
flashplayer: 'js/plugins/mediaplayer-5.7/player.swf',
file: 'js/plugins/mediaplayer-5.7/video.mp4',
width: 500,
height: 350,
dock: false
});
//播放暂停
$('.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>

    <script type="text/javascript">
        var thePlayer;  //保存当前播放器以便操作
        $(function() {
            thePlayer = jwplayer('container').setup({
                flashplayer: 'js/plugins/mediaplayer-5.7/player.swf',
                file: 'js/plugins/mediaplayer-5.7/video.mp4',
                width: 500,
                height: 350,
                dock: false
            });
            
            //播放 暂停
            $('.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>

到此完成，接下来运行网页就可以看到效果了。以下是一个截图：