swipejsで動画を再生。

はじめに。

Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。
画像を組み合わせたマンガ、動画、svgで書かれたvectorなどを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。

１回目「JavaScript版のSwipe Engine、swipejsを使う」はこちら。
http://qiita.com/isamua/items/5d40558fbed7f90b34e7

２回目「swipejsで画像のスライドショーを作成する」はこちら
http://qiita.com/isamua/items/5021c750b6e8383c82a6

３回目「swipejsのスライドショーでページめくりを変えて遊ぶ」はこちら
http://qiita.com/isamua/items/37cb69a1bd2eaa549d3f

4回目「swipejsで画像を動かして、次世代マンガを作る。」はこちら
http://qiita.com/isamua/items/291080fff9118ddfd628

５回目「swipejs timingでアニメーションを制御する」はこちら
http://qiita.com/isamua/items/85184662545ac0887a3d

動画を再生する。

動画を再生するのは簡単です。elementのvideoに動画のファイル名(url)を指定するだけです。

{
    "dimension":[576,1024],
    "pages": [
        {
            "elements": [
                {"text":"video"}
            ]
        },
        {
            "elements": [
                {"video":"1.qt", "x":0, "y":0}
            ]
        },
        {
            "elements": [
                {"video":"2.qt", "x":0, "y":0}
            ]
        },
        {
            "elements": [
                {"video":"3.qt", "x":0, "y":0}
            ]
        }
    ]
}

動画を動かしながら再生

位置の指定やscale, to, translate, durationも画像や文字と同様に使えます。ただし、js版では、toとscaleの組み合わせは正しく動作しません。translateとscaleの関係も画像と同様で、translateで移動した後に上下左右にscale処理されます。

{
    "dimension":[576,1024],
    "pages": [
        {
            "elements": [
                {"text":"video"}
            ]
        },
        {
            "duration": 1,
            "elements": [
                {"video":"1.qt", "x":0, "y":0, "scale": 0.5, "to": {"translate":[100,100] }}
            ]
        },
        {
            "duration": 1,
            "elements": [
                {"video":"2.qt", "x": -300, "y": -500, "scale": 0.7, "to": {"translate":[300,500]} }
            ]
        },
        {
            "elements": [
                {"video":"3.qt", "x":0, "y":0}
            ]
        }
    ]
}

複数の動画を再生する。

１つのページに複数の動画を置くこともできます。

{
    "dimension":[1024,1024],
    "pages": [
        {
            "elements": [
                {"text":"video"}
            ]
        },
        {
            "elements": [
                {"video":"1.qt", "x":0, "y":0, "h": 1024, "w": 512},
                {"video":"2.qt", "x": 512, "y": 0, "h": 1024, "w": 512 }
            ]
        }
    ]
}

完成したサンプルはこちら。

動画を表示して再生

http://www.swipejs.net/sample6/sample1.html
http://www.swipejs.net/sample6/video.swipe

動画にtranslateやscaleを使う

http://www.swipejs.net/sample6/sample2.html
http://www.swipejs.net/sample6/video2.swipe

複数の動画を再生する

http://www.swipejs.net/sample6/sample3.html
http://www.swipejs.net/sample6/video3.swipe

@snakajima さんから codepenというweb上でjavascriptやhtmlを編集できるサイトを教えていただきました。これを使った動画のサンプルはこちら。