LoginSignup
11

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-12-19

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11