使用JCplayer在自己的网站上播放视频-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

在个人网站上放一两段视频早已经不是什么新鲜事了，最简单的办法就是把视频传到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-9、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里的代码，找到