使用JCplayer在本身的网站上播放视频

在我的网站上放一两段视频早已经不是什么新鲜事了，最简单的办法就是把视频传到youku/爱奇艺/土豆等等视频分享网站，经过审核并发布，选分享，以后会获得一端代码，把代码放进本身的网页html里就能够嵌入一个播放器来播放上传的视频了。

但如今的视频分享网站是愈来愈没有节操了，各类审核不说，视频以前的广告从一开始的15秒到30秒，如今已经进化到了灭绝人性的一分钟了，我知道网站是靠广告赚钱的，但我根本不信广告要长到1分钟才能赚到钱，既然已经赚得钵满盆满了，干吗不对用户仁慈点？

好吧牢骚发完，既然视频分享网站有种种问题---有时候老总对公司的网站视频前面出现一段广告是深恶痛绝的----咱们不得不想一想其余的办法，好比本身来实现这个视频播放的功能。

目前各种的解决方法真的很多，这里有两个连接介绍了不少免费的视频播放器：

http://www.blogjava.net/xcp/archive/2011/01/21/343308.html

http://www.open-open.com/news/view/e25eb0

我在反复比较以后选用了JCplayer

一.为何选择JCplayer

它的优势主要有如下几个：

1. 免费

jcplayer的使用效果彻底能够和jwplayer（youtube用的播放器就是jwplayer，但jwplayer是收费的）相比，有两个版本，免费版和收费版的惟一区别就是免费版左上角有一个jcplayer的标记，交钱的话能够去掉。这个问题可大可小，由于youku爱奇艺等等的视频也是加了水印的，但若是以为水印没法忍受，能够选择video.js这一类的开源播放器，但这样的话会面对下面的问题：

2. 兼容性好

jcplay在ie6下表现良好，而video.js等各种开源播放器由于不少是主要用html5来实现的，不少不支持ie低版本，即便表现最好的在ie6下也会出现按钮错位、无效的状况，能够用惨不忍睹来形容。与之相比，jcplayer在左上角加一个微不足道的标记真的算不了什么。

3. 界面多种多样能够定制

4. 播放器的实现方式不少

即包括最多见的flash方式也包括适用于ios的js方式。

二. JCplayer的使用：

http://www.jcplayer.com/free-download.html

先去官网下载免费版，里面包含了全部的代码，一些例子和详尽的用户手册。

jcplayer播放器的实现方式有四种：swf、swf-object、javascript、auto-detect，其中swf方式是使用flash来实现的，在pc端的ie6-九、chrome、firefox等浏览器下表现很是好（须要安装flash插件），但ios下无效，javascript用的是html5技术，在ios下表现良好，可是ie低版本就无效。

根据jcplayer的介绍，auto-detect方式应当可以根据浏览器环境自行选择合适的播放方式，但经我实测，auto-detect方式在pc的全部浏览器上表现良好，ios下是没反应的，很奇怪，因此这地方须要咱们本身动手写代码判断一下环境，而后选用swf或javascript方式。

（注意：javascript方式不支持flv格式的视频，由于flv是flash格式，若是你有一段视频，推荐转为mp4，体积小，使用范围广。）

通常而言swf方式是比较通用的，因此后面以swf方式为主。

1.选择界面风格

决定了播放器的实现方式以后咱们须要选择一下界面效果，在官网提供了一个在线的编辑器：

http://www.jcplayer.com/online-panel.html

主要有slimbar aquarium  minimalist三种风格，每一种又能够定制，好比取消分享按钮，取消音量按钮等等，在这个编辑器上均可以作到，设计好以后点击“Get embed code”，设置一下分辨率，再把播放器的方式选为swf（通常默认就是swf），source xml能够保持不变，其余的选择也不变，点击copy code就能够获得一段代码。

把这段代码放入你的网页html里想要嵌入播放器的位置。

2.指定视频文件位置

而后是编写source.xml，这里注意，假设你的网页文件是index.html，那么source.xml必定要放在和index.html一个目录下，否则javascript方式就会无效，而swf方式虽然能够播放，但封面图也会变成一片黑，这里应该是个bug。

source.xml的内容相似：

<?xml version="1.0" encoding="utf-8"?>
<playlist>
    <title><![CDATA[New Playlist]]></title>
    <items>
        <item>
            <title><![CDATA[this is title]]></title>
            <description><![CDATA[this is description]]></description>
            <image>video/test.jpg</image>
            <duration>30</duration>
            <source>video/test.mp4</source>                
            <sourceType>direct</sourceType>
        </item>
    </items>
</playlist>

很好理解，title和description不支持中文，能够去掉，image是封面，播放器刚加载到网页上的时候显示该封面，source就是视频文件的位置。其余的默认就好。

（我在这里把封面文件test.jpg和test.mp4都放在video子目录下了，若是你放在别的位置，改成对应位置便可）

3. 上传代码

而后上传播放器的代码，在jcplayer的压缩包里，HTML embed/Templates目录下，有三个子目录Aquarium，Minimalist，SlimBar分别对应三种风格的界面，每一个目录下面又有四个子目录，分别对应不一样的实现方式。

若是你以前选的是minimalist风格，swf方式，那么就进到Minimalist\Embed_SWF目录下把minimalist.swf上传到你的网站空间里。（若是使用javascript就进到\Minimalist\Embed_JavaScript目录下把Minimalist.js上传到网站空间里，其余方式和风格的以此类推。）

以后须要修改网页，指定播放器代码的位置，好比你把minimalist.swf上传到你网站根目录下的video子目录，那么就要修改index.html里的代码，找到

data="Minimalist.swf"

和

 <param name="movie" value="Minimalist.swf">

把Minimalist.swf改成正确的位置（video/Minimalist.swf）便可。

4. 完成

此时访问index.html，便可看到你的网站上嵌入了一段视频，能够播放、调节音量，全屏等等。

三. 经过第三方视频存储空间来存放视频

如今咱们的网站上能够播放本身的视频了，并且是无广告的纯绿色视频，但若是你空间很小，或者速度很慢，视频播放的体验绝对是不好的，这时候能够利用第三方的视频存储空间来存放咱们的视频。

以百度媒体云的视频服务为例，去http://developer.baidu.com/  申请个帐户，建个应用而后选媒体云：

接着选视频服务：

上传本身的视频，而后复制url，把source.xml里的

<source>video/test.mp4</source>  

test.mp4替换为你上传到媒体云的视频的url，便可在不占用本身主页空间的状况下，在网页上放置视频，由于百度媒体云的速度很快，这种方式甚至可能比jcplayer播放服务器本地的视频还快。

四. jcplayer的缺点：

1. 以前说过的auto-detect在ios下无效的bug

2. 无法作到像是youku那种在进度条上随便点一点，便可跳到该点播放的功能

jcplayer只能作到在已经下载的内容里点击跳播，好比一个视频，你只下载了前一半，那么只能在前一半里点某个点而后跳过去播放，后一半必须下载完才能够作到这种功能。

这也很好理解，youku那种跳播仅仅靠前端是无法实现的，必须写后端代码，有服务器的支持。