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

作者：云荒杯傾

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

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

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

代碼加載如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這一行其實可以簡寫為：

    vignette.source = "#colorbars";    

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

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

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

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

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

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

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

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

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

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

腳本部分：

vignette.amount = "#vignette-range";

或者這樣寫：

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

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