zoukankan      html  css  js  c++  java

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

    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.

      •  
         
         
         
      • Watch this space!
      •  

    current release 2.9.2

    now includes Zepto.js support

    fork it on Github

    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

    Fiddle with the code

    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

    full browser support on Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9 betafull IOS and Android support

    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;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例子
  • 相关阅读:
    小试SQLServer中的CLR特性
    转：memcached命令行参数说明
    2012年9月19日最新整理的日本产品（日货）名单！
    转：Memcached Java Client API详解
    刚写的一个小案例，实现多选的添加及删除
    SVG中的常用标签
    转：网页启用Gzip压缩 提高浏览速度
    SVG案例：著名的PostScript老虎图片
    SVG文档：SVG编程经典教程(转)
    实用技巧：利用SQL Server的扩展属性自动生成数据字典
  • 原文地址：https://www.cnblogs.com/fx2008/p/4334404.html
Copyright © 2011-2022 走看看