基于HTML5标准的网络多媒体作品创作

杨雨洲

摘要：H5标准的页面规范且稳定，新的语法特征支持视频、音频和canvas标记以及其他新标准，这为在线的多媒体创作方式带来了巨大变革。目前H5不仅支持用户与编辑文档之间的直接交互，还包含针对移动设备和PC端平台自适应性支持。更重要的是，从简易的操性到丰富的延展性，H5可以满足多层面的多媒体创作需要，这也是H5兴起并广泛传播的重要原因。

关键词：H5；多媒体；创作；传播

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）04-0195-02

HTML5（简称H5）是网页制作互动效果的一系列技术集合，2014年W3C （World Wide Web Consortium，万维网联盟）与 WHATWG（Web Hypertext Application Technology Working Group，页面超文本应用技术工作组）将他们这一合作的成果正式推动成为新的行业标准规范。伴随智能移动终端全球范围内的大规模普及使用，H5优秀的特性带来了更多良好的多媒体用户体验。H5标准的页面规范且稳定，更重要的是，新的语法特征支持视频、音频和canvas 标记以及更多新标准，这些对在线多媒体的创作带来了巨大变革。

1 基于在线平台的创作

目前，已经有非常多的在线平台可以提供便利的基于H5的多媒体创作，例如：WPS秀堂、易企秀、Epub360、兔展等等。這些在线平台不仅提供多媒体创作的页面图形素材、也提声音素材、翻页动画、链接视频以及填交表单等功能，还可以提供简易傻瓜式的流程操作。这些在线平台已经将技术化繁为简，只要用户按照设计的固定制作流程操作，在无数的“模板”中选择使用即可。假如用户不希望使用模板，也可以在创作流程中根据需要重新组合各级元素，略加修改页面和文本内容，也可以完成一次“原创”多媒体创作。在线平台都支持一键生成H5并发布分享，通过QQ、微信、微博等APP快速实现在线传播，也可以生成二维码供扫码传播。这就将在线多媒体创作的“设计——生产——发布”的技术难度降到了最低。

在相关在线平台进行H5创作只需要注册账号，便可以直接进入创作页面。免费用户和付费用户在选择内容的权限方面有所区别，选择素材库提供的页面类型有所差异。用户根据自己的需要确定页面类型之后，开始修改页面元素、文本内容、页面切换动画以及背景音乐。最后还可以选择是否需要表单页，便于纪录浏览者提交的信息。以上简单概括了最简易的使用H5进行多媒体的流程，这种方式完成的H5类似于PPT。最常见的是朋友的喜帖、活动请柬或者会议邀请函等方式，多是由在线平台提供的创作模板修改完成。

毫无疑问，使用在线平台进行H5创作的优势是门槛降低、经济实惠、效率颇高。只要愿意，人人都可以创作H5。但如果想要实现自由、独立、生动有趣的H5创作，就必须跳脱出创作的固定“套路”，仅仅靠在线平台提供的创作模块根本无法满足更高层次的创作需要。

2 基于前端技术的创作

掌握更多关于H5的新特性以及页面前端的技术支持，是H5标准下进行自由自主创作的前提。H5标准下多媒体创作的优势基于其新特性，例如基于HTML、CSS、DOM以及JavaScript，减少对外部插件的需求（比如 Flash），H5标准有更出色的错误处理能力，也更多取代脚本的标记。此外，H5标准独立于设备，可在线开发并且开发进程对公众透明等等。这些特性不仅使得H5比H4（HTML4）更优秀，还可以使H5自身不断进行迭代完善。

简单认识一下前端层面，用于绘画的 canvas 元素可以带来更多互动色彩，比如手写效果、涂抹效果等。在用于媒介回放的video（视频）元素和audio（音频）音频元素，对本地离线存储的更好的支持，不仅可以使得读取速度更快，对音视频播放的停顿、续播、跳转都可以完成。新的特殊内容元素，比如 article、footer、header、nav、section，新的表单控件，比如 calendar、date、time、email、url、search，大量的元素都可以广泛支持。支持的浏览器以Chrome和Firefox、Opera扩展性最好，MAC系统中默认浏览器Safari也是可以支持，默认IE以及其内核浏览器并不是H5的最佳选择。

许多原创性的H5都是有前端开发才能实现，依靠编写代码完成交互性是前端开发最大的特点。以麦当劳推出宣传造势的吴亦凡邀请用户《一起享受嘻哈小食光》 H5为例，以双屏或多屏的互动形式观看视频，用户选择进入观看视频，通过重力感应，摇晃手机看视频的完整版。触摸屏幕时背景会由原本黑白变为彩色。视频播放过程点击时的颜色变换是由代码实现。除了多屏互动之外还增加了可触摸的动画互动增加H5的互动。整段视频被分为三屏播放，把视频转换成图片，再由序列帧实现连续播放的画面，得以随心所欲实现多屏播放效果。点击屏幕则出现的色彩光圈，也是由代码实现完成的。黑白效果图为视频导出序列帧图画，再用传送到播放页面，播放页面由代码处理成黑白。

还有视频音乐合成类H5，例如《天猫幻响电音节》，进入首页后是一个音乐节画面，背景设计以蓝紫色调为主，渲染出了一种狂欢的气氛。弹出“想要做DJ吗”界面，再以新手教程提示可创作出的15秒电音曲目，分别有“旋律”、“节奏”和“人声”三个环节。用户选择并轻松实现创作，没有代码编写是无法实现的。结尾用户可以选择”闭目聆听“自己的作品，得到深度体验。伴随嘻哈风盛行，用户将成果输出并分享传播，穿透性极强。

拥有前端支持的多媒体创作里，代码编写是建构H5互动效果的必要条件，互动方式的设计常常是别出心裁，充满趣味。创作设计独特的H5不仅传播力强，穿透性好，带来的口碑与参与效应也有独特的品牌价值和情感体验。

3 基于设计理念的创作

设计不仅仅对于原创H5至关重要，通过在线网站创作H5也需要一定的设计思维，才能创作出美观的H5。丰富的视听元素、交互动画使得H5在近两年迅速成为了移动互联网多媒体营销的主要形式。除了程序员之外，设计师们的加入使得目前H5多媒体创作呈现层出不穷的新颖创意。当下H5的主要设计类型有展示类、互动类以及传感类。展示类H5，这一类设计主要以创意视频、动画、图片的展示内容为主。展示类设计的主要特点是不需要掌握代码以及其他前端技术，许多在线平台即可支持展示。互动类H5，这类设计以创作单屏滚动、手势操作、多屏互动等方式进行互动内容设计，需要比较灵活地掌握前端技术，编写代码以及优化测试。传感类H5的设计不同于前两种，这类设计依靠手机的传感器实现，包括陀螺仪、GPS、摄像头、麦克风以及重力感应等，这类H5非常具有利用移动终端进行个性化传播特点。传感类H5需要前端开发能识别读取用户设备的数据，经过综合数据处理得到用户个性化的H5效果，用户再将这类个性化H5进行分享，呈现几何倍的传播效果。2017年建军节8亿人刷爆的《快看呐！这是我的军装照》H5便属于此类。

人民日报联合腾讯天天P图推出的军装照H5，设计初衷是庆祝中国人民解放军建军90周年，未曾料想实现了刷屏现象级H5。照片合成类H5让用户使用微信上传图片接口，由微信SDK接口识别是否人脸，再反馈回用户使用人脸配军装。在互动中展现传递军民一家的情感、传播了军装知识。军装照的项目没有采用特别复杂的生成样式，基本上是按照年份划分的，分为了男女照片版，每个版本有11个生成样式，一共22个样式。页面背景用JPG图片；滚动条由代码控制。这次的H5借助天天P图在人脸美化方面的图像处理技术优势，做出图片美化效果。

H5的设计除了我们眼前所见的部分之外，更多的是基于整个创作流程中对于各个环节的思考。一个出色H5的诞生，需要经历创作前期的设计策划、执行开发、数据分析三个阶段。首先，结合实际需求进行头脑风暴，结合H5的效用目标来思考甚至发散思维，确立创意的同时结合前端技术考虑如何落地实现。然后进入执行开发阶段，确立符合主题的视觉风格、配乐声效作。同时，程序员需要进行代码编写或者借助第三方平台进行后台编辑。完成编辑之后，测试上线基本标志至此H5创作已经完成。但对于创作H5的初衷来说，数据分析是构建H5完整价值的最后也是最重要的组成部分，通过后台数据显示的用户点击数、停留时间、转发率等等，都是构成一个完整H5的重要部分。

4 场景化、视频化的创作发展趋势

伴随着学习成本和前端开发成本的降低，在积累了不少经验的基础上，程序员、设计师、媒体人对H5的掌握日益灵活，H5创作已经开始出现一些新趋势。首先，场景化的趋势是借助H5的方式与日常生活接入，最有代表性的是人们日报推出时政新闻性非常强的H5，如《你有一份来自总理的神秘快递》，将收快递这样的生活场景用H5的方式呈现，用户感受到非常亲切，内容方式接地气也就增加了转载和互动。场景化的进一步深化，目前有模拟AR融入场景，抠像合成技术，模拟沉浸式体验，此类比较具有代表性的是《王小藝的朋友圈》，将真实人物录制并抠像合成到朋友圈图像背景上，设计互动动作，将新闻记者、新闻播报整个场景再现，直接带领用户进入场景化体验。场景化H5的参与度得到了极大的提升，用户愿意停留的时间更长，互动性也增强。

伴随短视频的兴起，拍客、直播、抖音等视频元素成为影像的新潮流，也为H5创作带来了生动丰富的用户体验。短视频声光化电的炫彩效果可以弥补H5制作的短板，也可以为H5数据瘦身，提高H5的流畅性和读取效率。尽管短视频的互动性看似较差，但弹幕、送花等视频互动方式一直有充足的人气，植入H5创作也仅是时间问题。竖屏方式的短视频已经和传统影像形成了最大的外观差异，移动终端效果跃然眼前，即时性、真实感、互动性的视频元素为H5场景化带来新的创作空间。为腾讯动漫APP宣传推出的《薛之谦史上最疯狂的广告》H5中下图像拉触下拉打开视频播放，采用竖屏播放隐藏进度条，通过抠像合成的竖屏视频始终保持移动终端的体验，个人表演融合动漫角色场景融合。快节奏的情节设计让用户不至于在播放完之前终止观看，最终达到目标宣传页面，实现传播目的。

视频化、场景化作为H5创作发展的趋势，为H5的创作提供了新的思路和方向。视频内容与场景有创意地融合表达，人们熟悉又倍感新鲜的方式更容易引发观众的共鸣和反馈，而立体化视频与交互方式的建立是延续观众兴趣以及提升视频场景的关键，立体技术、前端代码、艺术设计，H5多媒体创作的探索依然还在继续进行。