Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@isamua

swipejsで動画を再生。

はじめに。

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

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
5
Help us understand the problem. What are the problem?