因为项目中需要用到视频播放，所以查了不少资料，发现各类视频播放插件真是形形色色。现就常用的几个做一个汇总，以供以后使用参考。
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"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </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"> </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，'.'或''代表容器的class
variable: '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>有关此播放器就不过多介绍了，官方demo中写的实在是太详细了。
参考资料：百度云 CyberplayerDemo
总结
以上是我能找到的几款主流的视频播放器插件，也许还有更多更好的。当然在选择时一定要结合自己的项目实际情况，然后整体统一一种风格进行使用。适合的才是最好的。
