Module 開發 – runwayShow

 

筆者非常喜愛 Amazon 的服飾 video 應用, 透過 video 詮釋, 讓 user 可以更清楚的了解的服飾穿上身後的真實呈現的狀態, 也可以避免一些不合適退貨的情況發生

本 module 的開發便是本著這樣的初衷下去開發的, 除了承襲 Amazon 的 interaction 之外, 另外多了一些 feature 供 developer 作更靈活的應用, 由於是採用 fluid design, 所以不管當前的 resolution 如何變化, 都不會撼動其呈現效果, 除此之外, 更加上 i13n tracking, 讓我們可以更快速的追蹤到 user 的使用情況喔!

希望可以透過這類 video 的應用, 讓國內的 e-commerce based 的 website 也可以擁有這些有趣的 video 應用.

runwayShow 這個 module 是 web components based, 會使用這樣的技術, 就是希望將套用成本降至最低, 並且可以廣泛的應用在各個 page 以及服務, 透過簡單的新 html tag – <runway-show>的置入便可以瞬間擁有這樣有趣的呈現, 不需要透過額外的 init, 可以說方便非常喔!

※ 請透過點擊下方 demo 網址, 一同領略 runwayShow 的魅力吧! runwayShow: http://mei.homin.com.tw/runwayShowP…

在上方的 demo 中, 我們可以看到 runwayShow 基本上就是由一張靜態相片以及 video 所組成, 一般狀態的時候, 當 runwayShow 進行播放的時候, 便會驅動我們所準備好的 video, 所以使用者便可以清楚的看到影片中 model 透過婀娜多姿的動作, 來呈現穿著該衣物的姿態, 讓使用者可以清楚的了解該衣服的材質以及實際著裝後的真實體驗, 更可以加深使用者的印像以及購買意願

透過 runwayShow 所提供的 method, 我們可以藉由 call 該 method 來使 runwayShow 進行 video play

runwayShow play 狀態時, 則會開始播放我們所準備好的 video

此外, runwayShow 還有提供另一個比較少見的 feature – video 放大鏡, 當使用者滑鼠 hover 到 runwayShow 時, 便可以在其左邊(或者右邊)區塊呈現局部區塊放大鏡的效果

video 放大鏡效果

以上便是 runwayShow 主要的 work flow, 在 demo link 中, 筆者事先準備的腳本如下

  1. 輪流播放 runwayShow, 先從左邊的開始, 結束後便開始播放右邊區塊
  2. 右邊的 runwayShow 播放完畢之後, 分別賦予左右區塊不同的使命, 如同下圖所示

左邊 hover 後, 便會自動進行 play, 也就是說放大鏡所呈現出來的畫面亦是動態的效果, 右邊則維持原樣

如何套用 runwayShow 到 web page 中 ?

runwayShow 是一個獨立的 web component, 所有的行為和樣式都完整的封裝起來, developer 只要將特定的 HTML tag – <runway-show> 放入頁面上任何想要擺放的位置即可, 不需要額外作任何 JavaScript init 的動作

HTML:

<runway-show>    < h3 >runwayShow< /h3 >    < a href="http://mei.homin.com.tw/" title="runwayShow" target="mei" >        < video poster="runwayShow.png" preload="none" >            < source src="runwayShow.mp4" type="video/mp4" >        < /video >    < /a ></runway-show>

另外, JavaScript 也要將之 require 進來

< script async src="js/pack-runway-show.js" >< /script >

完成以上設置之後, runwayShow 便可以正常運作了, runwayShow 在 init 時, 會根據 element 上這些 attribute 的設置, 來進行基本的 data binding 動作, 以上面範例為例, 我們可以拿到的 data 如下

  • link: 期待被點擊後導去的網址, 該資訊是透過 a.href 來取得
  • title: 當滑鼠 hover 過去 runwayShow 時, 期待出現的提示字, 它是透過 a.title 來取得
  • target: 用來設置點擊後是原頁跳轉還是特定的新開視窗, 它是透過 a.target 取得, 如果沒有設置的話, default 為 runway-show
  • thumbnail: runwayShow 的靜態圖設置, 直接透過 video.poster 來取得
  • video source: runwayShow play 的 video 來源, 透過 video>source.src 來取得

另外, 也可以透過 JSON String 的方式來帶入相關初始化的 data, 透過 config 的設置, 可以讓 developer 可以讓 <runway-show> 有更多元且客製化處理喔!

<runway-show data-conf="JSON String">    < h3 >runwayShow< /h3 ></runway-show>

以下為相關的 config 設置

{    "link": "http://mei.homin.com.tw/",    "title": "runwsyShow",    "target": "mei",    "poster": "runwayShow.png",    "posterHiRes": "runwayShow-HiRes.png",    "aspect": "right",    "zoom": "2.2",    "triggerByHover": false,    "videoHiRes": "runwayShow-HiRes.mp4",    "source": {        "src": "runwayShow.mp4"        "type": "mp4"    }}

基本上這些參數的設定與代表意義就跟上面 data 一樣, 所以重複的部分筆者就先略過, 僅講解比較特殊的設定

  • posterHiRes: 這是用來設置較高解析度的 thumbnail, 主要用於放大鏡內呈現, 讓 user 可以看到更細部的紋理
  • aspect: left || right, 用來設置放大鏡區塊的顯示位置, 可以為 runwayShow 的左側(left) 或者是右側(right), default 為 right
  • zoom: 設定放大鏡的放大倍率, default 為 2.2
  • triggerByHover: true || false, 用來設置當滑鼠 hover 到 runwayShow 的時候, 是否要動態驅動 video play.
  • videoHiRes: 用來設置較高解析度的 video source, 住要用於放大境內的呈現, 讓 user 可以看到更細部的紋理

以上兩種參數設定方是可以混搭, 如果有重疊的部分則是以 data-conf 內的設置為主.

筆者已將 runwayShow 相關的 code 置於 github 中, 有興趣的朋友也可以前往相關位址進行觀看

※ github – runwayShow: https://github.com/meistudioli/runw…

runwayShow 所提供各種 method

  • set: 用來設定 runwayShow 的部分內容, 如果需要動態調整其內容的話, 便可以透過這個 method 來做 … (github)
var runwayShow = document.querySelector('runway-show');
//zoomrunwayShow.set('zoom', 2.2);
//triggerByHoverrunwayShow.set('triggerByHover', true);
//aspectrunwayShow.set('aspect', 'left');
//titlerunwayShow.set('title', 'runwayShow new title');
//linkrunwayShow.set('link', 'http://mei.homin.com.tw/');
//targetrunwayShow.set('target', 'mei');
  • get: 用來取得當前 runwayShow 的設定值 … (github)
var runwayShow = document.querySelector('runway-show');
//zoomrunwayShow.get('zoom');
//aspectrunwayShow.get('aspect');
//staterunwayShow.get('state'); //return play || pause
  • play: 讓 runwayShow 進行 play 狀態 … (github)
var runwayShow = document.querySelector('runway-show');runwayShow.play();
  • pause: 讓 runwayShow 進行 pause 狀態 … (github)
var runwayShow = document.querySelector('runway-show');runwayShow.pause();
  • addCallback: 動態綁定 callBack function, 當 runwayShow 出現 mouseover, mouseout, mousemove, play, pause, ended 狀態的時候, 便會 call 我們所綁定的 callBack function (同樣的 callBack function 不會進行重複綁定) … (github)
var runwayShow = document.querySelector('runway-show');
function callBack(action, host) {     console.log(arguments);}
runwayShow.addCallback(callBack);
  • removeCallBack: 動態移除 callBack function (callBack function 非在綁定 queue 中時, 則不會作任何處理) … (github)

runwayShow 亦可透過參數的存取來驅動其行為

  • state: 取得當前 runwayShow 的播放狀態 (read-only)
var runwayShow = document.querySelector('runway-show');
console.log(runwayShow.state);//true || false
//same with runwayShow.get('state')
  • active: 讓 runwayShow 進行 play or pause
var runwayShow = document.querySelector('runway-show');runwayShow.active = true;//true || false
//same with runwayShow.play()
  • zoom: 設定或者取得當前放大鏡的放大倍率
var runwayShow = document.querySelector('runway-show');
console.log(runwayShow.zoom); //samw with runwayShow.get('zoom')
//setting zoomrunwayShow.zoom = 5;

runwayShow attribute 操作的點點滴滴

除了 <runway-show> 本身提供的 method 外, 其實也可以透過 attribute 變化來得到或者操作一些當前的狀態喔!

  • runway-show[data-aspect]: 用來設置放大鏡區塊的顯示位置, 其值僅支援 left || right
var runwayShow = document.querySelector('runway-show');
runwayShow.setAttribute('data-aspect', 'left');//same with runwayShow.set('aspect', 'left');
  • runway-show[active]: 一旦設置, 便會驅動 runwayShow 進行 play, 反之則進行 pause
var runwayShow = document.querySelector('runway-show');
runwayShow.setAttribute('active', 'active');//same with runwayShow.play();
runwayShow.removeAttribute('active');//same with runwayShow.pause();

我們可以看到 runwayShow 支援的 method, 參數設置以及 attribute 變化, 可以說是相當的多元, 或許部分重疊的功能, 不過這些設計都是為了讓 developer 有更多的變化, 讓 developer 可以依照自己的開發習慣來找到適合使用的套路喔!

如何 tracking user 使用成效 ?

相信每位有心且專業 PM 都會想要知道所開發的 feature 是否被 user 廣泛接受, 就連 developer 也不例外, 所以 runwayShow亦提供 i13n tracking 喔! 其主要的 tracking tool 為筆者前一陣子所開發的 Google Analytics 補強計畫 – gaExt.js, 只要出現以下狀態均會發送 beacon 出來喔!

  • moduleView: 當 runwayShow 完成 init 後, 便會發出這個 event, 方便我們計算其 CTR.
  • runwayShowAct: 只要出現 play, pause, ended 便會發出這個 beacon, 如果 triggerByHover = true 時, 亦會多追加 mouseover, mousemove, mouseout.

以上, 便是 runwayShow 的相關使用與分享, 有興趣的朋友們請不用客氣, 可以直接使用, 也請不吝一同討論與指教喔!

測試環境

  • OS: Windows 7
  • Browser: Chrome Version 52.0.2743.116 m (64-bit) , Firefox 48.0.2, Internet Explorer Version 11.0.9600.18282

Reference

轉載文章 – Module 開發 – runwayShow

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *