昨天向大家介绍了一款HTML5视频播放器VideoJS，效果还不错。今天要介绍的jPlayer也是基于HTML5的，不过与VideoJS不同是，jPlayer不仅支持播放视频，而且还能播放音频，并且提供了2套默认的皮肤，都非常漂亮，同时它也是基于jQuery的。

由于官方下载回来的文件只有几个核心JS，具体的例子还需要根据上面的教程自己搭建。所以为了方便大家欣赏和学习，我已经将几个demo整理好了，放到了青藤园网站上。下面就一起来看看每个demo的简要实现代码和在线示例：

1、jPlayer作为视频播放器

初始化的js代码：

$(document).ready(function(){

	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			$(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"
			});
		},
		swfPath: "../js",
		supplied: "webmv, ogv, m4v",
		size: {
			width: "640px",
			height: "360px",
			cssClass: "jp-video-360p"
		}
	});

});

2、jPlayer作为音频播放器

初始化的js代码：

$(document).ready(function(){

	$("#jquery_jplayer_1").jPlayer({
		ready: function (event) {
			$(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"
			});
		},
		swfPath: "../js",
		supplied: "m4a, oga",
		wmode: "window"
	});

});

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

初始化的js代码：

$(document).ready(function(){

	var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
	{
		m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
		oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
	}, {
		cssSelectorAncestor: "#cp_container_1",
		swfPath: "../js",
		wmode: "window"
	});

});

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

初始化的js代码：

$(document).ready(function(){

	new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_1",
		cssSelectorAncestor: "#jp_container_1"
	}, [
		{
			title:"Big Buck Bunny Trailer",
			artist:"Blender Foundation",
			free:true,
			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"
		},
		{
			title:"Finding Nemo Teaser",
			artist:"Pixar",
			m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
			ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
			webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
			poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
		},
		{
			title:"Incredibles Teaser",
			artist:"Pixar",
			m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",
			ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",
			webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",
			poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
		}
	], {
		swfPath: "../js",
		supplied: "webmv, ogv, m4v"
	});

});

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

示例源码下载

更多的功能大家可以去他的官网上看，地址是http://jplayer.org/

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/8/html5-jplayer.html