The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

时间：2023-06-19 20:41:44

http://jplayer.org/

The jQuery HTML5 Audio / Video Library

jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer's active and growing community.

current release 2.9.2

now includes Zepto.js support

fork it on Github

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

Choose jPlayer

  • easy to get started, deploy in minutes
  • totally customizable and skinnable using HTML and CSS
  • lightweight - only 14KB minified and Gzipped
  • free and open source, no licensing restrictions
  • active and growing community providing support
  • free plugins available for popular platforms
  • extensive platform support - multi-codec, cross-browser and cross-platform
  • comprehensive documentation and getting started guide
  • consistent API and interface in all browsers, HTML5 or Adobe® Flash™
  • extensible architecture

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("#jquery_jplayer_1").jPlayer({
  4. ready: function () {
  5. $(this).jPlayer("setMedia", {
  6. m4a: "/media/mysound.mp4",
  7. oga: "/media/mysound.ogg"
  8. });
  9. },
  10. swfPath: "/js",
  11. supplied: "m4a, oga"
  12. });
  13. });
  14. </script>
  15. <div id="jquery_jplayer_1"></div>
  16. <div id="jp_container_1">
  17. <a href="#" class="jp-play">Play</a>
  18. <a href="#" class="jp-pause">Pause</a>
  19. </div>

Platforms and Browsers

  • Windows: Chrome, Firefox, Internet Explorer, Safari, Opera
  • Windows (legacy): IE6, IE7, IE8, IE9, IE10, IE11
  • OSX: Safari, Firefox, Chrome, Opera
  • iOS: Mobile Safari: iPad, iPhone, iPod Touch
  • Android: Android 2.3 Browser
  • Blackberry: OS 7 Phone Browser, PlayBook Browser

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

Media Support

  • HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
  • Flash: mp3, mp4 (AAC/H.264), rtmp, flv

For cross-browser support, a format must be supplied that works in both HTML5 and Flash.
Optional additional formats may be supplied to increase cross-browser HTML5 support.

//----------------------------------------------------------

这个是一个非常好的jQuery新插件(jPlayer)， 包括很多功能 : 它允许你播放多媒体文件, 暂停，音量调整，它拥有视频和音频播放功能会用到的所有功能控掉，同样他允许你改变它的所有样式(styles),因为他的全部外观都是在一个css文件 里面。另外，它同样支持HTML5 和支持所有主流的浏览器。它目前支持的格式有: mp3, ogg, m4a, m4v, ogv, wav等等。

简短的介绍以后，我们开始详细编码过程:

1. HTML
首先开始HTML部件

  1. <link rel="stylesheet" href="css/jplayer.blue.monday.css" type="text/css" media="all" />
  2. <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
  3. <script src="js/jquery.min.js" type="text/javascript"></script>
  4. <script src="js/jquery.jplayer.min.js" type="text/javascript"></script>
  5. <script src="js/main.js" type="text/javascript"></script>
  6. <div class="example">
  7. <div>
  8. <div class="players">
  9. <h2>Audio player</h2>
  10. <div class="jp-audio">
  11. <div class="jp-type-single">
  12. <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  13. <div id="jp_interface_1" class="jp-interface">
  14. <ul class="jp-controls">
  15. <li><a href="#" class="jp-play" tabindex="1">play</a></li>
  16. <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
  17. <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
  18. <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
  19. <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
  20. </ul>
  21. <div class="jp-progress">
  22. <div class="jp-seek-bar">
  23. <div class="jp-play-bar"></div>
  24. </div>
  25. </div>
  26. <div class="jp-volume-bar">
  27. <div class="jp-volume-bar-value"></div>
  28. </div>
  29. <div class="jp-current-time"></div>
  30. <div class="jp-duration"></div>
  31. </div>
  32. <div id="jp_playlist_1" class="jp-playlist">
  33. <ul>
  34. <li>Audio track</li>
  35. </ul>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="players">
  41. <h2>Video player</h2>
  42. <div class="jp-video jp-video-270p">
  43. <div class="jp-type-single">
  44. <div id="jquery_jplayer_2" class="jp-jplayer"></div>
  45. <div id="jp_interface_2" class="jp-interface">
  46. <div class="jp-video-play"></div>
  47. <ul class="jp-controls">
  48. <li><a href="#" class="jp-play" tabindex="1">play</a></li>
  49. <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
  50. <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
  51. <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
  52. <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
  53. </ul>
  54. <div class="jp-progress">
  55. <div class="jp-seek-bar">
  56. <div class="jp-play-bar"></div>
  57. </div>
  58. </div>
  59. <div class="jp-volume-bar">
  60. <div class="jp-volume-bar-value"></div>
  61. </div>
  62. <div class="jp-current-time"></div>
  63. <div class="jp-duration"></div>
  64. </div>
  65. <div id="jp_playlist_2" class="jp-playlist">
  66. <ul>
  67. <li>Tokyo weather</li>
  68. </ul>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>

在上同画出2播放器 - 音频和视频，它们两个的代码类似.

2. CSS

需要用到的CSS样式

  1. body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
  2. .example{background:#FFF;width:1000px;height:500px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
  3. .example .players{float:left;margin:10px}

其它css文件(相关的图片文件):
css/jplayer.blue.monday.css, css/jplayer.blue.monday.jpg, css/jplayer.blue.monday.video.play.png, css/jplayer.blue.monday.video.play.hover.png and css/pbar-ani.gif这些全部包括在源码包里面.

3. JS这里是全部需要用到的js文件在这个例子中.

js/main.js

  1. $(document).ready(function(){
  2. $("#jquery_jplayer_1").jPlayer({
  3. ready: function () {
  4. $(this).jPlayer("setMedia", {
  5. mp3: "media/track.mp3",
  6. }).jPlayer("play"); // auto play
  7. },
  8. ended: function (event) {
  9. $(this).jPlayer("play");
  10. },
  11. swfPath: "swf",
  12. supplied: "mp3"
  13. })
  14. .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
  15. $(this).jPlayer("pauseOthers");
  16. });
  17. $("#jquery_jplayer_2").jPlayer({
  18. ready: function () {
  19. $(this).jPlayer("setMedia", {
  20. m4v: "media/tokyo.m4v",
  21. ogv: "media/tokyo.ogv",
  22. poster: "media/poster.jpg"
  23. });
  24. },
  25. ended: function (event) {
  26. $("#jquery_jplayer_2").jPlayer("play", 0);
  27. },
  28. swfPath: "js",
  29. supplied: "m4v, ogv",
  30. cssSelectorAncestor: "#jp_interface_2"
  31. })
  32. .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
  33. $(this).jPlayer("pauseOthers");
  34. });
  35. });

js/jquery.min.js and js/jquery.jplayer.min.js这几个是公共的文件 - jQuery库与播放插件js文件.

4. SWF
使用flash swf文件: 例子中的主播放器.

swf/Jplayer.swf

到这里差不多全部完成. 所有测试的多媒体播放文件都放置在‘media’ 下面. 
音频文件 -  track.mp3,
视频文件: tokyo.m4v + tokyo.ogv, 
缩略图(poster): poster.jpg
如果你有遇到一个奇怪的问题和 ogg文件(oga, ogv, ogg) 不能使有，请尝试在你的 .htaccess 里面增加:
AddType audio/ogg .oga
AddType video/ogg .ogv .ogg

在线DEMO例子

相关文章