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

[Herokuアドオン]Ziggioアドオンを使って動画をwebサイトに組込む

More than 3 years have passed since last update.

Heroku Advent Calendar 2015の19日目の記事ということで、
herokuの動画を扱うZiggeoというアドオンを紹介します。


Ziggeo
https://elements.heroku.com/addons/ziggeo

概要&特徴

公式サイト
https://ssl.ziggeo.com/why-ziggeo

動画のアップロード

  • ziggeoのダッシュボード
  • SDKs iOSやAndroid端末から操作が可能

セキュリティ

  • 限られた人達が閲覧&アップできるようにpermission設定が可能

再接続

  • 動画のアップロード途中でインターネット接続が不可になってもローカルに情報を保存しておき、再度接続したときに前回の続きからアップロードが始まる

外部サービスとの連携

  • オプションでfacebookやyoutubeに自動的にShareするように設定が可能(有料枠)

エフェクト

  • instagramのようにエフェクトを掛けることが可能(有料枠)

Hosting/Storage

  • サードパーティのサービスを使用することが可能(S3にアップなど)

料金体系

ひとまず無料枠をざっくりご紹介します。
- ホスティング(動画のアップロード) : 月100分まで
- レコーディング : 月200分まで
- 合計再生時間 : 月1000分まで
- permission設定
など
facebookやyoutubeとの連携、エフェクトは有料です。

やってみた。

アドオン追加

$ heroku addons:create ziggeo:free

スクリーンショット-2015-12-16-12.35.31.jpg

ziggeoサービス読み込み

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="//assets-cdn.ziggeo.com/css/ziggeo-v1.css" />
    <script src="//assets-cdn.ziggeo.com/js/ziggeo-v1.js"></script>
    <script>ZiggeoApi.token = "your application token";</script>
</head>
<body>
...

token情報は
ダッシュボードから
作成したアプリケーションを選択すると出てきます。
Application Tokenを上記script(ZiggeoApi.token)に入れてください。
スクリーンショット 2015-12-16 11.06.14.png

ビデオレコーダーを埋め込む

...
<body>
<ziggeo ziggeo-limit=15
        ziggeo-width=320
        ziggeo-height=240>
</ziggeo>
</body>
</html>

ziggeo属性については公式リファレンスのParametersに記載されています。
https://ssl.ziggeo.com/reference#client-integration

ziggeo-limitは録画時間をmax15秒にするということですね。

ここで一旦表示を見るためにサーバーを立ち上げます

$ php -S localhost:8000

スクリーンショット 2015-12-16 11.23.51.png

レコーダーが埋め込まれていますね。
レコーダーはcssでデザインをカスタマイズすることが可能です。

クリックすると録画に進めます。
スクリーンショット 2015-12-19 9.21.44.png

ダッシュボードのVideosで録画できたものを確認できます。
ここから動画を投稿することも可能です。
スクリーンショット-2015-12-19-9.25.22.jpg

録画したものをサイトに埋め込む

...
<body>
<ziggeo ziggeo-video='your video code'
        ziggeo-width=320
        ziggeo-height=240>
</ziggeo>
</body>
</html>

codeはダッシュボードのvideosから確認できます。

表示を確認してみましょう。

スクリーンショット 2015-12-19 9.29.10.png

無事に埋め込まれましたね。

アップした動画のcodeを自動的に取得して表示する

    ...
    <script>
        ZiggeoApi.Videos.index({}, {
            success: function (args, videos) {
                for (var i = 0; i < videos.length; ++i)
                    $("body").append("<ziggeo ziggeo-video='" + videos[i].token + "'></ziggeo>");
            }
        });
    </script>
</head>
<body>
</body>
</html>

ここで注意。
401エラーが返ってきますので、設定が必要です。

ダッシュボードのManageからAuthorization Settingsにいき、
「Client is allowed to perform the index oparation」
にチェックを入れましょう。

スクリーンショット 2015-12-16 12.02.05.png

スクリーンショット 2015-12-16 12.02.21.png

取得できました。
スクリーンショット 2015-12-19 9.23.32.png

お疲れ様でした。

動画のアップロード、サイトへの表示がすごく簡単です。
iphoneのカメラから動画を撮ってすぐ投稿できました。

カスタマイズなどは公式ドキュメントへ
https://ssl.ziggeo.com/docs

Why do not you register as a user and use Qiita more conveniently?
  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
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