思洋互动网站建设学前班

今天将为大家介绍三款HTML 5的视频和音频播放器，这里就不多废话了，首先先看第一款。

HTML5视频和音频播放器jPlayer

由于官方下载回来的文件只有几个核心JS，具体的例子还需要根据上面的教程自己搭建。下面就一起来看看每个demo的简要实现代码和在线示例：

1、jPlayer作为视频播放器
广州网站建设,网站建设,广州网页设计,广州网站设计

初始化的js代码：

1. $(document).ready(function(){     
2.     $("#jquery_jplayer_1").jPlayer({   
3.         ready: function () {   
4.             $(this).jPlayer("setMedia", {m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",                 ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",                 webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",                 poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" 
5.             });   
6.         },   
7.         swfPath: "../js",   
8.         supplied: "webmv, ogv, m4v",   
9.         size: {   
10.             width: "640px",   
11.             height: "360px",   
12.             cssClass: "jp-video-360p" 
13.         }   
14.     });   
15. }); 

在线示例

广州网站建设,网站建设,广州网页设计,广州网站设计

2、jPlayer作为音频播放器

初始化的js代码：

1. $(document).ready(function(){     
2.     $("#jquery_jplayer_1").jPlayer({   
3.         ready: function (event) {   
4.             $(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",                 oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg" 
5.             });   
6.         },   
7.         swfPath: "../js",   
8.         supplied: "m4a, oga",   
9.         wmode: "window" 
10.     });     
11. }); 

在线示例

3、jPlayer作为个性化的环形音频播放器

初始化的js代码：

1. $(document).ready(function(){     
2.     var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",   
3.     {   
4.         m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",   
5.         oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" 
6.     }, {   
7.         cssSelectorAncestor: "#cp_container_1",   
8.         swfPath: "../js",   
9.         wmode: "window" 
10.     });     
11. }); 

在线示例

4、jPlayer作为带播放列表的视频播放器

初始化的js代码：

1. $(document).ready(function(){     
2.     new jPlayerPlaylist({   
3.         jPlayer: "#jquery_jplayer_1",   
4.         cssSelectorAncestor: "#jp_container_1" 
5.     }, [   
6.         {   
7.             title:"Big Buck Bunny Trailer",   
8.             artist:"Blender Foundation",   
9.             free:true,
10. m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",             
11. ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",             
12. webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",             
13. poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" 
14.         },   
15.         {   
16.             title:"Finding Nemo Teaser",   
17.             artist:"Pixar",             
18. m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v", 
19. ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",  
20. webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",  
21. poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png" 
22.         },   
23.         {   
24.             title:"Incredibles Teaser",   
25.             artist:"Pixar", 
26. m4v: http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v,
27. ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",         
28. webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm", 
29.  poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png" 
30.         }   
31.     ], {   
32.         swfPath: "../js",   
33.         supplied: "webmv, ogv, m4v" 
34.     });     
35. }); 

在线示例

主要就是这几个例子，官网上本来还可以切换皮肤的，我就不做上去了。最后将所有例子打包供大家下载学习。

示例源码下载