canvid.jsJavaScript 視頻播放

canvid 是個(gè)極小依賴的庫(kù)，可以在 canvas 元素上播放相對(duì)較短的視頻。

• 為什么不直接使用 HTML5 視頻？
  因?yàn)椴荒芮度牖蛘咴?iOS 自動(dòng)播放 HTML5 視頻

• 為什么比使用一個(gè)動(dòng)態(tài) GIF 更好？
  視頻轉(zhuǎn)換成 GIF

   效果特別不好，因?yàn)轭伾娜雨P(guān)系。同時(shí)，視頻 GIFs 的大小非常大。GIF 不能轉(zhuǎn)換成視頻，動(dòng)態(tài) GIFs 不能控制播放，不能暫停或者播放，或者延遲播放。

• 為什么只是 "相對(duì)較短" 的視頻？
  iOS 限制圖片的大小上限

• 為什么沒(méi)有音頻？
  canvid 不支持音頻，因?yàn)閯?dòng)態(tài) GIF 也不支持

安裝

npm

$ npm install --save canvid

git clone

$ git clone [email protected]:gka/canvid.git

使用

可以在 AMD，CommonJS 和瀏覽器全局中使用 canvid.js

var canvidControl = canvid({
    selector : '.video',
    videos: {
        clip1: { src: 'clip1.jpg', frames: 38, cols: 6 },
        clip2: { src: 'clip2.jpg', frames: 43, cols: 6, loops: 3 }
    },
    width: 500,
    height: 400,    loaded: function() {
        canvidControl.play('clip1');        // reverse playback
        // canvidControl.play('clip1', true);
    }
});