首页 交流 随言 工具 友链 名片 搜一下
点赞 收藏 讨论 分享 举报

简单的介绍JW Player使用及一些参数的设置

软件 3991 0 2014-05-22
简单的介绍JW Player使用及一些参数的设置
将jwplayer.js放在你的项目下，假如放在jwplayer目录下，则应在你的网页上如此引入
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
将player.swf也放在jwplayer目录下。
再在页面里添加如下代码
<div id="container">Loading the player ...</video>
<script type="text/javascript">
jwplayer("container").setup({
autostart: true,
controlbar: "none",
file: "/videos/video.mp4",
image: "player.jpg",
duration: 57,
flashplayer: "/jwplayer/player.swf",
volume: 80,
width: 720 });
</script>
其中autostart为是否自动播放，controlbal为是否显示控制条，file即为你要播放的文件的位置，duration为要播放的持续时间，flashplayer为下载下来的player.swf，volume为初始音量，width为播放器宽度。
这样JWPlayer最简单的使用即完成了。
此外JW Player还包含了许多其他的功能，包括添加图片，添加播放列表，更换皮肤，配置插件（包括一些能在片头片尾加广告的插件，但要收费）等等。 
点赞
收藏
讨论
分享
举报

上一篇：请问PPS是什么文件?用什么软件做的呢?

下一篇：解决office Exce没有找到vbaen32.olb,丢失vbaen32.olb问题

讨论数量：2

天涯网魂 3 杠 5 星2014-05-22 11:05:37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jwplayer.js"></script>
</head>

<body>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "player.flv",
image: "player.jpg",
width: 500,  
    height: 350,
});
</script>

</body>
</html>

天涯网魂 3 杠 5 星2014-05-22 11:02:28

网页媒体播放利器 - 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的基本用法。

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

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

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

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

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

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

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

[html] view plaincopy
  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结构如下

[html] view plaincopy
  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. 初始化播放器，完成控制逻辑

[html] view plaincopy
  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.         //播放 暂停  
  13.         $('.player-play').click(function() {  
  14.             if (thePlayer.getState() != 'PLAYING') {  
  15.                 thePlayer.play(true);  
  16.                 this.value = '暂停';  
  17.             } else {  
  18.                 thePlayer.play(false);  
  19.                 this.value = '播放';  
  20.             }  
  21.         });  
  22.           
  23.         //停止  
  24.         $('.player-stop').click(function() { thePlayer.stop(); });  
  25.           
  26.         //获取状态  
  27.         $('.player-status').click(function() {  
  28.             var state = thePlayer.getState();  
  29.             var msg;  
  30.             switch (state) {  
  31.                 case 'BUFFERING':  
  32.                     msg = '加载中';  
  33.                     break;  
  34.                 case 'PLAYING':  
  35.                     msg = '正在播放';  
  36.                     break;  
  37.                 case 'PAUSED':  
  38.                     msg = '暂停';  
  39.                     break;  
  40.                 case 'IDLE':  
  41.                     msg = '停止';  
  42.                     break;  
  43.             }  
  44.             alert(msg);  
  45.         });  
  46.           
  47.         //获取播放进度  
  48.         $('.player-current').click(function() { alert(thePlayer.getPosition()); });  
  49.   
  50.         //跳转到指定位置播放  
  51.         $('.player-goto').click(function() {  
  52.             if (thePlayer.getState() != 'PLAYING') {    //若当前未播放，先启动播放器  
  53.                 thePlayer.play();  
  54.             }  
  55.             thePlayer.seek(30); //从指定位置开始播放(单位：秒)  
  56.         });  
  57.           
  58.         //获取视频长度  
  59.         $('.player-length').click(function() { alert(thePlayer.getDuration()); });  
  60.     });  
  61. </script>  


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

 

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

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

请先登录再发表讨论。 2024-11-24

登录 注册
天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链
最新点赞
 

版权所有 哈喽吧  2024 © hilo8.com

本站建议使用最新版本浏览器访问，比如：Chrome、Edge、Firefox、Safari等。   工信部备案号：琼ICP备08001287号-1

特别说明：1.本站所有文章均来自网友发布，如有侵犯到版权请及时联系本站进行核对处理；2.本站所有文章均可免费发布和转载，但必须标明来源“哈喽吧”。