三款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的视频和音频播放器
本文地址：http://www.shufengxianlan.com/qtweb/news36/32836.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联