基于HTML5標(biāo)準(zhǔn)的網(wǎng)絡(luò)多媒體作品創(chuàng)作

楊雨洲

摘要：H5標(biāo)準(zhǔn)的頁面規(guī)范且穩(wěn)定，新的語法特征支持視頻、音頻和canvas標(biāo)記以及其他新標(biāo)準(zhǔn)，這為在線的多媒體創(chuàng)作方式帶來了巨大變革。目前H5不僅支持用戶與編輯文檔之間的直接交互，還包含針對移動設(shè)備和PC端平臺自適應(yīng)性支持。更重要的是，從簡易的操性到豐富的延展性，H5可以滿足多層面的多媒體創(chuàng)作需要，這也是H5興起并廣泛傳播的重要原因。

關(guān)鍵詞：H5；多媒體；創(chuàng)作；傳播

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）04-0195-02

HTML5（簡稱H5）是網(wǎng)頁制作互動效果的一系列技術(shù)集合，2014年W3C （World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）與 WHATWG（Web Hypertext Application Technology Working Group，頁面超文本應(yīng)用技術(shù)工作組）將他們這一合作的成果正式推動成為新的行業(yè)標(biāo)準(zhǔn)規(guī)范。伴隨智能移動終端全球范圍內(nèi)的大規(guī)模普及使用，H5優(yōu)秀的特性帶來了更多良好的多媒體用戶體驗。H5標(biāo)準(zhǔn)的頁面規(guī)范且穩(wěn)定，更重要的是，新的語法特征支持視頻、音頻和canvas 標(biāo)記以及更多新標(biāo)準(zhǔn)，這些對在線多媒體的創(chuàng)作帶來了巨大變革。

1 基于在線平臺的創(chuàng)作

目前，已經(jīng)有非常多的在線平臺可以提供便利的基于H5的多媒體創(chuàng)作，例如：WPS秀堂、易企秀、Epub360、兔展等等。這些在線平臺不僅提供多媒體創(chuàng)作的頁面圖形素材、也提聲音素材、翻頁動畫、鏈接視頻以及填交表單等功能，還可以提供簡易傻瓜式的流程操作。這些在線平臺已經(jīng)將技術(shù)化繁為簡，只要用戶按照設(shè)計的固定制作流程操作，在無數(shù)的“模板”中選擇使用即可。假如用戶不希望使用模板，也可以在創(chuàng)作流程中根據(jù)需要重新組合各級元素，略加修改頁面和文本內(nèi)容，也可以完成一次“原創(chuàng)”多媒體創(chuàng)作。在線平臺都支持一鍵生成H5并發(fā)布分享，通過QQ、微信、微博等APP快速實現(xiàn)在線傳播，也可以生成二維碼供掃碼傳播。這就將在線多媒體創(chuàng)作的“設(shè)計——生產(chǎn)——發(fā)布”的技術(shù)難度降到了最低。

在相關(guān)在線平臺進(jìn)行H5創(chuàng)作只需要注冊賬號，便可以直接進(jìn)入創(chuàng)作頁面。免費用戶和付費用戶在選擇內(nèi)容的權(quán)限方面有所區(qū)別，選擇素材庫提供的頁面類型有所差異。用戶根據(jù)自己的需要確定頁面類型之后，開始修改頁面元素、文本內(nèi)容、頁面切換動畫以及背景音樂。最后還可以選擇是否需要表單頁，便于紀(jì)錄瀏覽者提交的信息。以上簡單概括了最簡易的使用H5進(jìn)行多媒體的流程，這種方式完成的H5類似于PPT。最常見的是朋友的喜帖、活動請柬或者會議邀請函等方式，多是由在線平臺提供的創(chuàng)作模板修改完成。

毫無疑問，使用在線平臺進(jìn)行H5創(chuàng)作的優(yōu)勢是門檻降低、經(jīng)濟(jì)實惠、效率頗高。只要愿意，人人都可以創(chuàng)作H5。但如果想要實現(xiàn)自由、獨立、生動有趣的H5創(chuàng)作，就必須跳脫出創(chuàng)作的固定“套路”，僅僅靠在線平臺提供的創(chuàng)作模塊根本無法滿足更高層次的創(chuàng)作需要。

2 基于前端技術(shù)的創(chuàng)作

掌握更多關(guān)于H5的新特性以及頁面前端的技術(shù)支持，是H5標(biāo)準(zhǔn)下進(jìn)行自由自主創(chuàng)作的前提。H5標(biāo)準(zhǔn)下多媒體創(chuàng)作的優(yōu)勢基于其新特性，例如基于HTML、CSS、DOM以及JavaScript，減少對外部插件的需求（比如 Flash），H5標(biāo)準(zhǔn)有更出色的錯誤處理能力，也更多取代腳本的標(biāo)記。此外，H5標(biāo)準(zhǔn)獨立于設(shè)備，可在線開發(fā)并且開發(fā)進(jìn)程對公眾透明等等。這些特性不僅使得H5比H4（HTML4）更優(yōu)秀，還可以使H5自身不斷進(jìn)行迭代完善。

簡單認(rèn)識一下前端層面，用于繪畫的 canvas 元素可以帶來更多互動色彩，比如手寫效果、涂抹效果等。在用于媒介回放的video（視頻）元素和audio（音頻）音頻元素，對本地離線存儲的更好的支持，不僅可以使得讀取速度更快，對音視頻播放的停頓、續(xù)播、跳轉(zhuǎn)都可以完成。新的特殊內(nèi)容元素，比如 article、footer、header、nav、section，新的表單控件，比如 calendar、date、time、email、url、search，大量的元素都可以廣泛支持。支持的瀏覽器以Chrome和Firefox、Opera擴(kuò)展性最好，MAC系統(tǒng)中默認(rèn)瀏覽器Safari也是可以支持，默認(rèn)IE以及其內(nèi)核瀏覽器并不是H5的最佳選擇。

許多原創(chuàng)性的H5都是有前端開發(fā)才能實現(xiàn)，依靠編寫代碼完成交互性是前端開發(fā)最大的特點。以麥當(dāng)勞推出宣傳造勢的吳亦凡邀請用戶《一起享受嘻哈小食光》 H5為例，以雙屏或多屏的互動形式觀看視頻，用戶選擇進(jìn)入觀看視頻，通過重力感應(yīng)，搖晃手機(jī)看視頻的完整版。觸摸屏幕時背景會由原本黑白變?yōu)椴噬?。視頻播放過程點擊時的顏色變換是由代碼實現(xiàn)。除了多屏互動之外還增加了可觸摸的動畫互動增加H5的互動。整段視頻被分為三屏播放，把視頻轉(zhuǎn)換成圖片，再由序列幀實現(xiàn)連續(xù)播放的畫面，得以隨心所欲實現(xiàn)多屏播放效果。點擊屏幕則出現(xiàn)的色彩光圈，也是由代碼實現(xiàn)完成的。黑白效果圖為視頻導(dǎo)出序列幀圖畫，再用傳送到播放頁面，播放頁面由代碼處理成黑白。

還有視頻音樂合成類H5，例如《天貓幻響電音節(jié)》，進(jìn)入首頁后是一個音樂節(jié)畫面，背景設(shè)計以藍(lán)紫色調(diào)為主，渲染出了一種狂歡的氣氛。彈出“想要做DJ嗎”界面，再以新手教程提示可創(chuàng)作出的15秒電音曲目，分別有“旋律”、“節(jié)奏”和“人聲”三個環(huán)節(jié)。用戶選擇并輕松實現(xiàn)創(chuàng)作，沒有代碼編寫是無法實現(xiàn)的。結(jié)尾用戶可以選擇”閉目聆聽“自己的作品，得到深度體驗。伴隨嘻哈風(fēng)盛行，用戶將成果輸出并分享傳播，穿透性極強。

擁有前端支持的多媒體創(chuàng)作里，代碼編寫是建構(gòu)H5互動效果的必要條件，互動方式的設(shè)計常常是別出心裁，充滿趣味。創(chuàng)作設(shè)計獨特的H5不僅傳播力強，穿透性好，帶來的口碑與參與效應(yīng)也有獨特的品牌價值和情感體驗。

3 基于設(shè)計理念的創(chuàng)作

設(shè)計不僅僅對于原創(chuàng)H5至關(guān)重要，通過在線網(wǎng)站創(chuàng)作H5也需要一定的設(shè)計思維，才能創(chuàng)作出美觀的H5。豐富的視聽元素、交互動畫使得H5在近兩年迅速成為了移動互聯(lián)網(wǎng)多媒體營銷的主要形式。除了程序員之外，設(shè)計師們的加入使得目前H5多媒體創(chuàng)作呈現(xiàn)層出不窮的新穎創(chuàng)意。當(dāng)下H5的主要設(shè)計類型有展示類、互動類以及傳感類。展示類H5，這一類設(shè)計主要以創(chuàng)意視頻、動畫、圖片的展示內(nèi)容為主。展示類設(shè)計的主要特點是不需要掌握代碼以及其他前端技術(shù)，許多在線平臺即可支持展示。互動類H5，這類設(shè)計以創(chuàng)作單屏滾動、手勢操作、多屏互動等方式進(jìn)行互動內(nèi)容設(shè)計，需要比較靈活地掌握前端技術(shù)，編寫代碼以及優(yōu)化測試。傳感類H5的設(shè)計不同于前兩種，這類設(shè)計依靠手機(jī)的傳感器實現(xiàn)，包括陀螺儀、GPS、攝像頭、麥克風(fēng)以及重力感應(yīng)等，這類H5非常具有利用移動終端進(jìn)行個性化傳播特點。傳感類H5需要前端開發(fā)能識別讀取用戶設(shè)備的數(shù)據(jù)，經(jīng)過綜合數(shù)據(jù)處理得到用戶個性化的H5效果，用戶再將這類個性化H5進(jìn)行分享，呈現(xiàn)幾何倍的傳播效果。2017年建軍節(jié)8億人刷爆的《快看吶！這是我的軍裝照》H5便屬于此類。

人民日報聯(lián)合騰訊天天P圖推出的軍裝照H5，設(shè)計初衷是慶祝中國人民解放軍建軍90周年，未曾料想實現(xiàn)了刷屏現(xiàn)象級H5。照片合成類H5讓用戶使用微信上傳圖片接口，由微信SDK接口識別是否人臉，再反饋回用戶使用人臉配軍裝。在互動中展現(xiàn)傳遞軍民一家的情感、傳播了軍裝知識。軍裝照的項目沒有采用特別復(fù)雜的生成樣式，基本上是按照年份劃分的，分為了男女照片版，每個版本有11個生成樣式，一共22個樣式。頁面背景用JPG圖片；滾動條由代碼控制。這次的H5借助天天P圖在人臉美化方面的圖像處理技術(shù)優(yōu)勢，做出圖片美化效果。

H5的設(shè)計除了我們眼前所見的部分之外，更多的是基于整個創(chuàng)作流程中對于各個環(huán)節(jié)的思考。一個出色H5的誕生，需要經(jīng)歷創(chuàng)作前期的設(shè)計策劃、執(zhí)行開發(fā)、數(shù)據(jù)分析三個階段。首先，結(jié)合實際需求進(jìn)行頭腦風(fēng)暴，結(jié)合H5的效用目標(biāo)來思考甚至發(fā)散思維，確立創(chuàng)意的同時結(jié)合前端技術(shù)考慮如何落地實現(xiàn)。然后進(jìn)入執(zhí)行開發(fā)階段，確立符合主題的視覺風(fēng)格、配樂聲效作。同時，程序員需要進(jìn)行代碼編寫或者借助第三方平臺進(jìn)行后臺編輯。完成編輯之后，測試上線基本標(biāo)志至此H5創(chuàng)作已經(jīng)完成。但對于創(chuàng)作H5的初衷來說，數(shù)據(jù)分析是構(gòu)建H5完整價值的最后也是最重要的組成部分，通過后臺數(shù)據(jù)顯示的用戶點擊數(shù)、停留時間、轉(zhuǎn)發(fā)率等等，都是構(gòu)成一個完整H5的重要部分。

4 場景化、視頻化的創(chuàng)作發(fā)展趨勢

伴隨著學(xué)習(xí)成本和前端開發(fā)成本的降低，在積累了不少經(jīng)驗的基礎(chǔ)上，程序員、設(shè)計師、媒體人對H5的掌握日益靈活，H5創(chuàng)作已經(jīng)開始出現(xiàn)一些新趨勢。首先，場景化的趨勢是借助H5的方式與日常生活接入，最有代表性的是人們?nèi)請笸瞥鰰r政新聞性非常強的H5，如《你有一份來自總理的神秘快遞》，將收快遞這樣的生活場景用H5的方式呈現(xiàn)，用戶感受到非常親切，內(nèi)容方式接地氣也就增加了轉(zhuǎn)載和互動。場景化的進(jìn)一步深化，目前有模擬AR融入場景，摳像合成技術(shù)，模擬沉浸式體驗，此類比較具有代表性的是《王小藝的朋友圈》，將真實人物錄制并摳像合成到朋友圈圖像背景上，設(shè)計互動動作，將新聞記者、新聞播報整個場景再現(xiàn)，直接帶領(lǐng)用戶進(jìn)入場景化體驗。場景化H5的參與度得到了極大的提升，用戶愿意停留的時間更長，互動性也增強。

伴隨短視頻的興起，拍客、直播、抖音等視頻元素成為影像的新潮流，也為H5創(chuàng)作帶來了生動豐富的用戶體驗。短視頻聲光化電的炫彩效果可以彌補H5制作的短板，也可以為H5數(shù)據(jù)瘦身，提高H5的流暢性和讀取效率。盡管短視頻的互動性看似較差，但彈幕、送花等視頻互動方式一直有充足的人氣，植入H5創(chuàng)作也僅是時間問題。豎屏方式的短視頻已經(jīng)和傳統(tǒng)影像形成了最大的外觀差異，移動終端效果躍然眼前，即時性、真實感、互動性的視頻元素為H5場景化帶來新的創(chuàng)作空間。為騰訊動漫APP宣傳推出的《薛之謙史上最瘋狂的廣告》H5中下圖像拉觸下拉打開視頻播放，采用豎屏播放隱藏進(jìn)度條，通過摳像合成的豎屏視頻始終保持移動終端的體驗，個人表演融合動漫角色場景融合。快節(jié)奏的情節(jié)設(shè)計讓用戶不至于在播放完之前終止觀看，最終達(dá)到目標(biāo)宣傳頁面，實現(xiàn)傳播目的。

視頻化、場景化作為H5創(chuàng)作發(fā)展的趨勢，為H5的創(chuàng)作提供了新的思路和方向。視頻內(nèi)容與場景有創(chuàng)意地融合表達(dá)，人們熟悉又倍感新鮮的方式更容易引發(fā)觀眾的共鳴和反饋，而立體化視頻與交互方式的建立是延續(xù)觀眾興趣以及提升視頻場景的關(guān)鍵，立體技術(shù)、前端代碼、藝術(shù)設(shè)計，H5多媒體創(chuàng)作的探索依然還在繼續(xù)進(jìn)行。