基于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中下圖像拉觸下拉打開視頻播放，采用豎屏播放隱藏進度條，通過摳像合成的豎屏視頻始終保持移動終端的體驗，個人表演融合動漫角色場景融合?？旃澴嗟那楣澰O計讓用戶不至于在播放完之前終止觀看，最終達到目標宣傳頁面，實現傳播目的。

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