Liferay使用Structure和Template制作Video Portlet

Liferay提供Structure和Teamplate机制，Structure定义以如何引入内容，Teamplate定义怎样展现内容，能快速为页面添加新内容展示。

FlowPlayer是一款开源的Web视频播放器，可从http://flash.flowplayer.org/download/中下载最新Flash版的FlowPlayer播放器，下载后解压目录如下

在Tomcat的目录下，webaps>>ROOT>>html>>js 下新建文件夹flowplayer，把flowplayer.controls-3.2.15.swf、flowplayer-3.2.12.min.js、flowplayer- 3.2.16.swf三个文件放到flowplayer文件夹中

1、 在Liferay中打开Control Panel>>Web Content，选择Structures，Add Structure，如图

编辑Name和Description，在下面的XML Schema Definition 中 Add Row，名为video，类型为Document and Media，Save

2、打开Web Content 中打开Teamplates,同样Add Teamplate

编辑Name和Description，Structure选择上一步保存的Structure，点击Launch Editor，编辑如下代码，保存

 <script src="/html/js/flowplayer/jquery-1.10.2.js"></script>
 <script src="/html/js/flowplayer/flowplayer-3.2.12.min.js"></script>
 <script src="/html/js/flowplayer/jquery-1.10.2.js"></script>
 
 <a id="player" style="width:800px;height:520px;display:block"></a>
 
 <!-- flowplayer配置 -->
 <script language="JavaScript">
      flashembed("player", "/html/swf/flowplayer-3.2.16.swf", {
       config: {
           clip: 'http://localhost:8080$video.getData()',
           plugins: {
                controls:{
                   url: '/html/js/flowplayer/flowplayer.controls-3.2.15.swf',
                       buttonColor: 'rgba(0, 0, 0, 0.9)',
                       buttonOverColor: '#000000',
                       backgroundColor: '#D7D7D7',
                       backgroundGradient: 'medium',
                       sliderColor: '#FFFFFF',
 
                       sliderBorder: '1px solid #808080',
                       volumeSliderColor: '#FFFFFF',
                       volumeBorder: '1px solid #808080',
 
                       timeColor: '#000000',
                       durationColor: '#535353'
               }
 
           }
       }
   });
 </script>

注意：clip: 'http://localhost:8080$video.getData()',是从Structure中定义的video获取视频数据

3、打开Web Content>>Web Content , 单击Add，选择Basic Web Content，选择相关的Strcture和Teamplate，编辑Title，从Document and Media 中选择视频，Publish

Web Content 发布完成，使用Web Content Display Portlet ，选择发布的Web Content，即可播放视频，效果图如下