Web媒体播放工具-JW Player使用经验

2022-11-19 0 321



Web媒体播放工具-JW Player使用经验

 

前段时间我在做一个网站项目,需要在网上播放视频和音乐,之前我真的没有接触过。就在今天我在论坛里闲逛的时候,发现有同志对这方面也很感兴趣,我就整理了一下,同时也复习了一下。

 

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

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的基本用法。

步 从官网下载的播放器

Web媒体播放工具-JW Player使用经验

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

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

Web媒体播放工具-JW Player使用经验

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

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

第二步 体验JW Player(基本用法)

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

<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结构如下

<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. 初始化播放器,完成控制逻辑

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

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

Web媒体播放工具-JW Player使用经验

关于更详细的配置和说明文档,请参阅官方文档,说明非常详尽。

官方文档:http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论