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="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，即可播放视频，效果图如下