序言

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

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

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,故引入了,使用其它框架的自行更改该部分)

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

 2. html结构如下

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

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

  1. <script type="text/javascript">
  2. var thePlayer;  //保存当前播放器以便操作
  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. var state = thePlayer.getState();
  26. var msg;
  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>

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

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

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

网页媒体播放利器 - JW Player使用心得的更多相关文章

  1. (原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得

    jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...

  2. JW Player 现在支持 Azure 媒体服务

    Vishal Sood Azure媒体服务首席项目经理 此合作伙伴关系是关于什么内容? Azure媒体服务现已支持一些最常见的流媒体格式,其中包括 Microsoft SmoothStreaming ...

  3. JW Player 6.7(网页视频播放器,可在手机中播放),自定义Logo和右键菜单链接,支持MP3、MP4、FLV等格式,支持通过HTML5、FLash播放

    原版下载地址:http://www.jwplayer.com/ JW Player是世界上最流行的网页影音播放器,支持的视频格式主要有:MP4.FLV.F4V等格式,支持的音频格式主要有:MP3.AA ...

  4. .net C# 网页播放器 支持多种格式 媒体播放器 播放器 代码

    .avi格式代码片断如下:<object id='video' width='400' height='200' border='0' classid='clsid:CFCDAA03-8BE4- ...

  5. 如何使用JW Player来播放Flash并隐藏控制按钮和自定义播放完成后执行的JS

    在一个客户项目中播放的flash需要进行定制如不显示控制按钮,flash播放完成后执行特定的js等,在用过了N多的JQery插件和播放器后最终JW Player插件可以满足我的以上要求 因为JW Pl ...

  6. 视频播放器之————JW Player参数详解

    JW Player参数详解 1,安装 下载后,你可以得到一个例子,当用文本或HTML编辑器打开的时候,你可以发现swf是用一段短小的 javascript嵌入到页面上的.这个Javascript是Ge ...

  7. embed标签的使用(在网页中播放各种音频视频的插件的使用)

    播放器插件使用说明: 代码:< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”> src:音乐文件的路 ...

  8. 用flvplayer.swf在网页中播放视频(网页中flash视频播放的实现)

    原:http://blog.csdn.net/ricciozhang/article/details/46868201 由于公司项目的需求,需要在展示一些信息的时候能够播放视频,拿到这个要求,我就从最 ...

  9. jw player学习笔记

    一.是否支持IE7/8 本地离线播放不支持IE7/8,部署在服务器上时可以. 本地播放报错示意图 二.如何去Logo 1.网页版--HTML5---破解 桌面浏览器看到的效果: jwplayer(&q ...

随机推荐

  1. 【转】iOS中16进制转10进制

    原文网址:http://www.voidcn.com/blog/u012198553/article/p-4976772.html /// 将十六进制的字符串转化为NSData - (NSData ) ...

  2. 进程间通信七 (socket)

    copyright:weishusheng          data:2015.5.26              摘要:socket又叫套接字或者插口,它也是进程间通信的一种方式,实际上就是网络上 ...

  3. 发布代码小助手V2.1发布了——Code2HTML工具

    设计起源: 新浪博客似乎没有插入代码的功能,所以不得不用打空格的方法格式化代码.而且没法显示行号. 描述: 发布代码小助手用python和Tkinter开发,可以在任何常见操作系统上运行.主要用于在不 ...

  4. Linux与Windows的8个不同

    (整理来自网络) 对刚刚接触Linux的人来说,很容易从windows的观念去理解Linux系统.今天扒一扒Win和Linux之间常见的8个区别. 一.Linux终端输入密码不回显字符 用户的密码在L ...

  5. 大规模Hadoop集群实践:腾讯分布式数据仓库(TDW)

    TDW 是腾讯最大的离线数据处理平台.本文主要从需求.挑战.方案和未来计划等方面,介绍了TDW在建设单个大规模集群中采取的 JobTracker 分散化和 NameNode 高可用两个优化方案. TD ...

  6. 【暑假】[实用数据结构]KMP

    KMP算法 KMP算法是字符串匹配算法,可以在O(n)的时间完成,算法包含两部分,分别是:构造适配函数与两串匹配. 失配边的使用大大提高了算法效率,可以理解为已经成功匹配的字符不在重新匹配,因为我们已 ...

  7. PHP生成各种验证码和Ajax验证

    网址:http://www.helloweba.com/view-blog-191.html 源码下载地址: http://files.cnblogs.com/h07061108/php%E9%AA% ...

  8. Ngrok,一款可以帮助你展示网站和联网开发的工具

      使用Ngrok的目的就是为了可以让别人通过网络访问到自己本机上的项目 下面是一个简单的使用教程,详细的查看官网英文文档. 第一步: 登录官网:https://ngrok.com/   注册或者登录 ...

  9. java@ What are C++ features missing in Java

    Following features of C++ are not there in Java. No pointers No sizeof operator No scope resolution ...

  10. 从assemblyer Instructure deepth understander C principle

    要彻底搞清楚C语言的原理,就必须深入到指令一层去理解.你写一行C代码,编译器会生成什么样的指令,要做到心中有数;