Quick Start

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
Choose your application

No need to sign up for an account. Click next to continue.

Note:
  • Applications created in Quick Start are personal to this computer
  • Videos created in Quick Start can't be saved or shared with others
  • Applications are temporary
  • No access to a personal dashboard

Get Access to All Features:
Sign Up for Free Account

Don't have a website? We got you covered!

HEADER CODE

Here is the header code for your webpage:

<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-stable/ziggeo.css" />
<script src="//assets-cdn.ziggeo.com/v1-stable/ziggeo.js"></script>
<script>ZiggeoApi.token = "";</script>

Important: Your unique application token.

We have auto-generated this application token. It identifies your Ziggeo application and all associated videos. It is personal to you.

Notes:
  • You need to run this code on a server -- URLs starting with file:// will not work. See here.
  • This temporary application will only work on localhost and ziggeo.com. Sign up for a free account here to share with others or publish to the Internet.


Go ahead and record yourself to continue.

Use this code to display the recorder on your webpage:

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

Decoding the Code:

  • Recording time is limited to: 15 seconds
  • The size of the embedded recorder is: 320x240
  • It's all customizable and you can click on following link to see more parameters.

JavaScript Event
Use JavaScript to get notified when the video has been recorded:

<script>
ZiggeoApi.Events.on("submitted", function (data) {
    alert("The video with token " + data.video.token + " has been submitted!");
});
</script>

And here is the token of the video we have just recorded:

Click to play your video.

Use this code to display the player on your webpage:

<ziggeo ziggeo-video=''
    ziggeo-width=320
    ziggeo-height=240>
</ziggeo>

Decoding the Code:

  • It is set to play video with token:
  • The size of the embedded player is: 320x240
  • It's again all customizable.

JavaScript Access
JavaScript to obtain the raw url of the video file:

<script>
    ZiggeoApi.Videos.source('')
</script>

Automate the display of videos by querying Ziggeo for the list of all recorded videos.

Option 1: Use Javascript on the client-side to dynamically display videos using e.g. JQuery. To do that you could copy this 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>
Note: This is disabled by default for security purposes. See here.

Option 2: Install one of our server-side SDKs to obtain a list of videos.

Option 3: Enable indexing to be allowed through the client (browser) by following these steps:
  1. Log into your account
  2. Click on the application that you will use (we create one for you named "default")
  3. Under it click on Manage
  4. Now switch to "Authorization Settings" section
  5. Make sure that the checkbox next to "Allow client to perform index operation" is checked
  6. Save your changes
  7. It will now work for you

Congrats! You have just completed Ziggeo's Quick Start Tutorial.

Can you believe how simple it was? In just 6 steps, you chose your application, got the needed header, recorded your video and played it back. Next to that, you already know how to create your own videos gallery and everything with few simple lines of code! Of course, this is just scratching the surface of what you can actually do.

Sign up for a FREE account on Ziggeo - you can try out all our features and get your own personalized dashboard.

Sign up for Ziggeo

Looking for more? Well, do go on then and lets us familiarize you with our v2 player and recorder as well.

V2 of our player and recorder are both embeddings created by us from first line to the last. As such it offers much more than v1. In the same time, since it currently does not have all the events and properties added to it that we want it to have both are considered as in beta stages.

Why you would want to have v2?

  1. You can set different themes for your player and recorder
  2. v2 has events specific to one embedding regardless of how many you have on your page
  3. v2 offers you preview of video as it is uploaded and processed
  4. v2 checks if it can process the video right after upload, resulting in faster video acknowledgment
  5. v2 is built based on great experience making it easier to get what you want faster
  6. Parameters are named / renamed to make more sense and be easier accessible
  7. You can fully customize it yourself!

Convinced? Go to next step to get you started


Go ahead and record yourself to continue.

Use this code to display the recorder on your webpage:

<ziggeorecorder ziggeo-timelimit=15
    ziggeo-width=320
    ziggeo-height=240
    ziggeo-theme='modern'
    id="myRecorder">
</ziggeorecorder>

Decoding the Code:

  • Recording time is limited to: 15 seconds
  • The size of the embedded recorder is: 320x240
  • we specify the HTML element ID to allow us to find the recorder and attach event.
  • It's all customizable and you can click on following link to see more parameters.

JavaScript Event
Use JavaScript to get notified when the video has been recorded:

<script>
//we wait for page load to be finished (you could use jQuery ready event as well, or any such alternative that you prefer)
ZiggeoApi.Events.on("system_ready", function() {
    //Lets get the ziggeo-recorder element reference
    var element = document.getElementById('myRecorder');

    //now lets get the actual Ziggeo embedding / object that we can use
    var recorder = ZiggeoApi.V2.Recorder.findByElement(element);

    // we can also create a global event to fire each time video was uploaded
    recorder.on("verified", function () {
        alert("The video with token '" + recorder.get('video') + "' has been submitted!");
    });
});
</script>

And here is the token of the video we have just recorded:

Click to play your video.

Use this code to display the player on your webpage:

<ziggeoplayer ziggeo-video=''
    ziggeo-width=320
    ziggeo-height=240>
</ziggeoplayer>

Decoding the Code:

  • It is set to play video with token:
  • The size of the embedded player is: 320x240
  • It's again all customizable.

JavaScript Access
JavaScript to obtain the raw url of the video file:

<script>
    ZiggeoApi.Videos.source('')
</script>

Automate the display of videos by querying Ziggeo for the list of all recorded videos.

Option 1: Use Javascript on the client-side to dynamically display videos using e.g. JQuery. To do that you could copy this code:

<script>
    ZiggeoApi.Videos.index({}, {
        success: function (args, videos) {
            for (var i = 0; i < videos.length; ++i)
                $("body").append("<ziggeoplayer ziggeo-video='" + videos[i].token + "'></ziggeoplayer>");
        }
    });
</script>
Note: This is disabled by default for security purposes. See here.

Option 2: Install one of our server-side SDKs to obtain a list of videos.

Option 3: Enable indexing to be allowed through the client (browser) by following these steps:
  1. Log into your account
  2. Click on the application that you will use (we create one for you named "default")
  3. Under it click on Manage
  4. Now switch to "Authorization Settings" section
  5. Make sure that the checkbox next to "Allow client to perform index operation" is checked
  6. Save your changes
  7. It will now work for you

Congrats! You have just completed entire Ziggeo's Quick Start Tutorial.

Can you believe how simple it was and how easy it is to switch from v1 to v2 player and recorder?.

This is still just scratching the surface of what you can actually do with Ziggeo. Did we tickle your imagination? Do you have any questions? If you do just let us know by contacting us over email: support@ziggeo.com. Were are here to help and be there for you as you go through each step, so extend your hand and reach out to us when needed.

Sign up for a FREE account on Ziggeo - you can try out all our features and get your own personalized dashboard.

Sign up for Ziggeo