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

作者：云荒杯傾

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

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

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

代碼加載如下：

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

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

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

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

    // 聲明變量
    var seriously, // 主對象
        colorbars, // img數據源對象
        target; // 目標canvas對象
    
    seriously = new Seriously();
    
    // 創建數據源對象
    colorbars = seriously.source("#colorbars");
    
    // 創建目標canvas對象
    target = seriously.target("#canvas");

下面代碼可以將img和canvas聯系起來：

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

當我們創建了數據源對象（本例是img），目標輸出對象（本例是canvas），并且建立好了數據源和目標之間的聯系網絡之后，seriously.js并不會就幫我們渲染。我們需要執行seriously.go()方法，才開始渲染。

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

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

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

創建一個特效節點和創建數據源節點以及目標節點類似，不過似乎更簡單，只要在參數里面傳特效的名字就好了。

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

OK，現在，所有節點又一次都創建好了。我們要把這些節點按順序連起來。一個Seriously合成器就是一個數據源節點、目標節點、特效節點的網絡。這三種都是節點，images從一個特效節點傳到另一個特效節點，在新的特效節點進行對應的圖像修改，繼續傳到下一個特效節點，直到遇到target節點，也就是目標，一般是canvas，就把最終結果顯示出來。特效節點可以有一個或者多個圖像數據源，輸出一個單幅圖片。

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

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

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

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

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

這一行其實可以簡寫為：

    vignette.source = "#colorbars";    

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

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

大多數特效盡管有默認顯示的效果，但是對這些效果進行微調也是經常遇到的。在seriously中，每一種特效都有一些參數可以調整，我們現在用的這種vignette 特效，只有一個amount屬性，默認值是1。

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

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

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

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

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

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

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

腳本部分：

vignette.amount = "#vignette-range";

或者這樣寫：

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

現在你就可以在range條的范圍內，任何調整amount的值了。