摘要：視頻合成器入門教程作者云荒杯傾是一個(gè)實(shí)時(shí)的，基于節(jié)點(diǎn)的注意不是基于視頻合成器。最簡(jiǎn)單的合成器就是直接將和連起來，不使用任何動(dòng)效。這樣就完成了最簡(jiǎn)單合成器。一個(gè)合成器就是一個(gè)數(shù)據(jù)源節(jié)點(diǎn)目標(biāo)節(jié)點(diǎn)特效節(jié)點(diǎn)的網(wǎng)絡(luò)。

作者：云荒杯傾

Seriously.js是一個(gè)實(shí)時(shí)的，基于節(jié)點(diǎn)（node）的（注意：不是基于nodejs）web視頻合成器。受after affects和nuke等專業(yè)軟件的啟發(fā)，Seriously.js能渲染高質(zhì)量的可交互的視頻動(dòng)態(tài)效果。

git clone https://github.com/brianchirl...

和其他js庫(kù)一樣，使用Seriously.js的第一步是在HTML頁(yè)面中加載Seriously.js的腳本庫(kù)。Seriously.js核心腳本（就是Seriously.js）和Seriously的各個(gè)動(dòng)效腳本（放在effects目錄下）是分開的，你可以按需加載核心腳本和動(dòng)效腳本。

代碼加載如下：

Seriously.js可以處理的數(shù)據(jù)源有video和image，本例中，使用img元素。在HTML中寫下：

Seriously.js一般將數(shù)據(jù)源的處理結(jié)果放在canvas上展示，所以，再在HTML上畫一個(gè)canvas：

通常我們會(huì)將數(shù)據(jù)源隱藏起來，不管是用css的display: none，還是用JavaScript創(chuàng)建一個(gè)不掛載任何dom元素的對(duì)象。不過本例為了你觀察效果，就不隱藏那個(gè)img了。

現(xiàn)在就可以使用Seriously.js寫腳本，以創(chuàng)建和渲染我們的合成器了。最簡(jiǎn)單的合成器就是直接將img和canvas連起來，不使用任何動(dòng)效。

    // 聲明變量
    var seriously, // 主對(duì)象
        colorbars, // img數(shù)據(jù)源對(duì)象
        target; // 目標(biāo)canvas對(duì)象
    
    seriously = new Seriously();
    
    // 創(chuàng)建數(shù)據(jù)源對(duì)象
    colorbars = seriously.source("#colorbars");
    
    // 創(chuàng)建目標(biāo)canvas對(duì)象
    target = seriously.target("#canvas");

下面代碼可以將img和canvas聯(lián)系起來：

    // 連接任何節(jié)點(diǎn)（node）作為canvas的數(shù)據(jù)源. 我們只有一個(gè)，就是img.
    target.source = colorbars;
    seriously.go();

當(dāng)我們創(chuàng)建了數(shù)據(jù)源對(duì)象（本例是img），目標(biāo)輸出對(duì)象（本例是canvas），并且建立好了數(shù)據(jù)源和目標(biāo)之間的聯(lián)系網(wǎng)絡(luò)之后，seriously.js并不會(huì)就幫我們渲染。我們需要執(zhí)行seriously.go()方法，才開始渲染。

現(xiàn)在你會(huì)看到那個(gè)圖片的兩個(gè)副本，一個(gè)是在img顯示的，一個(gè)是在canvas顯示的。

這樣就完成了最簡(jiǎn)單合成器。其實(shí)就是復(fù)制一份圖像到canvas。

如果只實(shí)現(xiàn)上面那個(gè)，就太無聊了。所以我們要繼續(xù)下一步，實(shí)現(xiàn)一個(gè)vignette特效。在最前面加載Seriously.js腳本那一節(jié)，我們已經(jīng)把vignette特效的腳本加載進(jìn)去了(就是下面那一行代碼)，現(xiàn)在要做的就是創(chuàng)建一個(gè)特效節(jié)點(diǎn)（node）,并且把這個(gè)節(jié)點(diǎn)插入到合成器的特定位置。

創(chuàng)建一個(gè)特效節(jié)點(diǎn)和創(chuàng)建數(shù)據(jù)源節(jié)點(diǎn)以及目標(biāo)節(jié)點(diǎn)類似，不過似乎更簡(jiǎn)單，只要在參數(shù)里面?zhèn)魈匦У拿志秃昧恕?/p>

    var vignette = seriously.effect("vignette");

OK，現(xiàn)在，所有節(jié)點(diǎn)又一次都創(chuàng)建好了。我們要把這些節(jié)點(diǎn)按順序連起來。一個(gè)Seriously合成器就是一個(gè)數(shù)據(jù)源節(jié)點(diǎn)、目標(biāo)節(jié)點(diǎn)、特效節(jié)點(diǎn)的網(wǎng)絡(luò)。這三種都是節(jié)點(diǎn)，images從一個(gè)特效節(jié)點(diǎn)傳到另一個(gè)特效節(jié)點(diǎn)，在新的特效節(jié)點(diǎn)進(jìn)行對(duì)應(yīng)的圖像修改，繼續(xù)傳到下一個(gè)特效節(jié)點(diǎn)，直到遇到target節(jié)點(diǎn)，也就是目標(biāo)，一般是canvas，就把最終結(jié)果顯示出來。特效節(jié)點(diǎn)可以有一個(gè)或者多個(gè)圖像數(shù)據(jù)源，輸出一個(gè)單幅圖片。

在本例，我們傳一副圖像從源節(jié)點(diǎn)到 vignette 節(jié)點(diǎn)，在 vignette 節(jié)點(diǎn)做了特效修改后，再傳到target目標(biāo)節(jié)點(diǎn)。所以完整的腳本如下：

    // 聲明變量
    var seriously, // 主對(duì)象
        colorbars, // 數(shù)據(jù)源圖像節(jié)點(diǎn)
        vignette, // 特效節(jié)點(diǎn)
        target; // 目標(biāo)節(jié)點(diǎn)
    
    seriously = new Seriously();
    colorbars = seriously.source("#colorbars");
    target = seriously.target("#canvas");
    vignette = seriously.effect("vignette");
    
    // 按正確順序連接所有節(jié)點(diǎn)
    vignette.source = colorbars;
    target.source = vignette;
    //渲染結(jié)果
    seriously.go();

重新加載頁(yè)面，就可以看到vignette特效了，圖像邊界變深色。

或者說是另一種腳本寫法。
上面代碼中：

// 按正確順序連接所有節(jié)點(diǎn)
    vignette.source = colorbars;

這一行其實(shí)可以簡(jiǎn)寫為：

    vignette.source = "#colorbars";    

因?yàn)閟eriously知道vignette.source后面一定要跟一個(gè)圖像htmlElement或者一個(gè)圖像節(jié)點(diǎn)（colorbars = seriously.source("#colorbars");），所以，如果你直接跳過colorbars = seriously.source("#colorbars")這一行，給它賦值一個(gè)HTMLElement，也是可以的。

這算是seriously為開發(fā)者提供的一種方便吧。

大多數(shù)特效盡管有默認(rèn)顯示的效果，但是對(duì)這些效果進(jìn)行微調(diào)也是經(jīng)常遇到的。在seriously中，每一種特效都有一些參數(shù)可以調(diào)整，我們現(xiàn)在用的這種vignette 特效，只有一個(gè)amount屬性，默認(rèn)值是1。

我們可以簡(jiǎn)單的按下面代碼設(shè)置一下這個(gè)參數(shù)。下面兩行你選哪行都行：

    vignette.amount = 10;
    //or...
    vignette.amount = 0.1;

seriously的特效參數(shù)的值一般是有特定范圍，比如這個(gè)amount，就有最小值：0。如果你給他設(shè)了一個(gè)負(fù)值，其實(shí)他會(huì)默認(rèn)重新設(shè)為0。

    vignette.amount = -42;
    console.log(vignette.amount); // 結(jié)果為0

另外，如果你給參數(shù)值設(shè)置了錯(cuò)誤的類型，它會(huì)重新設(shè)置成默認(rèn)值。比如下面：

    vignette.amount = "aaaaaaaaaaaaaa";
    console.log(vignette.amount); // 結(jié)果為1，上面說了amount的默認(rèn)值是1。

如何讓這個(gè)參數(shù)變得可交互呢？HTML5給input提供了type=“range”。我們可以用它讓amount參數(shù)的值在HTML頁(yè)面隨便調(diào)整。
html部分：

腳本部分：

vignette.amount = "#vignette-range";

或者這樣寫：

vignette.amount = document.getElementById("vignette-range"); 

現(xiàn)在你就可以在range條的范圍內(nèi)，任何調(diào)整amount的值了。