音乐资讯-灯饰资讯-房产资讯 -教育资讯-小说 -人工智能 -影视头条-文化资讯-健康资讯-电子资讯 -时尚资讯-更多

当前位置:首页 >> 站长资讯 >> 正文

网页FLASH播放利器 - JW Player使用心得

2020-05-23 03:03:25  来源:双辽生活网  

序言

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

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

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,下载地址:

废话到此为止,现在开始主题。令人振奋的是,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 plaincopy
  1. <scriptsrc="js/jquery/jquery-1.6.2.js"type="text/javascript"></script>
  2. <scriptsrc="js/plugins/mediaplayer-5.7/jwplayer.js"type="text/javascript"></script>

2. html结构如下

[html]view plaincopy
  1. <divid="container"></div>
  2. <inputtype="button"class="player-play"value="播放"/>
  3. <inputtype="button"class="player-stop"value="停止"/>
  4. <inputtype="button"class="player-status"value="取得状态"/>
  5. <inputtype="button"class="player-current"value="当前播放秒数"/>
  6. <inputtype="button"class="player-goto"value="转到第30秒播放"/>
  7. <inputtype="button"class="player-length"value="视频时长(秒)"/>

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

[html]view plaincopy
  1. <scripttype="text/javascript">
  2. varthePlayer;//保存当前播放器以便操作
  3. $(function(){
  4. thePlayer=jwplayer('container').setup({
  5. flashplayer:'js/plugins/mediaplayer-5.7/player.swf',
  6. file:'js/plugins/mediaplayer-5.7/video.mp4',
  7. width:500,
  8. height:350,
  9. dock:false
  10. });
  11. //播放暂停
  12. $('.player-play').click(function(){
  13. if(thePlayer.getState()!='PLAYING'){
  14. thePlayer.play(true);
  15. this.value='暂停';
  16. }else{
  17. thePlayer.play(false);
  18. this.value='播放';
  19. }
  20. });
  21. //停止
  22. $('.player-stop').click(function(){thePlayer.stop();});
  23. //获取状态
  24. $('.player-status').click(function(){
  25. varstate=thePlayer.getState();
  26. varmsg;
  27. switch(state){
  28. case'BUFFERING':
  29. msg='加载中';
  30. break;
  31. case'PLAYING':
  32. msg='正在播放';
  33. break;
  34. case'PAUSED':
  35. msg='暂停';
  36. break;
  37. case'IDLE':
  38. msg='停止';
  39. break;
  40. }
  41. alert(msg);
  42. });
  43. //获取播放进度
  44. $('.player-current').click(function(){alert(thePlayer.getPosition());});
  45. //跳转到指定位置播放
  46. $('.player-goto').click(function(){
  47. if(thePlayer.getState()!='PLAYING'){//若当前未播放,先启动播放器
  48. thePlayer.play();
  49. }
  50. thePlayer.seek(30);//从指定位置开始播放(单位:秒)
  51. });
  52. //获取视频长度
  53. $('.player-length').click(function(){alert(thePlayer.getDuration());});
  54. });
  55. </script>

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