周南嵐

摘要：全媒體時代，利用互聯(lián)網(wǎng)技術(shù)輔助電視節(jié)目的場景交互，已成為一個新課題。文章通過研究和分析目前的場景交互和互聯(lián)網(wǎng)技術(shù)，利用互聯(lián)網(wǎng)+手機+觀眾互動的深度融合，讓現(xiàn)場觀眾不再是單方面受眾，而能主動參與其中。文章設(shè)計了基于移動互聯(lián)網(wǎng)的電視節(jié)目現(xiàn)場互動媒體墻系統(tǒng)，采用HTML5技術(shù)開發(fā)，并將其應(yīng)用在電視節(jié)目的實際制作中，平臺具有跨平臺、簡單易用、運行流暢、互動性強等特點。

關(guān)鍵詞：互動媒體；媒體墻；電視節(jié)目互動；場景互動

中圖分類號：TP37 文獻標識碼：A 文章編號：1009-3044（2017）29-0203-02

1 概述

隨著全媒體時代的到來， 電視節(jié)目內(nèi)容與形式也不斷推陳出新，觀眾現(xiàn)場互動也越來越多，利用手機媒介的優(yōu)勢，用互聯(lián)網(wǎng)技術(shù)打造場景互動平臺無疑是最科學(xué)合理的方式。通過電視交互媒體墻，現(xiàn)場觀眾可以用手機發(fā)送信息，主持人在媒體墻設(shè)備上接收信息。媒體墻大屏就相當于一個電腦的顯示器，可以聯(lián)網(wǎng)用網(wǎng)頁的方式展示各種活動，如掃碼簽到、上墻、給參賽選手投票等等。這樣無疑增加了很多活動環(huán)節(jié)，也極大地增強了觀眾的參與度與互動性，讓電視節(jié)目更加精彩。隨著HTML5技術(shù)的到來，利用HTML5技術(shù)實現(xiàn)效果不亞于App的功能效果，且其本身非常輕量化，開發(fā)成本相對較低，而且瀏覽器能夠擺脫對操作系統(tǒng)的依賴，實現(xiàn)跨終端、跨平臺的極致體驗。文章主要采用HTML5技術(shù)實現(xiàn)了互動媒體墻，提供簽到、投票、競猜、抽獎等功能，提供觀眾互動。

2 現(xiàn)場互動媒體墻總體設(shè)計

傳統(tǒng)的節(jié)目錄制現(xiàn)場場景交互，都是以實物道具作為活動環(huán)節(jié)，這樣大大增加了欄目組策劃的工作力度，操作起來也十分繁瑣，無疑是要消耗活動方大量的人力物力去花時間去搞策劃。就連一個小小的簽到，也要統(tǒng)計人員準備人員名單，安排排隊簽到，之后還要統(tǒng)計，非常麻煩。

現(xiàn)在基于移動互聯(lián)網(wǎng)的電視節(jié)目場景互動平臺設(shè)計出現(xiàn)，可以用于新聞評論類節(jié)目、綜藝真人選秀節(jié)目、少兒才藝大賽等各類電視節(jié)目等，為這些活動場合提供一個讓現(xiàn)場觀眾參與活動的平臺，如掃碼簽到、評論上墻、為選手投票、參與抽獎等等，這樣不但提高觀眾參與度、引燃現(xiàn)場氛圍，而且提高節(jié)目的收視效果，增加效益。關(guān)注以下幾個重點：

1） 移動端設(shè)備的適配。目前手機型號各種各樣，屏幕大小和比例也都不太相同，需要設(shè)計一套方案來適配，保證各型號手機樣式的完整性。

2） 設(shè)備數(shù)據(jù)的實時展現(xiàn)。和觀眾設(shè)備進行交互時，演播室媒體墻大屏幕上的數(shù)據(jù)需要實時刷新，以展現(xiàn)最新的數(shù)據(jù)動態(tài)。

3） 互動活動環(huán)節(jié)模塊的設(shè)計和實現(xiàn)。保證在大屏幕和手機設(shè)備上有很好的互動性和特效。

4） 數(shù)據(jù)模擬接口的設(shè)計和實現(xiàn)。在媒體墻大屏幕 PC 端和觀眾移動端設(shè)備中的數(shù)據(jù)展現(xiàn)，需要設(shè)計一套數(shù)據(jù)接口供調(diào)用，并將數(shù)據(jù)進行存取。

3 現(xiàn)場互動媒體墻軟件體系

現(xiàn)場互動媒體墻設(shè)計主要包括PC端和移動端。

PC端主要有5個功能模塊組成，整體功能框架如圖1所示。

1） 簽到墻。簽到墻頁面主要用于動態(tài)展示用戶的簽到情況，每當有人通過手機端網(wǎng)頁進行簽到，簽到墻上就會動態(tài)顯示簽到人的頭像和ID，并顯示簽到成功。

2） 節(jié)目單。節(jié)目單頁面用于顯示本次活動的主要節(jié)目環(huán)節(jié)，供觀眾查看。

3） 上墻。主持人可通過上墻功能顯時上墻的文字信息，實現(xiàn)與觀眾的互動；

4） 抽獎。通過抽獎功能抽取活動幸運觀眾發(fā)放獎品，或是邀請上臺參與活動。

5） 全屏切換。全屏切換功能，點擊后可以切換到全屏，可以隱藏掉瀏覽器的功能條、搜索欄等。

移動端主要有4個功能模塊組成，整體功能框架如圖2所示。

1） 上墻信息。現(xiàn)場上墻信息用戶可以在自己手機上看到，實時了解其觀眾的互動消息。

2） 節(jié)目單。用戶可以通過自己手機查看本次活動的節(jié)目單。

3） 發(fā)送上墻。用戶可以自己發(fā)表信息上墻，富有創(chuàng)造力的文字信息很有可能被主持人采納展示。

4） 用戶簽到。用戶可以將自己的姓名手機號輸入進行簽到，簽到成功后大屏幕上將會顯示該用戶的頭像和姓名。

4 電視節(jié)目現(xiàn)場互動媒體墻關(guān)鍵功能實現(xiàn)

4.1 PC端交互設(shè)計與關(guān)鍵功能實現(xiàn)

PC后端開發(fā)技術(shù)主要采用node.js+express框架，所有數(shù)據(jù)都以json格式存儲與交換。

PC端頁面整體采用Vue組件化編程思路。其中核心的業(yè)務(wù)“簽到”的頁面使用網(wǎng)格布局更加直觀的展現(xiàn)簽到的用戶。簽到頁面需要實時向服務(wù)端請求數(shù)據(jù)，不斷刷新簽到人數(shù)，以動態(tài)展現(xiàn)簽到情況。這里數(shù)據(jù)展現(xiàn)使用了Vue的列表渲染機制，利用v-for渲染列表，同時頁面會不斷請求用戶數(shù)據(jù)，不斷刷新列表，觸發(fā)產(chǎn)生css anmation的簽到動畫效果，如圖3所示。

“上墻互動”業(yè)務(wù)頁面采用對話框樣式，類似于微信消息對話，豎向排列，更加直觀。上墻信息采用列表渲染，同時通過axios不斷向服務(wù)端請求實時的數(shù)據(jù)并加載到列表中，如圖4所示。

4.2 移動端設(shè)計與關(guān)鍵功能實現(xiàn)

移動端也同樣采用vue和路由的技術(shù)，整個頁面使用 rem 技術(shù)實現(xiàn)適配，兼容各移動設(shè)備。

用戶簽到功能的頁面也是一個表單頁面，上方標題，中間兩個輸入框和下方的一個簽到按鈕.簽到成功后會有彈窗提示成功，會在本地sessionStorage存儲用戶姓名、頭像和手機號數(shù)據(jù)。如圖5所示。

上墻互動業(yè)務(wù)的頁面為一個表單頁面上方為提示文字，中間為輸入文本框，下方兩個按鈕。當點擊上墻按鈕后會檢測你是否已經(jīng)簽到了，信息不為空則會發(fā)送上墻信息請求到后端，后端寫入數(shù)據(jù)成功后，前端接收到響應(yīng)信息提示上墻成功。如圖6、圖7所示。

5 結(jié)束語

文章設(shè)計與開發(fā)了基于移動互聯(lián)網(wǎng)的電視節(jié)目現(xiàn)場互動平臺，實現(xiàn)了主要功能，如嘉賓現(xiàn)場簽到，評論上墻等。現(xiàn)場觀眾直接用智能手機可以既簡單又方便的參與節(jié)目活動環(huán)節(jié)，并且在媒體墻呈現(xiàn)出來，主持人與現(xiàn)場觀眾的互動更加及時、自由和真實，讓觀眾進入無成本與媒體實時互動的時代。

參考文獻：

[1] 弗里曼. HTML5權(quán)威指南[M].計算機技術(shù)與發(fā)展[M].人民郵電出版社，2014.

[2] 弗蘭納根. JavaScript權(quán)威指南[M]. 6版.機械工業(yè)出版社，2012.

[3] 劉德山，章增安，孫美喬. HTML5+CSS3 Web前端開發(fā)技術(shù)[M]. 人民郵電出版社，2016.

[4] 張曉冬.全媒體環(huán)境下演播室IP化改造與多屏互動的應(yīng)用[J].廣播與電視技術(shù)，2017（3）.

[5] 黃永慧，陳程凱. HTML5在移動應(yīng)用開發(fā)上的應(yīng)用前景[J].計算機技術(shù)與發(fā)展，2013（7）.endprint