Documentation

  • JavaScript Version

Creating interaction between your website, browser and embedding(s) is quite easy.

You can choose one of the following methods:

  1. Embedding through HTML code
  2. Embedding through JavaScript
  3. Creating a popup with embedding (through JavaScript)

This is a great way to create embedding on your pages since it allows you to define few 'templates' that you would like to use, and you can simply output the one that you need and where you need it.

Since it is done through HTML, it means that you can quite easily add it to your website even if you are not familiar with HTML or JavaScript and have our SDK do all that is needed to turn that into your player, recorder, re-recorder, uploader, etc.

Quick example of video player would be the following:

<ziggeo
    ziggeo-video="VIDEO_TOKEN"
    ziggeo-width=640
    ziggeo-height=480>
</ziggeo>
  • This would create embedding 640 pixels in width and 480 pixels in height, which would play the video we specified in video parameter.

Quick example of the video recorder would be the following:

<ziggeo
    ziggeo-width=640
    ziggeo-height=480>
</ziggeo>
  • As you can see creating a recorder is quite simple. The recorder itself would be of 640 pixels in width and 480 pixels in height.

Quick example of video player would be the following:

<ziggeoplayer
    ziggeo-video="VIDEO_TOKEN"
    ziggeo-width=640
    ziggeo-height=480>
</ziggeoplayer>
  • This would create embedding 640 pixels in width and 480 pixels in height, which would play the video we specified in video parameter.
  • The v2 Video player has been added to our SDK in r2, so you need r2 or above.

Quick example of the video recorder would be the following:

<ziggeorecorder
    ziggeo-width=640
    ziggeo-height=480>
</ziggeorecorder>
  • As you can see creating a recorder is quite simple. The recorder itself would be of 640 pixels in width and 480 pixels in height.
  • The v2 recorder has been added to our SDK in r14, so you need r14 or above.
  1. The HTML embedding is great if you know upfront what you want to have the embedding do, how to behave and the element holding it is existing on page load.
  2. You do not need to know HTML nor JavaScript to use it

JavaScript embedding is great way for embedding Ziggeo into your pages if your pages are dynamic.

It allows you to specify the embedding code that you want to use on the fly, meaning that regardless of how complex your website design is or what kind of interaction you are creating, this will allow you to be flexible with your embeddings as well.

Quick example of video player would be the following:

<div id="replace_me"></div>

<script>
    var embedding = ZiggeoApi.Embed.embed(
        "#replace_me", {
            width:640,
            height:480,
            video: "VIDEO_TOKEN"
    });
</script>
  • This would create embedding 640 pixels in width and 480 pixels in height, which would play the video we specified in video parameter.

Quick example of the video recorder would be the following:

<div id="replace_me"></div>

<script>
    var embedding = ZiggeoApi.Embed.embed(
        "#replace_me", {
            width:640,
            height:480
    });
</script>
  • As you can see creating a recorder is quite simple. The recorder itself would be of 640 pixels in width and 480 pixels in height.

Quick example of video player would be the following:

<div id="replace_me"></div>

<script>
    ZiggeoApi.Events.on("system_ready", function() {
        var player = new ZiggeoApi.V2.Player({
            element: document.getElementById("replace_me"),
            attrs: {
                width: 640,
                height: 480,
                video: "VIDEO_TOKEN"
            }
        });

        player.activate();
    });
</script>
  • This would create embedding 640 pixels in width and 480 pixels in height, which would play the video we specified in video parameter.
  • The v2 Video player has been added to our SDK in r2, so you need r2 or above.

Quick example of the video recorder would be the following:

<div id="replace_me"></div>

<script>
    ZiggeoApi.Events.on("system_ready", function() {
        var recorder = new ZiggeoApi.V2.Recorder({
            element: document.getElementById("replace_me"),
            attrs: {
                width: 640,
                height: 480
            }
        });

        recorder.activate();
    });
</script>
  • As you can see creating a recorder is quite simple. The recorder itself would be of 640 pixels in width and 480 pixels in height.
  • The v2 recorder has been added to our SDK in r14, so you need r14 or above.
  1. JavaScript embedding method is great when you are creating dynamic website and you might need to change something on runtime.
  2. It is best way to go with if the pages are loaded over AJAX
  3. Best to use for any embedding when the element that will hold the embedding is not yet on the page itself (it for example gets created by JavaScript at some point).

Popups are great when you want to have something capture the focus. It is right there across the screen plus it does not change the layout of your website.

As such we made it possible for you to embed the Ziggeo player and recorder into your website as a popup, and what follows are simple steps on how to do it yourself in less then few minutes.

As with JavaScript embedding shown above, it allows you to specify the embedding code that you want to use on the fly.

Quick example of popup video player would be the following:

<script>
    var embedding = ZiggeoApi.Embed.popup(
        {
            width:640,
            height:480,
            video: "VIDEO_TOKEN"
        }
    );
</script>
  • This would create embedding 640 pixels in width and 480 pixels in height, which would play the video we specified in video parameter.
  • It is good to mention that popups work only for players, not for recorders.

Unfortunately the v2 player does not support popups at this time.

  1. Popping out from the website means that you can focus everyone to the video or recorder when you want and where you want.
  2. Requires no specific placement into the website, so it is easy to have it there regardless of what changes you make to your website theme.