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文件夾中

一、 在Liferay中打開Control Panel>>Web Content，選擇Structures，Add Structure，如圖

編輯Name和Description，在下面的XML Schema Definition 中 Add Row，名爲video，類型爲Document and Media，Save

二、打開Web Content 中打開Teamplates,一樣Add Teamplate

編輯Name和Description，Structure選擇上一步保存的Structure，點擊Launch Editor，編輯以下代碼，保存                   

 1 <script src="/html/js/flowplayer/jquery-1.10.2.js"></script>
 2 <script src="/html/js/flowplayer/flowplayer-3.2.12.min.js"></script>
 3 <script src="/html/js/flowplayer/jquery-1.10.2.js"></script>
 4 
 5 <a id="player" style="width:800px;height:520px;display:block"></a>
 6  
 7 <!-- flowplayer配置 -->
 8 <script language="JavaScript">
 9      flashembed("player", "/html/swf/flowplayer-3.2.16.swf", {
10       config: {
11           clip: 'http://localhost:8080$video.getData()',
12           plugins: {
13                controls:{
14                   url: '/html/js/flowplayer/flowplayer.controls-3.2.15.swf',
15                       buttonColor: 'rgba(0, 0, 0, 0.9)',
16                       buttonOverColor: '#000000',
17                       backgroundColor: '#D7D7D7',
18                       backgroundGradient: 'medium',
19                       sliderColor: '#FFFFFF',
20                        
21                       sliderBorder: '1px solid #808080',
22                       volumeSliderColor: '#FFFFFF',
23                       volumeBorder: '1px solid #808080',
24                        
25                       timeColor: '#000000',
26                       durationColor: '#535353'
27               }
28               
29           }
30       }
31   });
32 </script>

 

注意：clip: 'http://localhost:8080$video.getData()',是從Structure中定義的video獲取視頻數據

三、打開Web Content>>Web Content , 單擊Add，選擇Basic Web Content，選擇相關的Strcture和Teamplate，編輯Title，從Document and Media 中選擇視頻，Publish

Web Content 發佈完成，使用Web Content Display Portlet ，選擇發佈的Web Content，便可播放視頻，效果圖以下