三款HTML 5的视频和音频播放器-html 视频播放器

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

HTML5视频和音频播放器jPlayer

由于官方下载回来的文件只有几个核心JS，具体的例子还需要根据上面的教程自己搭建。下面就一起来看看每个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" 
    });     
});

在线示例

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

示例源码下载

#p#

第二款：VideoJS介绍

简单介绍一下VideoJS的特点。

开源，我们可以利用VideoJS的源码将它应用到自己的程序中，并且可以修改其源码，但要遵循开源协议。

轻量级，没有使用图片。

完全可以用CSS定制播放器的外观。

不依赖其他脚本库。

使用非常简单。

不仅使用简单，扩展也非常简单。

在各个浏览器之间有统一的外观。

支持全屏播放。

可以控制音量。

遇到不支持HTML5的浏览器可以转换成FLASH来播放。

上面这段话是翻译过来的，有什么错误请大家指出，呵呵。如何，听上去很强大吧，我也是这么觉得。由于国情原因，访问国外的网站经常要被重置，于是我就将VideoJS的源代码下了回来放在青藤园网站上，方便大家欣赏和学习。

在线示例

源码下载

#p#

第三款：ZEN Audio Player使用介绍

上面向大家介绍了两个HTML5音频和视频播放器VideoJS和jPlayer。今天再来介绍一个音频播放器ZEN Audio Player。说白了ZEN Audio Player是基于jPlayer的，如果你仔细看过jPlayer这篇文章的话，应该还记得里面有一个个性化的环形音频播放器示例，说白了，ZEN Audio Player就是基于jPlayer给这个环形播放器重新写了一个皮肤，下图是它在Chrome浏览器下的展示效果，在firefox下效果稍微差点，可能界面兼容性还有点问题。

我不知道为什么，当我想从github上下载这个播放器的示例源码时，要么打不开，要么就非常慢，可能是github自身的问题，也有可能是万恶的GFW的问题，所以最终我是根据其示例页面将页面元素和用到的js、css一点点凑起来的，最终把这个demo和源码发上来，方便大家下载和学习，身在中国，访问国外的网站实在是太累太累了。

在线示例

源码下载

ZEN Audio Player的官方网站是http://lab.simurai.com/ui/zen-player/