最近，要给“给我一只喵喵”做一个小视频的项目，需要视频播放功能。现在已经主流的方式都是优先先考虑使用h5播放器video,其他的方式都是GG,在这里我介绍用video实现视频播放方法。
jQuery是继prototype之後又一个优秀的Javascrīpt框架，写更少的代码，做更多的事情，所以我们也可以考虑使用小小的插件来实现我们的功能。在这里给大家推荐一个jQuery插件库-收集最全最新最好的jQuery插件，里面很多好玩的插件，可以用的时候搜一下。
爱奇艺／优酷
一般来说，最简单的可以借助于第三方服务，优势是使用视频网站的服务器，可以轻松解决兼容问题，而且断点续传，高清播放都轻松实现，能在任何平台上使用。缺点是带有广告，不过可以购买服务来避免广告，除掉爱奇艺／优酷的logo。整体性能无可挑剔。
H5 原生的界面 video
因为video样式是原生的界面看起来比较普通，但使用起来也很方便，手机端兼容情况很不错。网上的教程也比较多，我们下面的例子可以实现全屏的操作。
<!DOCTYPE html>
Video.js
video.js是一款开源免费的视频播放器，兼容性特好，兼容web和wap端大多数浏览器，兼容ie6以上。Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。
demo：http://www.jq22.com/yanshi404
官网：http://www.videojs.com
github：https://github.com/videojs/video.js
Flowplayer.js
FlowPlayer 是一个Web上的视频播放器，可以很容易将它集成在任何的网页上。支持HTTP以及流媒体传输。flowplayer分html5版和flash版本，大家可根据需求选择版本。Flowplayer支持播放flv、swf等流媒体以及图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。
demo：http://www.jq22.com/yanshi6854
官网：https://flowplayer.org/latest
github：https://github.com/flowplayer/flowplayer
也许你会好奇到底怎么用，那么我就来示范一下。
首先从官网下载后的目录结构：
我们把需要打开的视频放到这个目录结构下以后，修改index.html中的代码：
<!doctype html>
<head>
<!-- player skin 播放器的皮肤 -->
<link rel="stylesheet" href="skin/functional.css">
<!-- site specific styling 播放器的 样式-->
<style>
body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }
.flowplayer { width: 80%; }
</style>
<!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ 这里是说需要jquery1.7以上的版本-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- include flowplayer 播放器的jS核心代码-->
<script src="flowplayer.min.js"></script>
</head>
<body>
<!-- the player -->
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<!-- 讲我们要播放的视频路径-->
<source type="video/mp4" src="123.mp4">
</video>
</div>
</body>
当然 你也可以将这段代码整合到自己的代码当中，记住核心是：
<script src="jquery-1.10.2.js"></script>
<script src="flowplayer.min.js"></script>
