论文部分内容阅读
摘要：全媒体时代，利用互联网技术辅助电视节目的场景交互，已成为一个新课题。文章通过研究和分析目前的场景交互和互联网技术，利用互联网 手机 观众互动的深度融合，让现场观众不再是单方面受众，而能主动参与其中。文章设计了基于移动互联网的电视节目现场互动媒体墙系统，采用HTML5技术开发，并将其应用在电视节目的实际制作中，平台具有跨平台、简单易用、运行流畅、互动性强等特点。
关键词：互动媒体；媒体墙；电视节目互动；场景互动
中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2017）29-0203-02
1 概述
随着全媒体时代的到来， 电视节目内容与形式也不断推陈出新，观众现场互动也越来越多，利用手机媒介的优势，用互联网技术打造场景互动平台无疑是最科学合理的方式。通过电视交互媒体墙，现场观众可以用手机发送信息，主持人在媒体墙设备上接收信息。媒体墙大屏就相当于一个电脑的显示器，可以联网用网页的方式展示各种活动，如扫码签到、上墙、给参赛选手投票等等。这样无疑增加了很多活动环节，也极大地增强了观众的参与度与互动性，让电视节目更加精彩。随着HTML5技术的到来，利用HTML5技术实现效果不亚于App的功能效果，且其本身非常轻量化，开发成本相对较低，而且浏览器能够摆脱对操作系统的依赖，实现跨终端、跨平台的极致体验。文章主要采用HTML5技术实现了互动媒体墙，提供签到、投票、竞猜、抽奖等功能，提供观众互动。
2 现场互动媒体墙总体设计
传统的节目录制现场场景交互，都是以实物道具作为活动环节，这样大大增加了栏目组策划的工作力度，操作起来也十分繁琐，无疑是要消耗活动方大量的人力物力去花时间去搞策划。就连一个小小的签到，也要统计人员准备人员名单，安排排队签到，之后还要统计，非常麻烦。
现在基于移动互联网的电视节目场景互动平台设计出现，可以用于新闻评论类节目、综艺真人选秀节目、少儿才艺大赛等各类电视节目等，为这些活动场合提供一个让现场观众参与活动的平台，如扫码签到、评论上墙、为选手投票、参与抽奖等等，这样不但提高观众参与度、引燃现场氛围，而且提高节目的收视效果，增加效益。关注以下几个重点：
1） 移动端设备的适配。目前手机型号各种各样，屏幕大小和比例也都不太相同，需要设计一套方案来适配，保证各型号手机样式的完整性。
2） 设备数据的实时展现。和观众设备进行交互时，演播室媒体墙大屏幕上的数据需要实时刷新，以展现最新的数据动态。
3） 互动活动环节模块的设计和实现。保证在大屏幕和手机设备上有很好的互动性和特效。
4） 数据模拟接口的设计和实现。在媒体墙大屏幕 PC 端和观众移动端设备中的数据展现，需要设计一套数据接口供调用，并将数据进行存取。
3 现场互动媒体墙软件体系
现场互动媒体墙设计主要包括PC端和移动端。
PC端主要有5个功能模块组成，整体功能框架如图1所示。
1） 签到墙。签到墙页面主要用于动态展示用户的签到情况，每当有人通过手机端网页进行签到，签到墙上就会动态显示签到人的头像和ID，并显示签到成功。
2） 节目单。节目单页面用于显示本次活动的主要节目环节，供观众查看。
3） 上墙。主持人可通过上墙功能显时上墙的文字信息，实现与观众的互动；
4） 抽奖。通过抽奖功能抽取活动幸运观众发放奖品，或是邀请上台参与活动。
5） 全屏切换。全屏切换功能，点击后可以切换到全屏，可以隐藏掉浏览器的功能条、搜索栏等。
移动端主要有4个功能模块组成，整体功能框架如图2所示。
1） 上墙信息。现场上墙信息用户可以在自己手机上看到，实时了解其观众的互动消息。
2） 节目单。用户可以通过自己手机查看本次活动的节目单。
3） 发送上墙。用户可以自己发表信息上墙，富有创造力的文字信息很有可能被主持人采纳展示。
4） 用户签到。用户可以将自己的姓名手机号输入进行签到，签到成功后大屏幕上将会显示该用户的头像和姓名。
4 电视节目现场互动媒体墙关键功能实现
4.1 PC端交互设计与关键功能实现
PC后端开发技术主要采用node.js express框架，所有数据都以json格式存储与交换。
PC端页面整体采用Vue组件化编程思路。其中核心的业务“签到”的页面使用网格布局更加直观的展现签到的用户。签到页面需要实时向服务端请求数据，不断刷新签到人数，以动态展现签到情况。这里数据展现使用了Vue的列表渲染机制，利用v-for渲染列表，同时页面会不断请求用户数据，不断刷新列表，触发产生css anmation的签到动画效果，如图3所示。
“上墙互动”业务页面采用对话框样式，类似于微信消息对话，竖向排列，更加直观。上墙信息采用列表渲染，同时通过axios不断向服务端请求实时的数据并加载到列表中，如图4所示。
4.2 移動端设计与关键功能实现
移动端也同样采用vue和路由的技术，整个页面使用 rem 技术实现适配，兼容各移动设备。
用户签到功能的页面也是一个表单页面，上方标题，中间两个输入框和下方的一个签到按钮.签到成功后会有弹窗提示成功，会在本地sessionStorage存储用户姓名、头像和手机号数据。如图5所示。
上墙互动业务的页面为一个表单页面上方为提示文字，中间为输入文本框，下方两个按钮。当点击上墙按钮后会检测你是否已经签到了，信息不为空则会发送上墙信息请求到后端，后端写入数据成功后，前端接收到响应信息提示上墙成功。如图6、图7所示。
5 结束语
文章设计与开发了基于移动互联网的电视节目现场互动平台，实现了主要功能，如嘉宾现场签到，评论上墙等。现场观众直接用智能手机可以既简单又方便的参与节目活动环节，并且在媒体墙呈现出来，主持人与现场观众的互动更加及时、自由和真实，让观众进入无成本与媒体实时互动的时代。
参考文献：
[1] 弗里曼. HTML5权威指南[M].计算机技术与发展[M].人民邮电出版社，2014.
[2] 弗兰纳根. JavaScript权威指南[M]. 6版.机械工业出版社，2012.
[3] 刘德山，章增安，孙美乔. HTML5 CSS3 Web前端开发技术[M]. 人民邮电出版社，2016.
[4] 张晓冬.全媒体环境下演播室IP化改造与多屏互动的应用[J].广播与电视技术，2017（3）.
[5] 黄永慧，陈程凯. HTML5在移动应用开发上的应用前景[J].计算机技术与发展，2013（7）.
关键词：互动媒体；媒体墙；电视节目互动；场景互动
中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2017）29-0203-02
1 概述
随着全媒体时代的到来， 电视节目内容与形式也不断推陈出新，观众现场互动也越来越多，利用手机媒介的优势，用互联网技术打造场景互动平台无疑是最科学合理的方式。通过电视交互媒体墙，现场观众可以用手机发送信息，主持人在媒体墙设备上接收信息。媒体墙大屏就相当于一个电脑的显示器，可以联网用网页的方式展示各种活动，如扫码签到、上墙、给参赛选手投票等等。这样无疑增加了很多活动环节，也极大地增强了观众的参与度与互动性，让电视节目更加精彩。随着HTML5技术的到来，利用HTML5技术实现效果不亚于App的功能效果，且其本身非常轻量化，开发成本相对较低，而且浏览器能够摆脱对操作系统的依赖，实现跨终端、跨平台的极致体验。文章主要采用HTML5技术实现了互动媒体墙，提供签到、投票、竞猜、抽奖等功能，提供观众互动。
2 现场互动媒体墙总体设计
传统的节目录制现场场景交互，都是以实物道具作为活动环节，这样大大增加了栏目组策划的工作力度，操作起来也十分繁琐，无疑是要消耗活动方大量的人力物力去花时间去搞策划。就连一个小小的签到，也要统计人员准备人员名单，安排排队签到，之后还要统计，非常麻烦。
现在基于移动互联网的电视节目场景互动平台设计出现，可以用于新闻评论类节目、综艺真人选秀节目、少儿才艺大赛等各类电视节目等，为这些活动场合提供一个让现场观众参与活动的平台，如扫码签到、评论上墙、为选手投票、参与抽奖等等，这样不但提高观众参与度、引燃现场氛围，而且提高节目的收视效果，增加效益。关注以下几个重点：
1） 移动端设备的适配。目前手机型号各种各样，屏幕大小和比例也都不太相同，需要设计一套方案来适配，保证各型号手机样式的完整性。
2） 设备数据的实时展现。和观众设备进行交互时，演播室媒体墙大屏幕上的数据需要实时刷新，以展现最新的数据动态。
3） 互动活动环节模块的设计和实现。保证在大屏幕和手机设备上有很好的互动性和特效。
4） 数据模拟接口的设计和实现。在媒体墙大屏幕 PC 端和观众移动端设备中的数据展现，需要设计一套数据接口供调用，并将数据进行存取。
3 现场互动媒体墙软件体系
现场互动媒体墙设计主要包括PC端和移动端。
PC端主要有5个功能模块组成，整体功能框架如图1所示。
1） 签到墙。签到墙页面主要用于动态展示用户的签到情况，每当有人通过手机端网页进行签到，签到墙上就会动态显示签到人的头像和ID，并显示签到成功。
2） 节目单。节目单页面用于显示本次活动的主要节目环节，供观众查看。
3） 上墙。主持人可通过上墙功能显时上墙的文字信息，实现与观众的互动；
4） 抽奖。通过抽奖功能抽取活动幸运观众发放奖品，或是邀请上台参与活动。
5） 全屏切换。全屏切换功能，点击后可以切换到全屏，可以隐藏掉浏览器的功能条、搜索栏等。
移动端主要有4个功能模块组成，整体功能框架如图2所示。
1） 上墙信息。现场上墙信息用户可以在自己手机上看到，实时了解其观众的互动消息。
2） 节目单。用户可以通过自己手机查看本次活动的节目单。
3） 发送上墙。用户可以自己发表信息上墙，富有创造力的文字信息很有可能被主持人采纳展示。
4） 用户签到。用户可以将自己的姓名手机号输入进行签到，签到成功后大屏幕上将会显示该用户的头像和姓名。
4 电视节目现场互动媒体墙关键功能实现
4.1 PC端交互设计与关键功能实现
PC后端开发技术主要采用node.js express框架，所有数据都以json格式存储与交换。
PC端页面整体采用Vue组件化编程思路。其中核心的业务“签到”的页面使用网格布局更加直观的展现签到的用户。签到页面需要实时向服务端请求数据，不断刷新签到人数，以动态展现签到情况。这里数据展现使用了Vue的列表渲染机制，利用v-for渲染列表，同时页面会不断请求用户数据，不断刷新列表，触发产生css anmation的签到动画效果，如图3所示。
“上墙互动”业务页面采用对话框样式，类似于微信消息对话，竖向排列，更加直观。上墙信息采用列表渲染，同时通过axios不断向服务端请求实时的数据并加载到列表中，如图4所示。
4.2 移動端设计与关键功能实现
移动端也同样采用vue和路由的技术，整个页面使用 rem 技术实现适配，兼容各移动设备。
用户签到功能的页面也是一个表单页面，上方标题，中间两个输入框和下方的一个签到按钮.签到成功后会有弹窗提示成功，会在本地sessionStorage存储用户姓名、头像和手机号数据。如图5所示。
上墙互动业务的页面为一个表单页面上方为提示文字，中间为输入文本框，下方两个按钮。当点击上墙按钮后会检测你是否已经签到了，信息不为空则会发送上墙信息请求到后端，后端写入数据成功后，前端接收到响应信息提示上墙成功。如图6、图7所示。
5 结束语
文章设计与开发了基于移动互联网的电视节目现场互动平台，实现了主要功能，如嘉宾现场签到，评论上墙等。现场观众直接用智能手机可以既简单又方便的参与节目活动环节，并且在媒体墙呈现出来，主持人与现场观众的互动更加及时、自由和真实，让观众进入无成本与媒体实时互动的时代。
参考文献：
[1] 弗里曼. HTML5权威指南[M].计算机技术与发展[M].人民邮电出版社，2014.
[2] 弗兰纳根. JavaScript权威指南[M]. 6版.机械工业出版社，2012.
[3] 刘德山，章增安，孙美乔. HTML5 CSS3 Web前端开发技术[M]. 人民邮电出版社，2016.
[4] 张晓冬.全媒体环境下演播室IP化改造与多屏互动的应用[J].广播与电视技术，2017（3）.
[5] 黄永慧，陈程凯. HTML5在移动应用开发上的应用前景[J].计算机技术与发展，2013（7）.