详细教程使用jQuery jPlayer插件给你的站点增加视频和音频功能

详细教程使用jQuery jPlayer插件给你的站点增加视频和音频功能

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

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

1.HTML

首先开始HTML部件

1

type="text/css"media="all"/>

2 3

4 5

6

7

8

9

Audio player

10

11

12

13

14

15

• tabindex="1">play

16

• tabindex="1">pause

17

• tabindex="1">stop

18

• tabindex="1">mute

19

• tabindex="1">unmute

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

• Audio track

35

36

37

38

39

40

41

Video player

42

43

44

45

46

47

48

• play

49

• pause

50

• stop

51

• mute

52

• unmute

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

• Tokyo weather

68

69

70

71

72

73

74

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

2.CSS

需要用到的CSS样式

75body{background:#eee;font-family:Verdana,Helvetica,Arial, sans-serif;margin:0;padding:0}

76.example{background:#FFF;width:1000px;height:500px;font-size:80%;borde

r:1px#000solid;margin:0.5em10%0.5em;padding:1em2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}

77.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

78$(document).ready(function(){

79$("#jquery_jplayer_1").jPlayer({

80ready:function(){

81$(this).jPlayer("setMedia",{

82mp3:"media/track.mp3",

83}).jPlayer("play");//auto play

84},

85ended:function(event){

86$(this).jPlayer("play");

87},

88swfPath:"swf",

89supplied:"mp3"

90})

91.bind($.jPlayer.event.play,function(){//pause other instances of

player when current one play

92$(this).jPlayer("pauseOthers");

93});

94$("#jquery_jplayer_2").jPlayer({

95ready:function(){

96$(this).jPlayer("setMedia",{

97m4v:"media/tokyo.m4v",

98ogv:"media/tokyo.ogv",

99poster:"media/poster.jpg"

100});

101},

102ended:function(event){

103$("#jquery_jplayer_2").jPlayer("play",0);

104},

105swfPath:"js",

106supplied:"m4v,ogv",

107cssSelectorAncestor:"#jp_interface_2"

108})

109.bind($.jPlayer.event.play,function(){//pause other instances of player when current one play

110$(this).jPlayer("pauseOthers");

111});

112});

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例子

转载请保留出自:详细教程使用jQuery jPlayer插件给你的站点增加视频和音频功能