PC與IPTV影音服務選單數位匯流技術開發

摘 要:這里以頁面分割及HTML的

關鍵詞:數位匯流;機頂盒;互動電視;數位內容

中圖分類號:TP311文獻標識碼:A

文章編號:1004-373X(2010)06-094-05

Menu System Convergence of Video Service for PC and IPTV Platforms

LI Menghuang，CHEN Siyu

(Shih Chien University，Taipei，China)

Abstract:The menu system of video service for convergence PC and IPTV platforms by the web page presentation partition and HTML

Keywords:digital convergence;set-top box;interactive TV;digital content

0 引 言

近年來，以IP技術所引領的數位匯流技術(Digital Convergence)技術，已經把行動裝置、電腦網路以及IPTV網路，匯集在一個共同的IP技術平臺。以往這三類網路是獨立的，提供不同型態的服務;然而此現象對于數位內容(Digital Content)業者卻隱含一個難以解決的問題，因為數位內容業者對于這三大網路平臺，都必須個別架設不同特性的資訊系統平臺，才能把他們的數位內容在這些網路平臺鋪陳。因此如何提供一個跨系統的媒體播放平臺技術，讓更多影片內容能夠通過一次制作、多重利用與播出的機制，分攤制作成本、節約開銷，并且創造更多媒體露出的機會，成為媒體傳播未來在發展上的關鍵與趨勢之所在。

1 IP技術簡介

IP技術原本是電腦網路發展所衍生的技術。由于數位化及互動化的需求，IP技術也自然而然地導入到TV發展的領域，演變成所謂IPTV服務。由于視訊資料需具有實時(RealTime)及高頻寬的需求，所以各國在發展寬頻網路的過程，無不把IPTV服務的成功視為重要技術的突破。在臺灣，中華電信于2003年10月正式宣告MoD(Multimedia on Demand)的服務，歷經5年的時間，截至2008年12月底已達70萬用戶的規模[3];有線電信業者也在許多區域進行IPTV的服務測試，這些都有助于將視訊服務的對象由傳統TV的使用族群，擴及到更廣泛的電腦網路族群。故此數位匯流的趨勢，即在以IP技術為整合的核心技術，將數位內容在行動裝置、PC以及IPTV等三大服務系統間匯流傳輸，這也將大大提高數位內容媒體露出的機會，其相關應用如圖1所示。

圖1 數位匯流相關

數位匯流歷經了近十年的發展，以Web為主流的資訊服務，幾乎與網際網路及IP網路劃上等號。如上所述，在IP的數位匯流領域下，任何數位內容都必須與網際網路的呈現介面技術整合，此一整合不僅可以讓數位內容得以在IP網路呈現，而許多數位內容的加值效果，亦可通過網際網路相關技術達成，而此技術最重要的是以HTML為頁面的介面呈現技術。故論及數位匯流數位內容的加值應用，其整合的加值皆應包裝于HTML之下，其架構如圖2所示。

圖2 架構圖

本文在“跨媒體平臺播放技術”的發展上，即在IP數位匯流的環境下，讓加值的數位內容能在行動裝置、PC及IPTV三大服務系統呈現與播放。在匯流的過程中，適應不同client devices的頁面呈現(presentation)是首要的項目。 Nico Oorts的團隊在文獻等文中基于MPEG-21 Digital Item Declaration Language(DIDL)及XML架構，提出XiMPF(eXtensible Interactive Multimedia Publication Format)的data model，以符合Production_oriented以及Publication_oriented兩項requirements，而Presentation_orineted requirements則以目前的W3C的相關技術(XHTML，CSS，SMIL)來達到presentation的layout，synchronization以及interactions等需求。以此整體架構，該團隊以互動式的氣象播報為例，將此應用服務應用在四種平臺上(Web，TV，MHP及WAP)。

雖然XiMPF有完整的架構，將多媒體的應用從presentaion到production，進而到publication完整的勾勒出來，以達到“一次制作，多平臺播放的效果”。然而一個互動式多媒體應用服務，并不只有單一頁面的呈現與互動，它牽涉非常多呈現頁面彼此之間的互動及聯結的關系，而XiMPF在這方面卻著墨甚少(XiMPF比較著重在單一頁面之多媒體元素的彼此關系的描述及互動性，以適應不同的device platforms)。當然在頁面與頁面的互動與連接的過程中，相關的事件(Event)是觸發這些互動與連接的發生(如某個選單按鈕button被觸發時而連接至另一頁面)。然而不同的client devices，其事件觸發的行為是不一樣的(比如PC有滑鼠及keyboard，IPTV則只有遙控器的按鍵)，如何將這些事件表達在一個互動式多媒體的元件里，是必要的過程，而在XiMPF的架構中，似乎很難融入此項需求;最后是頁面code generation的部分，在XiMPF有code generation agent，將high level的semantic的data model依照不同平臺的不同特性，轉換成不同的應用程式碼(HTML for Web，Java MHP for digital TV，WML for WAP)。然而不同的平臺，其client devices因配備的不同，運算效能也不一樣。因此在產生實際執行程式時，其效能因素是必須被考慮的。當系統各頁面的執行效能需要被細致地考慮的話，此互動式多媒體應用服務，應局限在某幾類的layout及template，依附這些template的頁面，系統才能連到較佳的執行效能。

對于一個影音服務來說，選單是選擇及點選某一影片的重要介面，所以本文著重考慮在PC及IPTV的選單的匯流技術開發。 PC及IPTV最大的差異是PC有滑鼠作為輸入設備，所以滑鼠可以定點到頁面的各元素作點選及拖曳的動作;而IPTV的輸入設備是遙控器，經常使用的是“← ”，“→”，“↑”，“↓”及“confirm”等鍵。所以對于頁面的選單來說，當選單的選項超過頁面的呈現范圍時，在PC平臺，scroll bar就會出現(如圖3所示)，于是滑鼠就能定點到scroll bar，經由拖曳的動作，讓范圍外的選項被呈現。然而在IPTV的平臺里，則是顯示的圖標(如圖4所示)提醒使用者，使用遙控器的“←”，“→”，“↑” ，“↓”四個鍵，可點選頁面的圖標，以展開范圍外的選單選項。這里在自動匯流PC及IPTV平臺的選單技術，以臺灣的數位典藏計畫作為應用范例，所以圖3，圖4的差別在于兩個平臺PC及IPTV的輸入設備不同，使得在選單范圍的限制下，有不同的選單樣式呈現。

圖3 選擇頁面(一)

2 開發環境

由于網頁的應用普及，許多資料的呈現都通過網頁為呈現即時性的資訊，一個網頁的應用服務都會建構一個后端管理系統，并結合資料庫系統以隨時調整網頁呈現的資訊。一個提供影音服務的平臺，使用者可以通過PC或是使用相對應的IPTV機頂盒(set_top_box)來瀏覽影音服務。該系統是架構在Windows Server 2003，結合Media Service 9，Microsoft Visual Studio.NET 2003，SQL 2000等環境來開發的。系統管理者將影音服務的相關資訊經由后端管理系統存入資料庫，而前端服務程式則結合資料庫的影音資料呈現不同功能的影音服務(見圖5)。本文所構建的IPTV和PC選單樣式匯流功能，則是在前端服務程式中開發，判斷使用者瀏覽此服務平臺的瀏覽器，以呈現不同平臺的選單樣式。

圖4 選擇頁面(二)

圖5 影音服務圖示

2.1

2.2 getElementById

JavaScript的getElementById方法可取得HTML文件中特定id的元素，進而更改該元素中的內容或是其屬性值[9]。在本文中使用此方法取得特定id的

因此圖6中編號2的區塊是作為影片選單的區塊，分別以標簽各自將PC及IPTV的選單樣式包覆其中;編號3的區塊則是顯示每個選單選項的圖片資訊，當使用者在選單上移動時，Javascript函式讓編號3的圖片資訊能隨著使用者的游標即時變換圖片;編號4的區塊則是用于顯示跑馬燈的文字資料。在圖6編號2的選單區塊，有兩組物件，一組是呈現PC選單的設定，另外一組是IPTV選單的設定，兩者只有一者是會被呈現的。所以這兩組的style的display屬性值，均先設為none(亦即兩組物件在畫面的初始階段不會在用戶端網頁呈現)，但是當系統判斷出用戶端的設備是PC或IPTV時，即呼叫對應的JavaScript函數，以呈現對應的選單樣式(PC選單樣式的產生是呼叫pc_menu_scroll( )函數，而IPTV選單則是呼叫set_top_box_menu( )函數)。

圖6 產生表格

3.2 PC及IPTV選單樣式

PC選單的

IPTV選單的

為方便程式的開發，所以在這五個選項的右方都有對應的圖示分割，其id分別為a0，a1，a2，a3，a4(如圖9所示)，只有a0及a4會隨著選單的呈現與結合，而a1，a2，a3則均為空白。所以在IPTV的

圖7 物件屬性設定

圖8 選單產生程式

圖9 圖示分割

3.3 選單項目資料的產生

如圖5所示，前端服務的選單資料都在資料庫中，所以前端服務程式會將選單的各選項資料，從資料庫中讀取后，儲存在arrMenu(如圖11所示)，由于IPTV無法呈現scroll bar，所以每次呈現在頁面的選項數設定為5項(第0項至第4項)，所以圖11的menu_item_amount的設定值為4;若是PC的頁面，則沒此限制，menu_item_amount的值直接可以設定為資料庫讀出的資料項目的數目，所以menu_item_amount = arrMenu .length，超過頁面能容納數量的其他選項，則可通過scroll bar來展示其他選項。

圖10 搜錄標簽并觸發函式

圖11 讀取資料并存儲

以上就是本系統平臺的前端服務網頁架構及選單樣式如何正確匯流的介紹。所以，如果用電視來觀看本系統就是圖4所示的畫面，這時就是使用遙控器的“←”，“→”，“↑”，“↓”等鍵選擇畫面上的任一個選單選項及切換選單頁面。如果是使用電腦瀏覽此網站則顯示圖3的畫面，滑鼠可以任意移動游標及點擊，而且scroll bar的使用可以直接呈現全部的選單選項。

4 結 語

本文在匯流PC及IPTV影音選單的頁面呈現，達到一次制作多平臺播放的效果，讓數位內容有更多平臺露出的機會，以加速及強化數位內容產業的發展。此一匯流技術已成功地運用在臺灣的數位典藏計畫，將臺灣發展多年的珍貴的數位影音典藏在Internet網路的PC族群及中華電信的IPTV服務(MOD)兩大平臺，展現其精致的內容，發揮數位內容的親近度。未來此技術將延伸到手持式的設備上，讓目前三大使用網路都能匯流成整合的影音服務平臺。

參考文獻

[1]Ortiz S Jr.Phone Companies Get into the TV Business[J].IEEE Computer，2006，39(10):12-15.

[2]Vedantham S，Seong-Hwan Kim，Kataria D.Carrier-grade Ethernet Challenges for IPTV Deployment[J].IEEE Communications Magazine，2006，44(7):24-31.

[3]李孟晃，劉懿萱，曾彥勛，等.中華電信MOD開放平臺架構發展之研究.2009電子商務與數字生活研討會論文集[C].臺北，2009.

[4]Nico Oorts，Filip Hendricks，Tom Beckers，et al.Multi-channel Publication of Interactive Media Content for Web Information System[J].Lecture Note in Computer Science，2005:394-399.

[5]Tom Beckers，Nico Oorts，Filip Hendrickx，et al.Multi-channel Publication of Interactive Media Documents in a News Environment.Proceedings of the Twelfth International World Wide Web Conference[C].2005.

[6]S.Van Assche，HendrickxF，Nachtergaele L.Multi-channel Publication using MPEG-21 DIDL and Extensions.Proceedings of the Twelfth International World Wide Web Conference[C].2003.

[7]S.Van Assche，Hendrickx F，Nachtergaele L.Multi-channel Publishing of Interactive Multimedia Presentation[J].Computers Graphics，2004(5):193-206.

[8]http://www.w3schools.com/tags/tag_DIV.asp.

[9]http://www.w3schools.com/HTMLDOM/met_doc_get-elementbyid.asp.

[10]Meng-Huang Lee，He-Rong Zhong.Design considerations for Web-based Interactive TV Services[J].Lecture Notes in Computer Science，2005:588-590.