常用视频播放器插件汇总

因为项目中需要用到视频播放，所以查了不少资料，发现各类视频播放插件真是形形色色。现就常用的几个做一个汇总，以供以后使用参考。

HTML video标签

其实html中就已经提供了相对应的标签<video>用于视频的播放。

<video src="url" controls="controls"></video>

该标签中提供了一系列的属性以及方法，来保证开发者可以更好的对视频进行操作。

Video 对象方法(摘自W3School)

方法	描述
addTextTrack()	向视频添加新的文本轨道
canPlayType()	检查浏览器是否能够播放指定的视频类型
load()	重新加载视频元素
play()	开始播放视频
pause()	暂停当前播放的视频

这里必须要提醒注意的是：video标签是HTML 5的新标签，并且IE浏览器只支持IE9及其以上版本。

参考资料：HTML video标签 /Video 对象相关属性以及方法

jQueryVideo.js

其实该视频播放器插件使用的就是<video>标签，只不过集成了很多方法，避免大家再去造轮子。

需要引入video.js的css以及js

<link href="css/video-js.min.css" rel="stylesheet">
<script src="js/video.min.js"></script>

示例

<video id="my-video" class="video-js" controls preload="auto" width="960" height="400"poster="m.jpg" data-setup="{}"><source src="url" type="video/mp4"><source src="url" type="video/webm"><source src="url" type="video/ogg">
</video>
<script type="text/javascript">var myPlayer = videojs('my-video');videojs("my-video").ready(function(){var myPlayer = this;myPlayer.play();});
</script>

在初始化video以及操作视频的时候，可以参考上面video标签的相关属性以及方法，这样方便理解以及使用。

参考资料：Video.js官网/demo下载

jPlayer

使用jPlayer给我的感觉就是相对复杂，但是功能强大。它可以做音频播放，视频播放，甚至是多个视频音频列表的展示。
最让人惊喜的就是它的兼容性，官网显示，它可以向下兼容到IE6。

同样的，使用前需要引入相关的css以及js

<link href="../../skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>

示例(以下代码都是从官方示例代码中copy出来的，可以自行下载研究)

<div class="jp-type-single"><!-- 视频位置 --><div id="jquery_jplayer_1" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><!-- 屏幕中心播放按钮 --><button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><!-- 进度条 --><div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div><div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div><div class="jp-controls-holder"><div class="jp-controls"><!-- 播放暂停按钮 --><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><!-- 音量控制 --><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-toggles"><!-- 重复播放/全屏 --><button class="jp-repeat" role="button" tabindex="0">repeat</button><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div></div><div class="jp-details"><div class="jp-title" aria-label="title">&nbsp;</div></div></div></div>
</div><script type="text/javascript">$("#jquery_jplayer_1").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "Big Buck Bunny",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: "../../dist/jplayer",supplied: "webmv, ogv, m4v",//支持格式size: {width: "640px",height: "360px",cssClass: "jp-video-360p"},useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,remainingDuration: true,toggleDuration: true});
</script>

许多按钮样式都可以自行定义，官方下载插件后，在examples文件夹下有各种各样的demo可供参考。

参考资料：jPlayer官方下载地址

ckplayer

超酷flv播放器插件，使用简单。除了支持mp4、flv、f4v、m3u8格式外，还支持rtmp协议。并且播放器会自动选择使用html5还是flashplayer进行播放，html5播放器优先。最主要的是用户可以自定义播放器的风格。

示例：

<script type="text/javascript" src="ckplayer/x/ckplayer.js"></script>
<div class="video" style="width: 1000px;height: 600px;"></div>
<script type="text/javascript">var videoObject = {container: '.video',//'#'代表容器的ID，'.'或''代表容器的classvariable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象poster:'pic/wdm.jpg',//封面图片video:'url'//视频地址};var player=new ckplayer(videoObject);
</script>

需要注意的是：此款播放器需要放在网络环境里方可正常使用，直接下载插件打开示例无法使用。

参考资料：ckplayer官网

Cyberplayer

百度云web播放器，功能强大。不过需要在百度云平台注册获取accessKey才能使用。当然，如果你的项目文件存储使用的是百度云的话，那么配合此播放器实在是再方便不过了。

示例

<div id="playercontainer"></div>
<script type="text/javascript" src="player/cyberplayer.js"></script>
<script type="text/javascript">var player = cyberplayer("playercontainer").setup({width: 680, // 宽度，也可以支持百分比(不过父元素宽度要有)height: 448, // 高度，也可以支持百分比title: "基本功能", // 标题file: "上传百度云存放视频地址url", // 播放地址image: "", // 预览图autostart: false, // 是否自动播放stretching: "uniform", // 拉伸设置repeat: false, // 是否重复播放volume: 100, // 音量controls: true, // controlbar是否显示starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播logo: { // logo设置linktarget: "_blank",margin: 8,hide: false,position: "top-right", // 位置file: "./img/logo.png" // 图片地址},ak: "xxxxxxxxxxxxxxxx" // 公有云平台注册即可获得accessKey});
</script>