三款HTML 5的视频和音频播放器
今天将为大家介绍三款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/
新闻标题：三款HTML 5的视频和音频播放器
URL地址：http://www.mswzjz.cn/qtweb/news36/32836.html
攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能