今天要介绍的jPlayer也是基于HTML5的，不过与VideoJS不同是，jPlayer不仅支持播放视频，而且还能播放音频，并且提供了2套默认的皮肤，都非常漂亮，同时它也是基于jQuery的。
由于官方下载回来的文件只有几个核心JS，具体的例子还需要根据上面的教程自己搭建。所以为了方便大家欣赏和学习，我已经将几个demo整理好了，放到了青藤园网站上。下面就一起来看看每个demo的简要实现代码和在线示例：
1、jPlayer作为视频播放器
初始化的js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
});
},
swfPath: "../js",
supplied: "webmv, ogv, m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
}
});
});
|
2、jPlayer作为音频播放器
初始化的js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
});
},
swfPath: "../js",
supplied: "m4a, oga",
wmode: "window"
});
});
|
3、jPlayer作为个性化的环形音频播放器
初始化的js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(document).ready(function(){
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "../js",
wmode: "window"
});
});
|
4、jPlayer作为带播放列表的视频播放器
初始化的js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"Big Buck Bunny Trailer",
artist:"Blender Foundation",
free:true,
},
{
title:"Finding Nemo Teaser",
artist:"Pixar",
},
{
title:"Incredibles Teaser",
artist:"Pixar",
}
], {
swfPath: "../js",
supplied: "webmv, ogv, m4v"
});
});
|
相关文章
精彩导读
热门资讯
关注我们
