Help us understand the problem. What is going on with this article?

swipejsで動画を再生。

More than 3 years have passed since last update.

はじめに。

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

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

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

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

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

5回目「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}
            ]
        }
    ]
}


複数の動画を再生する。

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

{
    "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を編集できるサイトを教えていただきました。これを使った動画のサンプルはこちら。

http://codepen.io/isamua/full/QGEmYX/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした