JW Player 网页媒体播放利器播放视音频

来源：互联网发布：编程工具知乎编辑：程序博客网时间：2024/05/02 02:56

JW Media Player是一个开源的在网页上使用的Flash视频、音频以及图片播放器，支持 Sliverlight 播放，可以通过一个XML文件使播放器自动切换显示一组图片，并播放背景音乐。
它支持播放的Adobe Flash Player和HTML5浏览器可以处理任何格式（FLV文件，H.264标准，MP4功能，VP8的，WEBM，支持MP3，AAC，JPG，PNG和GIF）。它也支持各种流和播放清单格式（包括RTMP协议，HTTP直播和更多）和多种播放选项。并支持所有主要的CDN和自适应比特率切换意味着你可以在全球各地提供高质量的内容。
JW Player是一个先进的视频平台，您可以进行自定义和扩展：
无需特殊工具，你可以编辑文本创建图像，然后你可以建立一个皮肤。
它的插件架构和 JavaScript API让您可以轻松地扩展它的功能，融入您的网站，或连接到第三方服务。

创建媒体提供商的能力意味着您可以连接到自己的专有CDN或内容服务器。

【1】需要使用的js文件

【开源的，可以自行下载】--(网上的JwPlayer的很多版本都有问题，所以下载时，多下载几个版本，只要可用为止)

1) jQuery -- jquery-1.6.2.js

2) JwPlayer

【2】文件播放的HTML定义如下:

<html><!--引用必要的js文件--><head><title>在线播放器</title><script src="js/jquery/jquery-1.6.2.js" type="text/javascript"></script>  <script src="js/plugins/jwplayer/jwplayer.js" type="text/javascript"></script></head><body><!--html结构--><div id='container'>Loading the player...</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="视频时长(秒)" /><!--初始化播放器--><script type="text/javascript">          var thePlayer;  // 保存当前播放器以便操作        $(function() {          thePlayer = jwplayer('container').setup({                       flashplayer: 'js/plugins/jwplayer/jwplayer.swf',              file: 'js/plugins/jwplayer/video.mp4',               image:  'js/plugins/jwplayer/preview.jpg',                width: 1280,              height: 720,              title: 'Hkfy.Com',            repeat: "always",            aspectratio: "16:9",            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(10); // 从指定位置开始播放(单位：秒)          });                    // 获取视频长度          $('.player-length').click(function() { alert(thePlayer.getDuration()); });              });  </script>  </body></html>

【3】网页打开效果如下：

1 0