使用JW PLAYERS播放器开发视频播放
来源:互联网 发布:教务管理系统数据库 编辑:程序博客网 时间:2024/05/22 13:56
序言
前段时间在做一个网站项目,要求能在线播放视频、音乐,这个以前还真没接触过。恰好今天在坛子里闲逛时,发现有同志对这方面也感兴趣,遂把这些整理了下,同时自己也可以复习下。
播放器需要满足以下需求:
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,故引入了,使用其它框架的自行更改该部分)
- <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>
到此完成,接下来运行网页就可以看到效果了。以下是一个截图:
关于更详细的配置和说明文档,请参阅官方文档,说明非常详尽。
官方文档:http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5
- 使用JW PLAYERS播放器开发视频播放
- FFmpeg的使用——PHP转换视频、截取视频以及JW Player播放器控制
- 使用jw palyer播放web中的flv视频
- JW Player 网页视频媒体播放插件
- JW Player 网页视频媒体播放插件
- 使用opencv开发视频播放器一
- 使用VideoView开发视频播放器
- 使用 JW Player 播放RTMP 流
- 使用 JW Player 播放RTMP 流
- flash视频播放jw player的使用流程(与rails的整合)
- FLV网页播放器JW FLV PLAYER
- flash播放器JW Player使用方法
- JW Player 播放器双击全屏
- Flash视频播放器 JW PLAYER怎么在网页中运用?
- iOS视频播放器开发
- Android视频播放器开发
- android开发视频播放器-----视频播放 Vitamio框架的使用(一)
- CKPlayer视频播放器使用
- JAVA常见异常总结(runtime exception)
- static 关键字
- 我把大三给了谁
- java数据库操作
- CCS5 编译器手动设置dsp支持可变参数宏等问题
- 使用JW PLAYERS播放器开发视频播放
- Tomcat启动报java.sql.SQLException:不支持的特性
- IOS5 ARC unsafe_unretained等说明
- Extjs二级联动
- 《UNIX环境高级编程》笔记--文件时间
- 文件内容的排序
- 【SQL】一些或许将来能用到的sql 语句
- firefox对css3滤镜-----模糊兼容
- php漏洞